Make a Div move on hover

[Tomi]

How can I make a Div move on hover? I'm wanting to create a fancy navigation whereby when the user hovers over the link, the background and the text will move out of alignment with the other links. Example:

////[Link]
////[Link]
////////[Link] (hovered over)
////[Link]

/= Solid block of colour.


Thanks

[Johnathan]

I got something. Not sure if it's exactly what you want but here it is.

Here's the HTML

Code: Select all

<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>


And your CSS

Code: Select all

ul {
   padding:0px;
   margin:0px;
   }
li {
   margin:0px;
   padding:0px;
   list-style: none;
   }
li a {
   color:white;
   background-color:black;
   display: block;
   width:100px;
   }
li a:hover {
   background-color:black;
   display: block;
   text-align:right;
   }


Here's a working example. http://filesharebox.co.uk/test/

[Johnathan]

I changed it a little now so the bar that pops out is always the same length.

Code: Select all

ul {
   padding:0px;
   margin:0px;
   }
li {
   margin:0px;
   padding:0px;
   list-style: none;
   }
li a {
   color:white;
   background-color:black;
   display: block;
   width:50px;
   }
li a:hover {
   background-color:black;
   display: block;
   text-align:right;
   width:100px;
   }


Live at http://filesharebox.co.uk/test/

[Tomi]

Spoke on msn, thanks

[rangana]

Some fancy motion

Code: Select all

<style>
ul {
   padding:0px;
   margin:0px;
   width:100px;
   }
li {
   margin:1px;
   padding:0px;
   list-style: none;
   }
li a {
   display: block;
   width:100px;
   background:#565656;
   height:30px;
   text-align:center;
   font-family:"Trebuchet MS",arial,tahoma;
   font-size:10pt;
   line-height:30px;
   text-decoration:none;
   color:#9c0;
   font-weight:bold;
   }
</style>
<script type="text/javascript" src="http://rangana.moonylist.com/rac/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
   {
   $('ul li a').hover(
      function()
         {
         $(this).animate({marginLeft:'30px',backgroundColor:'#565656'},'normal');
         },
      function()
         {
         $('ul li a').animate({marginLeft:'0px',backgroundColor:'#9c0'},'fast');
         }
      );
   });
</script>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>


You need to download jQuery and replace my external call to what you have at your end.

Hope that helps.

[Tomi]

Wow that's great thanks! How do I make it so I can have two lists, one that has the effect and one that doesn't?

[rangana]

The script actually acts as if your pointing to a CSS rule of an element. You can replace the part inside the $ function to target the element of your desire, including IDs.

Here's a basic example:

Code: Select all

<style>
ul {
   padding:0px;
   margin:0px;
   width:100px;
   }
li {
   margin:1px;
   padding:0px;
   list-style: none;
   }
li a {
   display: block;
   width:100px;
   background:#565656;
   height:30px;
   text-align:center;
   font-family:"Trebuchet MS",arial,tahoma;
   font-size:10pt;
   line-height:30px;
   text-decoration:none;
   color:#9c0;
   font-weight:bold;
   }
</style>
<script type="text/javascript" src="http://rangana.moonylist.com/rac/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
   {
   $('#myul a').hover(
      function()
         {
         $(this).animate({marginLeft:'30px',backgroundColor:'#565656'},'normal');
         },
      function()
         {
         $('#myul a').animate({marginLeft:'0px',backgroundColor:'#9c0'},'fast');
         }
      );
   });
</script>
<ul id="myul">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>

<h3>Another list</h3>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>


Hope that helps.

[Tomi]

Ooh I get it, thanks

[rangana]

No problem. Glad to help