3

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.

Community
  • 1
  • 1
Ty Bailey
  • 2,392
  • 11
  • 46
  • 79
  • Until today (9 jan 2014) the Bootstrap 3 still not support sub menu dropdown. I searched thru Google about responsive navigation menu and found this is the best i though. It is **Smart menus** http://www.smartmenus.org/ I hope this is the way out for anyone who want navigation menu with multilevel sub menu. – vee Jan 09 '14 at 06:56
  • @TyBailey Late reply, but what you're describing is an "Accordion" control, not usually called a menu control. A menu has been around since early Macs (and before) and you can usually see each level of nesting after each thing you click (until you run out of screen width). Accordion will "push" other content/items down, menu does not. If you agree please update the question's title so google doesn't bring folks here when looking for menu answers. – yzorg Apr 25 '19 at 13:53

2 Answers2

6

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

user2693017
  • 1,750
  • 6
  • 24
  • 50
  • No, In the question I said "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." Your solution does the same thing I linked to. It needs to be within the same menu, not off to the right. – Ty Bailey Nov 04 '13 at 18:52
  • @TyBailey So are you talking just about a fade effect ? Not about the display style ? – user2693017 Nov 04 '13 at 18:57
  • No, I need the submenu to push the nav elements that are below it down and be displayed in the current menu. Not overlay anything. – Ty Bailey Nov 04 '13 at 18:59
  • 1
    @TyBailey I updated my answer, I think this should solve your problem, if not please provide more information. – user2693017 Nov 04 '13 at 19:09
1

Jeff Mould solved this beautifully.

Git: https://github.com/jeffmould/multi-level-bootstrap-menu

Nav Demo: http://theboot.fenwickmedia.com/

Mason
  • 19
  • 2