26 January 2011

This is 26January2011, Republic day of India. Flag of India.svg
I was try to apply some new style in Menu style, I found that many web sites are using smooth animated background in menu. So I study it and found the logic behind the code.
Let understand here…
saMenu
Here when user will mouse over to second menu, gray background will come over on second menu from the first one, with sooth scroll effect.
Here is its trick,
  <ul id="mnu">  
      <li><a href="#">saAction</a></li>  
      <li><a href="#">Web Technologies</a></li>  
      <li><a href="#">jQuery</a></li>  
      <li><a href="#">Visual Studio</a></li>  
      <li><a href="#">C#</a></li>  
      <li style="width: 100px; height: 60px; top: -5px;" id="mnuEffect">  
      </li>  
 </ul>  

Now CSS Part

 <style type="text/css">.csharpcode, .csharpcode pre<br />{<br />     font-size: small;<br />     color: black;<br />     font-family: consolas, "Courier New", courier, monospace;<br />     background-color: #ffffff;<br />     /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br />     background-color: #f4f4f4;<br />     width: 100%;<br />     margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }<br /></style>  

There will be an extra LI tag after all menu and it will animate its left position. and its height will be little bit bigger then other menu has.

and after it there will be a function to animate the position to the selected LI tag:

 $('li:not(#mnuEffect)').mouseover(function ()   
 {       
      $('#mnuEffect').stop().animate({left: $(this).position().left,width: $(this).width() }, 'slow');       
 });  


This is very simple trick, So here I created function to apply this effect to any kind of menu, and here we can apply any CSS effect for good GUI.
Happy Programming, जय-हिंद!

0 comments :

Post a Comment