jQuery “flash like” menu |

Home Menu & NavigationjQuery “flash like” menu

jQuery “flash like” menu

14 years ago Views

10449

2053

n/a

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"
      })