Simple Responsive Horizontal Slide Out Menu
Full width menu with sub navigation. Opens/hides on click.
Check out the demo here.
This is a good start if you need a full with responsive menu for your website with some links having sub-navigation and others don’t. This is a pretty basic concept and can be worked on to achieve something great.
Lets start with the HTML. As it includes levels of navigation links so the html would be a big if you have large number of links. I have included images in the sub-navigation, but that area can be used to include pretty much anything and would need custom css to style the elements included there.
HTML
CSS
The CSS is written is 2 portions. There is a separarte CSS for devices who max width of 480px which would cover most of the mobile phones.
The CSS for normal browsers is pretty simple. If you visit the demo here, you would notice that when you reduce the size of the browser, the menu adjusts itself to fix the browser. Now when you click on the menu item to open the submenu, it opens the menu just below the main menu and pushes rest of the main menus down. This is done by simply adding position:static in the responsive css under media queries (Line 19).
Lets get to the jQuery part now:
The jquery required to achieve the onlclick open submenu function is pretty simple and straightforward.
Line2: Runs the function on click of the main menu elements.
Line3: Checks if the element already has a class nav-open, which means if the submenu related to the menu item is already open.
Line 6: If it is open, close it.
Line10: If the menu item is not open, close all the submenus that are open.
Line11: Open submenu related to the main menu which is clicked.
That’s it, we can also make it run on hover of the main menu items. Please add notes to the this post if you have any better ideas.
