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.
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'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!
I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for hover and making it on click but, customer is insisting on having hover.
Heres the problem, I have bootstrap navbar with few menus that dropdown on hover.
But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach".
I want to do following things using javascript/jquery.
Keep existing hover behavior on desktop and laptop
On devices like iPad, i would like the menu to disappear under following circumstances
(a) when clicked on the same menu item again
(b) When clicked on submenu
(c) When clicked outside the menu
Any sort of help here is appreciated.
Here is the fiddle http://jsfiddle.net/em656522/2/
Bootstrap's defaults are best web practices, so I would suggest staying closer in line with what's already there. The only thing you should do to customize your menu's behavior is perhaps add the hover dropdowns for desktop only. Bootstrap's responsive utility classes are also available for you to use.
You may want to read this question for some ways to approach your desktop dropdown menu.