DEVPPL
http://www.devppl.com/forum/

Make a Div move on hover
http://www.devppl.com/forum/viewtopic.php?f=43&t=12550		 Page 1 of 1
Author:  Tomi [ Sun Dec 21, 2008 5:38 pm ]
Post subject:  Make a Div move on hover
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
Author:  Johnathan [ Sun Dec 21, 2008 6:59 pm ]
Post subject:  Re: Make a Div move on hover
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/
Author:  Johnathan [ Sun Dec 21, 2008 7:13 pm ]
Post subject:  Re: Make a Div move on hover
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/
Author:  Tomi [ Sun Dec 21, 2008 7:40 pm ]
Post subject:  Re: Make a Div move on hover
Spoke on msn, thanks :)
Author:  rangana [ Mon Dec 22, 2008 6:53 am ]
Post subject:  Re: Make a Div move on hover
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.
Author:  Tomi [ Tue Dec 23, 2008 3:02 am ]
Post subject:  Re: Make a Div move on hover
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?
Author:  rangana [ Tue Dec 23, 2008 4:58 am ]
Post subject:  Re: Make a Div move on hover
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.
Author:  Tomi [ Tue Dec 23, 2008 5:02 am ]
Post subject:  Re: Make a Div move on hover
Ooh I get it, thanks :)
Author:  rangana [ Tue Dec 23, 2008 5:03 am ]
Post subject:  Re: Make a Div move on hover
No problem. Glad to help ;)
Page 1 of 1 All times are UTC + 1 hour
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/