PDA

View Full Version : Make link in a ul menu shift on hover



Southwoods
Jul 25th, 2010, 06:28 PM
Hi,
This should be relatively simple, but I can't figure out the best way to do this.

I have a menu consisting of all images, with links to various places. Something along the lines of:



<div id="navigation">
<ul class="jumpmenu">
<li><a href="link1.html"><img src="link1.png" /></a></li>
<li><a href="link2.html"><img src="link2.png" /></a></li>
<li><a href="link3.html"><img src="link3.png" /></a></li>
</ul>
</div>


I would like to get the images to slightly shift up on hover. For example, you mouseover the image and it moves 2 pixels up.

What is the best way to accomplish this with CSS?

Thanks

optimus203
Jul 25th, 2010, 06:56 PM
Check out this link (http://css.maxdesign.com.au/listamatic/). Has a bunch of useful how-to's lists and navs.

thilss0o
Jul 25th, 2010, 07:24 PM
Southwoods,

To be able to do something like this with a list, in the css you need to set the display to block to be able to work with it like its a div. heres an example:


#nav-menu li {display: block;width: 135px;height: 18px;margin:5px 5px 5px 5px;}
#nav-menu li a{display: block;width: 135px;height: 18px;margin:5px 5px 5px 5px; text-decoration:none;}
#nav-menu li a:hover{display: block;width: 135px;height: 18px;margin:5px 5px 5px 5px; text-decoration:underline;}
#nav-menu li.active {text-decoration:underline;}

you get the idea, you can mess around with the different css attributes

optimus203
Jul 25th, 2010, 07:48 PM
A few revisions to that snippet. Couldn't get the desired hover-over jump to occur when #nav-menu li {display: block;} was set, so I switched it over to display:inline; and seemed to do the trick. Also revised the margin-top for #nav-menu li a:hover , to get the desired 2px jump effect.



<html>
<head>
<style type="text/css">
#nave-menu ul {list-style-type: none;}
#nav-menu li {display: inline; width: auto; height: 18px;margin:5px 5px 5px 5px;}
#nav-menu li a { float: left; display: block; width: 100px;height: 18px;margin:5px 5px 5px 5px; text-decoration:none;}
#nav-menu li a:hover {display: block;width: 100px;height: 18px; margin:3px 5px 5px 5px; text-decoration:underline;}
#nav-menu li.active {text-decoration:underline;}
</style>
</head>

<body>

<div id="nav-menu">
<ul>
<li><a href="link1.html"><img src="img1.jpg" width="100" height="18" /></a></li>
<li><a href="link2.html"><img src="img2.jpg" width="100" height="18" /></a></li>
<li><a href="link3.html"><img src="img3.jpg" width="100" height="18" /></a></li>
</ul>
</div>

</body>
</html>

thilss0o
Jul 25th, 2010, 08:06 PM
oh well i wasn't adding the desired hover over effect in my snippet, i was just showing an example of how to set css styling on list elements.

and i dont know how it works with the div set to the id, but i usually would set the ul to the id

e.g.


<ul id="nav-menu">
<li>whatev</li>
</ul>

met
Jul 25th, 2010, 08:23 PM
and i dont know how it works with the div set to the id, but i usually would set the ul to the id


#nav ul {
/* applies the style to any UL within div #nav */
}




ul#nav {
/* applies the style to the UL with an ID of #nav
}



there's a subtle difference. If you intend to have multiple ULs within a DIV, you could style all at once using #div ul

(or of course use a class instead of an ID.)

simlarly if you only intend to have one UL, you can style that directly, leaving any other ULs within the DIV untouched.

matter of preference really imo.

thilss0o
Jul 27th, 2010, 09:38 PM
gotcha