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...!
Related
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
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 am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.
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
How can I make a dropdown menu similar to NFL.com's using jQuery? I really like the way it stays hidden, while still providing all the convince of a regular menu.
Something similar can be achieved with jQuery using their Slide effect. Essentially, each of those submenus will be contained in their own div, each positioned such that when fully visible you get the submenu under the main nav. Then, simply start off with all of those subnav divs hidden, and apply the slide effect to show/hide them during mouseover/mouseout events.
NFL.com uses Script.aculo.us, which was written by Thomas Fuchs
See the Script.aculo.us site for lots of examples and demo code
The Effect.SlideDown and Effect.SlideUp should get you what you need for this type of menu.