I want to use this http://getbootstrap.com/examples/offcanvas/ with the sidebar as my main navigation.
But I need a navigation with two levels, and the second level has to slide-in like the first level. I was thinking something like this: http://www.marcandrew.net/off-canvas-infinity-push/
Somebody know how to do it?
Related
I recently ran into this GIF of a sidebar menu:
https://www.sooperthemes.com/sites/default/files/documentation-files/main-menu-mobile-2.gif?fid=925
I have completely fallen in love with the fact that the entire menu is exchanged for the child menu, which in theory could work with an unlimited amount of levels in the menu.
How is this navbar made, or does a tutorial or a Codepen exist with something similar? It would be greatly appreciated.
I could ofcourse use Javascript to hide the "parent-menu" onClick and add an item to the top breadcrumb menu, but surely a cleaner solution exists?
I'd like to have a navigation menu for an education website similar in structure to the one found here.
Take note of the left-hand navigation menu header and list items. In desktop view, all nav items appear, but in mobile view, only the header is visible (and you have to click the + icon to have the nav menu items appear)
Looking at the elements it appears there's some javascript working in the background that switches the CSS class names when the site goes to mobile view.
I've been trying to recreate something similar to no avail...
Could someone please take a stab at it using a simple structure like this using JSFiddle?
Nav Title (on click, Nav Menu Items 1-3 appears/disappears below)
Menu Link 1
Menu Link 2
Menu Link 3
I'd really appreciate it! Thank you!
there are already existing bootstrap templates and plugin that meet your requirement. Also you can leverage android material design guide line & sample templates.
https://getmdl.io/
(Edit: Copied from OP's comments:)
... is the design guideline from google for making web-apps. The idea is to make consistent looking as native possible. the site includes components like icons, widgets, navbar etc. Also contains sample templates that can be clone or download from git.
http://getbootstrap.com/
Bootstrap on the other hand have same features but its more targeted mobile first design approach.
Again if you want both you can check out materializecss.com
I've seen countless examples of side bar navigation menus made with bootstrap, but none seem to be the way I'd like it.
I am looking for a couple features :
Each menu item has an icon and text
Collapsible : Display only the icons and top level menu items when collapsed
Simple animation when collapsing/uncollapsing (sidebar comes over the content)
Top level menu items and submenu items (hierarchy)
This one is nice but doesn't collapse
This one collapses (but not the way I want) but is missing icons + submenu items
This one (2nd example) has the collapsing behaviour I want but is missing some other things (and the way to make the menu appear is ugly)
Is it possible to have all these features on a sidebar with Bootstrap + javascript?
I've tried to convert a sidebar on what you needed.
Please have a look at this Codepen
Hope this helps!
Lets take a look at google services menu:
There is that More pop up menu. but when we resize page all that top menu line does nothing - its width stays constant:
Same thing happens when we enlarge page width:
So I wonder if there is any jQuery plugin for greation of smart top bar menus that would add items to More when needed and return items from More to main menu when resulution allows that.
Is there any such plugin for jQuery?
Perhaps, something like this?
I have a very complex navigation menu I am trying to create, it looks something like this:
Basically it's a 3 level navigation bar that has 2 parent tabs, when you hover over any of the tabs you should be able to see its child navigation levels and when you hover out you see what you are currently on.
Another problem is that the two parent tabs have two different color themes, parent tab 1 being blue with all its child levels blue and the parent tab 2 is green etc..
I'm very confused about how I should do this, maybe nested divs?
Are there any plugins that will might my life a lot easier?
Many samples are avaialble in internet but you need to modify according to your requirement.
Some examples are avialble:
http://jsfiddle.net/elusien/PayFw/8/
http://snippets.aktagon.com/snippets/200-Really-simple-hover-menus-with-jQuery
http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/#
Something like jQuery Drop Line Tabs might work for this situation. It's a jQuery plugin that allows for the multi-level navigation that you have in your question's image. Here's a link to the plugin (and there is a live demo on that page, as well,) if you would like to check it out: jQuery Drop Line Tabs.
If that doesn't work out... searching around online is bringing up a lot of menu plugin tutorials.
Hope that at least gets you pointed in a plugin direction for this...!