Top navigation bars have always been popular in web design. Since these elements contain such vital information some designers like to keep them fixed on-screen while scrolling down the page. But unfortunately this can get in the way of content if the bar is too large. A popular online blogging platform Medium created an interesting method of hiding the bar when scrolling down and re-showing it when scrolling back up.
Best jQuery Menus Plugins & Tutorials with Demo
JsMorph : JavaScript Motion framework
jsMorph is a morphing – motion – tweening framework that knows what you need to do… get going! It’s a nice ensemble of best timing, fast, smart and resource saving algorithms and convenience.
jsMorph is a completely Cross-Browser, pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience.
jQuery Slideout Menu
We’ve created an elegant jQuery-powered animated slideout menu. We were inspired by the simple effect found at Outdated Browser and extended the menu to also work in a variety of places. Try it as a top menu, as well as a right-side menu. Let’s dive into some code and learn how to use this drop.
contextMenu.js : jQuery Context Menu Plugin
contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.
Features:
- Use as simple popup or as a context menu. With some twick can be used for multi purpose.
- Adjust position and size to fit in viewport.
- Keyboard interaction.
- Support different type of inputs (json, UL list).
- Trigger Context menu with right-click, left-click,hover or any other mouse events.
- Css outside of javascript so you can edit the look of menu.
- Enable/disable options.
- Optional icons for commands.
- Lot of configurable options.
- Submenus
On-Scroll Animated Header with CSS3 & jQuery
We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.
Zetta Menu : jQuery Mega Menu
Zetta Menu is jQuery mega menu plugin.
Features:
- Mega menu comes with CSS3 animations.
- Over 430 Icons (Font Awesome)
- It is fully responsive and have 3 mobile versions.
- Different layouts: horizontal top and bottom, vertical right and left.
- 3 ways of drop down (hover, click, toggle)
- 12 column grid system.
- 6 different templates with unlimited color schemes.
Menu Transition In Effects with jQuery
This one here is something I thought of after seeing the surge in popularity with push in side menus. I’ve seen a couple websites use menu transition to animate the menu items as they appear. Here I will show a simple effect of making the menu links stack upwards. The second effect I created is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.
