I am trying to create a multi-level responsive drop down menu.
This link opens a pdf that holds the pictorial description that I am trying to code
page1 in pdf - depicts multi level view
page2 in pdf depicts the first level of drop downs. A B and C are drop down menus
page3 in pdf depicts the complete view when drop-down C and all its children drop-down menus are clicked till the end of hierarchy i.e., till level4
Each level - 1, 2, 3 and 4 have to be aligned horizontally center and vertically middle. The entire design needs to be responsive.
At each level, on clicking a drop-down list item, the next level has to be shown.
Any level should disappear or collapse on mouse-out.
I tried various approaches, using the bootstrap framework. Each of the approaches ended up with some limitations. Tried lots of debugging, taking clues from google search and forums. All went in vain.
Can some one suggest what could be the best approach?
Can this be achieved with a combination of html5, css3, jquery and bootstrap framework alone?
Does this bring in a need of any other technology to be deployed?
Related
on a wordpress custom theme, I'm using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it's simple and easy, but I'd like to separate the menus in two floating columns, left category and right the global menu.
see image:
I currently can insert a "<hr>" between one menu and the other, using combinedMenu.append("<hr>");, but if I "append" to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is
<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>
so it closes the tag itself! GRRRRR
can anyone helps me?
bye, L.
I have developed wordpress website using Woo commerce plugin and I have created drop menu.
In my Site I have watch brands, knife brands and also some unwanted images deleted from watch brands. Now drop down of watch menu having extra width, its showing empty black area in Watches drop-down menu. I can't figure it out that how To reduce it ?
please help me into this.
my problem is with a bootstrap menu. I'm using wp_bootstrap_navwalker in my WP theme, and I found some solutions on the web to enable more deeper nav, but I can't find the solution to make it work fine on desktop and on smaller devices.
I have this structure of the menu:
My question is: How to enable all menu items, dropdown items and sub dropdown items to be clickable on all devices (on hover on desktop and on click on small devices). I suppose that on small devices there should be some function that lets you to click 2 time to access the link and on 1 click just to enable opening of the sub items.
I currently have this solution, but doesnt quite do what I want, as my sub dropdown items show up at the same time like this:
This is the exact code (JSFiddle) that I use in header.php and my style.scss.
Any ideas?
I have been searching for an example of how to build a mega menu like what Mashable has, but without using PHP or MySQL and I'm having a heck of time.
If anyone know, that would be great... I'm just at my wits end and my eyes are now turning square from scouring the interwebs.
I've seen several example of how to create a jQuery dropdown mega menu, where, on hover, the menu drops down the full width of the menu, and displays more options. But I'm looking for the exact effect Mashable has, where you drop down and there is an unordered list to the left. You hover over any of those, and it reveals a sub list in the remaining area of the dropdown.
Al the example I have seen rely heavily on pulling an external php page to load in new options, but I just need it to display a sub unordered list, and not load in anything dynamically.
You can see what I'm talking about with the following link: http://mashable.com/
Can anyone help? or at least point me in the right direction?
If you dont need any dynamic loading whats keeping you from doing it in plain HTML and CSS? You can do the transitions in CSS3 as well.
I dont know what it is called but you can see on this page http://carleypelletier.deviantart.com/gallery/#_browse if you click on a category you'll get a list and if there is a subcategory there will be a > at the end. When clicking this the menu text moves left off the menu and the new categories are in. How do i do this type of menu? i'm open to any libs. It would be nice if i can fill it using json or a config file.
Check this Chinese menu of jQuery drop downs, you are looking for a "drill down style of menu, on the menu you will see a "jQuery iPod-style Drilldown Menu" which is pretty close to what you want, they just used multiple ones.
A working example of one is here