CODEWITHSUNDEEP
javascriptjqueryhtml
user434885
user434885

Reputation: 2018

jquery animation in menu bar

i am trying to create a menu bar using jquery. I am using the following code,

<div class="menu">
<table align="center">

<tr>
<td class="menu_item" style="background:green;" >
<a style="color: white;" href="index.php?view=Index">Home</a>
</td>
<td class="menu_item" style="background:blue;" >
<a style="color: white;" href="index.php?view=Services"> Service </a>
</td>
<td class="menu_item" style="background:red;" >
<a style="color: white;" href="index.php?view=About"> About </a>
</td>
<td class="menu_item" style="background:yellow;" >
<a style="color: white;" href="index.php?view=Download"> Download</a>
</td>
<td class="menu_item" style="background:pink;" >
<a style="color: white;" href="index.php?view=Contact"> Contact</a>
</td>
</tr>
</table>
</div>
<hr>

<script>
$(document).ready(function(){  
     //When mouse rolls over  
     $(".menu_item").mouseover(function(){ 

         $(this).slideUp(1000, method, callback});

     //When mouse is removed  
     $(".menu_item").mouseout(function(){  
         $(this).slideUp(1000, method, callback});

 });
</script>

The mouseover and mouse out functions are working, i checked those using alert boxes but no change is happening to the items...? where am i going wrong ?

Upvotes: 0

Views: 882

Answers (3)

Han Dijk
Han Dijk

Reputation: 1612

You are going wrong with using tables for a list. Use a list containing list-items.

<ul>
  <li class="menu_item"><a href="http://..."></a></li>
  <li class="menu_item"><a href="http://..."></a></li>
  <li class="menu_item"><a href="http://..."></a></li>
  ...
</ul>

and float the list items left

ul li.menu_item {
  display: block;
  float: left;
}

Your animation should work now, also you could use the jquery hover function

$(".menu_item").hover(over, out);

to make it a little easier

Upvotes: 2

Zakaria
Zakaria

Reputation: 15070

You can find the complete code in this page:

http://jsfiddle.net/mdfj8/1/

The problem was the method and callback arguments.

Regards.

Upvotes: 0

jensgram
jensgram

Reputation: 31518

Well, you have a few syntax errors:

$(document).ready(function(){  
     //When mouse rolls over  
     $(".menu_item").mouseover(function(){ 
         $(this).slideUp(1000);
     });

     //When mouse is removed  
     $(".menu_item").mouseout(function(){  
         $(this).slideUp(1000);
     });
});

I'm not sure, however, what you're trying to achieve here. I.e., the above works but I'm not sure it really does what you intend.

Upvotes: 2

Related Questions