jQuery rollover menu without images

Question

I'm stuck with a seemingly simple rollover task.

Black is the default state, blue the hover state.

As you can see, in the default state only the latter digits show, at hover, the 20 has to be added (no problem), the colour changed (no problem) and the whole thing has to be vertically in the middle (the problem).

Here's a jsFiddle of what I've got so far: http://jsfiddle.net/markushausammann/3YPXk/

What markup and CSS would enable such a behaviour without using images?¨

Edit: The markup doesn't really matter, it's a normal horizontal ul li markup. But here is an example of how the markup may look like:

<div id="nav-years">
   <ul>
      <li><a href="#" id="2002"><p class="supertext">20</p><p>02</p></a></li>
      <li><a href="#" id="2003"><p class="supertext">20</p><p>03</p></a></li>
      <li><a href="#" id="2004"><p class="supertext">20</p><p>04</p></a></li>
      <li><a href="#" id="2005"><p class="supertext">20</p><p>05</p></a></li>
    </ul>
</div>

And some CSS, but this may have to be adapted for a respective solution.

/* years navigation */
#nav-years {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
}

#nav-years ul {
    display: block;
    height: 70px;
    list-style: none;
}

#nav-years li {
    display: block;
    height: 35px;
    width: 35px;
    float: left;
    text-align: center;
    margin: 0 15px;
    overflow: hidden;
}

#nav-years a {
    display: block;
    width: 35px;
    color: #000000;
    font-size: 30px;
}

Off the top of my head you could change the height and width to force the text break. Would probably need to be `inline-block` though. A fiddle would be excellent. — Jack, Oct 11 '11 at 14:36
Can't give you a jsFiddle demo, if I could, I wouldn't need to ask this question. — markus, Oct 11 '11 at 14:37
@Jack Changing the height doesn't move half of the content up and half down, it moves everything down. And my first problem is already that I don't get the lower portion of the content into the visible area. — markus, Oct 11 '11 at 14:39
@markus: thirtydot, and the rest of us for that matter, would like a demo of what you *have* as a jsFiddle. Not the final result you'd like. That way, we have something to work from to diagnose/solve your problem. — Chris Pratt, Oct 11 '11 at 14:42

score 2 · Accepted Answer · answered Oct 11 '11 at 15:15

2

Something like this, but good:

http://jsfiddle.net/vUCgm/

You want to start playing with line height, and the :hover psuedo-class.

answered Oct 11 '11 at 15:15

daveyfaherty

4,585
2
27
42

1

Slight change: http://jsfiddle.net/vUCgm/1/ now the position is closely connected with a padding-top value, only one thing to change – daveyfaherty Oct 11 '11 at 15:20
@puppybeard dang, you beat me to the punch :) – joshmax Oct 11 '11 at 15:33

joshmax · Answer 2 · 2011-10-11T15:43:44.137

Really, this can be accomplished through CSS alone (including aligning it vertically, per original problem), saving you a JS call. See jsFiddle.

Here's the new CSS, though for a quick look (new code marked with comments):

#nav-years { display:block; height:70px; position:relative; width:400px; }

#nav-years ul { display:block; height:70px; list-style:none; }

#nav-years li {
    display: block;
    float: left;
    height: 35px;
    line-height:25px;
    margin: 0 5px;
    overflow: visible; /* added */
    text-align: center;
    width: 35px;
}

#nav-years a {
    color: #000000;
    display: block;
    font-size: 30px;
    text-decoration: none;
    width: 35px;
}

#nav-years a:hover { 
    color: #00FFFF;
    margin-top:-12px; /* added */
}

/* added */
#nav-years a .supertext { display:none; }
#nav-years a:hover .supertext { display:block; }

score 0 · Answer 3 · answered Oct 11 '11 at 15:18

0

This should do it. You'll want to mess with the height of the ul and margin-top of the lis a bit to get it how you want.

http://jsfiddle.net/3YPXk/3/

answered Oct 11 '11 at 15:18

Jack

8,851
3
21
26

score 0 · Answer 4 · answered Oct 11 '11 at 15:19

0

http://jsfiddle.net/3YPXk/2/

Only line-height and height in JS.

Keep $(this).height(70); all the time and change line height:

a -> line-height:70px;

a:hover -> line-height:35px;

answered Oct 11 '11 at 15:19

yosh

3,245
7
55
84

jQuery rollover menu without images

4 Answers4