Hidden nav bar on mobile - javascript

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

Related

Multi-level sidebar menu like Glazed Main

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?

Sticky header with next and previous button

I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.

Recommended Menu Sidebar to the Leftside of the Webpage

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.

Multilevel Navigation Tabs

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...!

How to design a menu Bar like ckEditor

I am trying to design a Menu bar like ckeditor or TinyMCE. Any idea how to design as i have just sufficient knowledge about CSS and JS so i can do that my own but not getting any clue after spending so much time on ckEditor using firebug console.
I would suggest you look at normal navigation menu methods - ie create a list with links - you can style the list with images or drop down menus as you wish ... check List Apart for horizontally styling lists -> http://www.alistapart.com/articles/horizdropdowns

Categories