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?
Related
I'm looking to build something like this into my webpage:
I'm interested in the box at the bottom of my mockup, which shows the menu items on the lhs and the panel on the rhs that will show different content when clicked. I'd like to build it in html and jquery if possible.
I've seem similar things before, but I don't know the term for them. At the moment I'm googling show/hide panels show/hide menu buttons etc, but nothing is coming up. So hoping that this is a standard (ish) thing and that someone can help me out and let me know what I should be Googling!!!
Thanks!
It's a "tab panel" (or "tabbed panel"), with the tabs arranged vertically on the left. This is usually an option available on various tab panels even if they default to tabs across the top.
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!
Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
I'm looking for a menu sidebar.
A button should enable to display or remove the menu. When you feel that you are redo an available button should to show the menu sidebar.
The menu should be located on the left side.
The menu should not affect the remaining component. The menu should be acted independent.
The menu should be located specifically in the webpage when you use vertical scroll.
Today, I have problem to find one. Can you recommend me?
Info:
I'm using jquery and bootstrap
Here is the DOWNLOAD Page
And here is the DEMO
This library is created with plane jQuery and bootstrap I used this on some of my projects and so I recommend this to you. Hope it helps.