Submit your widget

jQuery “flash like” menu

Created 6 years ago   Views 13066   downloads 2041    Author n/a
jQuery “flash like” menu
View DemoDownload 22.1 KB
133
Share |

When you rollover one item of your menu, the font-size expand to 225%, the color fade to yellow and the other items are giving more space to the hovered item, when you roll out it will take its place back in the menu.

First add dependencies in your head document, you will need jQuery ui for this plugin.

      <script src="js/jquery.js" type="text/javascript"></script>

      <script type="text/JavaScript" src="js/jquery.menuZoomer.js"></script>

      <script type="text/JavaScript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

 

In your menu, add to each item the class flashMenu.

<a href="Portfolio.html" class="flashMenu">Portfolio</a>

 

Customization
You can customize the speed, font-size and easing, look for your document ready in the file jquery.menuZoomer.js, you may need to tweak the line-height.

      $("a.menuFlash").hoverSize({
      speed:400,
      fontColor:"#d7df23",
      fontSize : "300%",
      lineHeight:"39px",
      easing : "easeOutExpo"
      })