I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS.
Best jQuery Menus Plugins & Tutorials with Demo
jquery.arbitrary-anchor.js : jQuery Smooth Scrolling
With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.
Transitions for Off-Canvas Navigations with CSS3 & JavaScript
Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.
slimMenu : jQuery Responsive & Multi-level Navigation Menus
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.With slimMenu, you’ll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus.
Features:
- Multi-level nested menus.
- 100% mobile responsive menus.
- Multiple slimMenu navigations on the same page.
- Tap areas to toggle sub menus easily in touch devices.
- Hover option and effects for desktop version.
- Submenu indentation options for responsive version.
AnimateScroll : jQuery Plugin for Animating Scroll
AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.
It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.
scrollIt.js : jQuery plugin to Vertically Scrolling Pages
A jQuery plugin that makes it easy to create paginated, feature vertically scrolling pages.
Features:
- Easy to implement: One JS call, just put data- attributes on the DOM
- Lightweight: ~1kb minified
- Active Class: Your navigation is updated automatically
- Configurable: Set the animation easing, duration, callbacks and more
- Keyboard Navigation: Press the up and down keys to move…
Google Play’s Multi-Level Navigation with jQuery & CSS3
Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch using HTML, CSS and jQuery.
menuSlider.js : Simple jQuery Menu Slider
Simple jQuery menu slider.Call the menuSlider on the container ({Border Thickness, Border Style, Border Color, Sides of Border, Background Color, Background Border Radius, Transition Speed, Transition Type}).The item the slider returns to has an class of “selectedMenuItem”. To switch which item is the current item, change which item has the selectedMenuItem class. I achieved it above by adding a click function in the script .
Multi-Level Push Menu in JavaScript
Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
