I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/
Related
We have a oddly coded sub menu that was customized so it could be in a specific column setup, however when you click a link under that sub menu, the sub menu then jumps up while the next page is loading. It looks pretty bad :P
For example when you go here: goo.gl/4mW5sW
and hover over the menu item "All discs" you can see the dropdown with the 2 customized columns.
If you click one of these links you will see the drop down than jump up while the page loads the link you clicked.
I have been combing through the css trying to locate why it jumps with an active click and am having no luck. Maybe another pare of eyes will help?
I even tried this pathetic attempt
a:active .sub-menu{display:none;}
But it didnt help
Thanks!
The problem is with the margin-top and the hover state of the ul class="sub-menu'. Find a way to select only the first column and add the next css:
margin-top: -1px!important;
Then select only the second column and add the next css:
margin-top: -1px!important;
You are giving both colums a -71px as top-margin and when hover is toggled you mess that margin for the first column, giving it a -71px of top margin.
If you provide code, i can help you further
A question is bothering me.
I trying to modify a menu item in my menu. It's the last item in it.
How could I change its position with CSS?
Dev Tools say that item has item-124 class in html.
Any ideas?
You should perhaps reorder your menu items inside your Joomla menu manager - to reorder using css only would cause you headaches at a later stage :)
Do you want to edit where it it positioned on the page or just the order in which it displays?
When I have a menu item which contains a submenu, this submenu is shown inside the menu's div, screwing the css (hover over the Services tab):
http://jsfiddle.net/jYXnE/2/
There this part of the JS (that everyone seems to use) which bothers me when initializing the menubar plugin:
position: {
within: $('#frame').add(window).first()
}
Since there is no frame id anywhere in the official examples, I guess it creates a div on-the-fly?
I compared my code to some other menubar jsFiddle and I can't find the issue to it, any help would be highled appreciated.
It seems like I had forgotten to link menubar's CSS. Everything is fine now.
I would love to use wordpress built in menu system and I need sub-menus. Is it possible to on hover show that menu items sub-menu in other place. See image.
Thank you. Any suggestions how to achieve this.
You can create the Sub-menu via the CMS in the menu panel dinamically under the parent label. Then you can just hide it onload and show it on the parent's hover. However the sub-menu must have position: absolute and, given your example the liwould have to de displayed inline.
A sample code would be useful to sort out details but this should work.
Hi, I'm doing a drop down menu in HTML/CSS the normal way; i.e., using ul li and nested uls for the drop-down menus.
I want to have the drop down menu slightly offset below the nav bar like it is here in
Orman Clark's Studeo Theme. I can't work out how to do this and still keep the drop down menu visible when I move my cursor between the top link and the drop down menu.
Any help is greatly appreciated.
.setTimeout() is the key you need!
(Try to hover on the 3rd li and reach the open menu by moving around the page! It will stay open, waiting for a predefined amount of time for you to mouse over. If it does not receive that input in that period, it will hide itself again.)
This could help:
DEMO
Answer found HERE