Make a Div move on hover

Tomi · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

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 · **Posted:** Sun Dec 21, 2008 6:59 pm

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

Here's the HTML

Code:

<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:

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 · **Posted:** Sun Dec 21, 2008 7:13 pm

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

Code:

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 · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

Spoke on msn, thanks

rangana · **Posted:** Mon Dec 22, 2008 6:53 am

Some fancy motion

Code:

<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 · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

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 · **Posted:** Tue Dec 23, 2008 4:58 am

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:

<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 · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

Ooh I get it, thanks

rangana · **Posted:** Tue Dec 23, 2008 5:03 am

No problem. Glad to help

Make a Div move on hover

Who is online