Question

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 ?

Answer 1

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.