Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown Sub Menus / Menu #424

Closed
kevsmt opened this issue Oct 14, 2011 · 59 comments
Closed

Dropdown Sub Menus / Menu #424

kevsmt opened this issue Oct 14, 2011 · 59 comments

Comments

@kevsmt
Copy link

@kevsmt kevsmt commented Oct 14, 2011

Is a Menu like nav buttons ever be created for bootstrap? To elaborate more, i would like to see bootstrap to include Menu like navigation w/ support for multi-level sub menus.

@mdo

This comment has been minimized.

Copy link
Member

@mdo mdo commented Oct 15, 2011

Multiple levels of dropdowns are not coming to Bootstrap. If you need the multiple levels, you should probably try another implementation of that content. It's not a great paradigm to begin with and piling on other levels never works well for users.

@mdo mdo closed this Oct 15, 2011
@kevsmt

This comment has been minimized.

Copy link
Author

@kevsmt kevsmt commented Oct 16, 2011

What i mean about Multi-Level Sub Menus are, like same things in your Menubar like: File, Edit, View, Search, Help, etc.
which you will hover/click to drop menu items, and the menuitems will have submenus to it..

Why is it not a great paradigm?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Nov 9, 2011

Sub-menus / nested menus in the navigation bar is on of the first demands I hear from webdevelopers (and there customers).
I know what you mean when you say its not beeing a great paradigm in the first place, but because it is such an old paradigm in rich-clients the demand for it is omnipresent.

So please reconsider re-opening this issue.
I think this should be available at least optional.
Lastly there are more complex mulit-layerd apps that hardly can do without it.

@bendo01

This comment has been minimized.

Copy link

@bendo01 bendo01 commented Nov 26, 2011

please reconsider re-opening this issue.

@envex

This comment has been minimized.

Copy link

@envex envex commented Nov 26, 2011

Instead of asking someone else to make a fix, why don't you fork it and create your own solution.

@bendo01

This comment has been minimized.

Copy link

@bendo01 bendo01 commented Nov 26, 2011

i will try :) , but after a little search i found that santiquiss ( https://github.com/santiquiss/bootstrap ) already create it, i will test his solution first :)

@opensas

This comment has been minimized.

Copy link

@opensas opensas commented Jan 3, 2012

It would indeed be a very useful addition, at least as a plugin or something... Has anybody got a demo on santiquis work???

@chrisjacob

This comment has been minimized.

Copy link

@chrisjacob chrisjacob commented Feb 2, 2012

+1 for nested menu's as an optional feature/add-on.

@chrisjacob

This comment has been minimized.

Copy link

@chrisjacob chrisjacob commented Feb 2, 2012

To clarify... It would be nice to have "bootstrap-dropdown.js" support infinite sub-dropdowns that fly out to the "right" of the item clicked on (changes fly out direction to "left" if bumps into browser chrome).

In the mean time I can manage with using a sidebar menu that implements nested Collapse tree's (bootstrap-collapse.js) with a "stacked tabs" menu for the final depth (ie. clicking on this item takes you to a page, and not any deeper in the hierarchy). Thanks for adding Collapse to v2.0.0 :-)

@tekmosis

This comment has been minimized.

Copy link

@tekmosis tekmosis commented Feb 7, 2012

Also going to +1 this idea even after markdotto's response to the issue.

@GianpaMX

This comment has been minimized.

Copy link

@GianpaMX GianpaMX commented Feb 10, 2012

Dropdown submenu could be done with:

.nav li.dropdown ul.dropdown-menu li:HOVER ul {
display:block;
position:absolute;
left:100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav li.dropdown ul.dropdown-menu ul {
display: none;
float:right;
position: relative;
top: auto;
margin-top: -30px;
}

at the end of bootstrap.css

Adding "dropdown-menu" class to ul menu items

@darthdeus

This comment has been minimized.

Copy link

@darthdeus darthdeus commented Feb 16, 2012

big thanks to juansimp for a working solution! but still +1 for reopen, at least as an optional plugin or something

@tzikis

This comment has been minimized.

Copy link

@tzikis tzikis commented Feb 18, 2012

juansimp or darthdeus, could you be more elaborate on the html needed for the nested dropdown menus to work?

thanks in advance

@darthdeus

This comment has been minimized.

Copy link

@darthdeus darthdeus commented Feb 20, 2012

@tzikis the html is the same as if you're doing a simple dropdown, just add one more level

@Keynotelabs

This comment has been minimized.

Copy link

@Keynotelabs Keynotelabs commented Feb 28, 2012

Here is some sample code:

 <ul class="nav">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li>
        <a href="#">Separated link</a>
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
@stevebooks

This comment has been minimized.

Copy link

@stevebooks stevebooks commented Feb 28, 2012

@juansimp how would modify this for a button drop-down?

@darthdeus

This comment has been minimized.

Copy link

@darthdeus darthdeus commented Feb 28, 2012

You don't need to modify anything, just put in one more level of nested menu with the provided CSS, and it will show up as dropdown. The markup stays the same.

@stevebooks

This comment has been minimized.

Copy link

@stevebooks stevebooks commented Feb 28, 2012

The included CSS has things built around the .nav class. This does not apply when doing a button drop down. For example, the button drop-down sub menu html should look like this:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"/>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li>
      <a href="#">Separated link</a>
      <ul class="dropdown-menu">
        <li><a href="#">Sub Menu</a></li>
      </ul>
    </li>
  </ul>
</div>

I have modified the CSS to try to account for this. Here are my changes:

.btn-group ul.dropdown-menu li:HOVER ul {
  display:block; 
  position:absolute; 
  left:100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn-group ul.dropdown-menu ul {
  display: none;
  float:right;
  position: relative;
  top: auto;
  margin-top: -30px;
}

However, this still is not working right

@garrettlancaster

This comment has been minimized.

Copy link

@garrettlancaster garrettlancaster commented Feb 28, 2012

+1. I have yet to see a decent OS or sufficiently complex app without it.

I am all ears with regards to better paradigms that maintain an intuitive hierarchy and minimize space, but right now this IS the default paradigm.

@stevebooks

This comment has been minimized.

Copy link

@stevebooks stevebooks commented Feb 28, 2012

Okay, I got it working with the button drop-down. Here is the modified CSS:

.btn-group ul.dropdown-menu li:HOVER ul.dropdown-menu {
  display:block; 
  position:absolute; 
  left:100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn-group ul.dropdown-menu li ul.dropdown-menu {
  display: none;
  float:right;
  position: relative;
  top: auto;
  margin-top: -30px;
}
@sergey-stukov

This comment has been minimized.

Copy link

@sergey-stukov sergey-stukov commented Apr 3, 2012

@stevebooks Thank you save my time! with working example.
+1 to reopen issue.

@cherifya

This comment has been minimized.

Copy link

@cherifya cherifya commented Apr 15, 2012

+1 to reopen issue. And thanks @juansimp for the hack.

@michael-simons

This comment has been minimized.

Copy link

@michael-simons michael-simons commented Apr 17, 2012

To get the little triangle right in @juansimp solution add the following

.nav li.dropdown ul.dropdown-menu .dropdown-menu::before {
    content: '';
    display: inline-block;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right:7px solid #CCC;
    border-right-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 9px;
    left: -14px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::after {
    content: '';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid white;
    position: absolute;
    top: 10px;
    left: -12px;
}
@j-hernandez

This comment has been minimized.

Copy link

@j-hernandez j-hernandez commented Apr 17, 2012

Thanks to @juansimp, @stevebooks, @darthdeus, and @Keynotelabs - I just needed a single subdrop to fly out right from both button groups and nav lists and the examples you provided got me going quickly. Certainly understand not wanting to maintain it as part of the toolkit, could get hairy pretty quickly.

@bjensen

This comment has been minimized.

Copy link

@bjensen bjensen commented May 28, 2012

+1 to reopen

2 similar comments
@shockteam

This comment has been minimized.

Copy link

@shockteam shockteam commented Jun 14, 2012

+1 to reopen

@darthdeus

This comment has been minimized.

Copy link

@darthdeus darthdeus commented Jun 15, 2012

+1 to reopen

@opensas

This comment has been minimized.

Copy link

@opensas opensas commented Jun 15, 2012

+1 here too

@amin007

This comment has been minimized.

Copy link

@amin007 amin007 commented Jun 19, 2012

this my code Multi-Level Sub Menus use bootstrap 2.0.1

http://peribadi.amin007.org/js/cth_bootstrap/nav-sendiri.php

any comment? but only 1 level ...

@alexander-ae

This comment has been minimized.

Copy link

@alexander-ae alexander-ae commented Jun 22, 2012

+1 to reopen

@amin007

This comment has been minimized.

Copy link

@amin007 amin007 commented Jun 26, 2012

i found in - http://jsfprimefacesblog.blogspot.com/2012/05/bootstrap-multilevel-dropdown-menu.html
http://jsfiddle.net/4nMkh/4/

javascrip
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery('.submenu').hover(function () {
jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

css

.submenu-show
{
border-radius: 3px;
display: block;
left: 100%;
margin-top: -25px !important;
moz-border-radius: 3px;
position: absolute;
webkit-border-radius: 3px;
}
.submenu-hide
{
display: none !important;
float: right;
position: relative;
top: auto;
}
.navbar .submenu-show:before
{
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .submenu-show:after
{
border-bottom: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-top: 6px solid transparent;
left: 10px;
left: -6px;
top: 11px;

}​

html

@grandfatha

This comment has been minimized.

Copy link

@grandfatha grandfatha commented Jun 26, 2012

Not including this highly demanded feature will lead to it being poorly implemented over and over again, thus hurting the user experience in the long run. Just because it is not right for Twitter does not mean it is universally wrong.

@pmendelski

This comment has been minimized.

Copy link

@pmendelski pmendelski commented Jun 30, 2012

I simply pasted this in css file and multilevel submenus seem to work correctly (checked only on Chrome 18.0.1025.151). I am not a css ninja, and this probably can be an example of "poor implementation" but I needed a fast fix.

.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu li:HOVER.dropdown > ul.dropdown-menu,
.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu {
    display:block;
    position:absolute;
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu li.dropdown > ul.dropdown-menu, 
.nav li.dropdown ul.dropdown-menu ul.dropdown-menu {
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -30px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::before {
    content: '';
    display: inline-block;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right:7px solid #CCC;
    border-right-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 9px;
    left: -14px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::after {
    content: '';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid white;
    position: absolute;
    top: 10px;
    left: -12px;
}
@vaughany

This comment has been minimized.

Copy link

@vaughany vaughany commented Jul 25, 2012

+1 too. :)

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jul 31, 2012

+1 to reopen

1 similar comment
@agriberk

This comment has been minimized.

Copy link

@agriberk agriberk commented Aug 9, 2012

+1 to reopen

@mdo

This comment has been minimized.

Copy link
Member

@mdo mdo commented Aug 9, 2012

It's already in 2.1.0-wip :).

@ellisonbg

This comment has been minimized.

Copy link

@ellisonbg ellisonbg commented Aug 12, 2012

+1 to reopen

@allesklar

This comment has been minimized.

Copy link

@allesklar allesklar commented Aug 15, 2012

Hi markdotto,

Glad to know it's been implemented. Any guidance on how to use it?

@ckizer

This comment has been minimized.

Copy link

@ckizer ckizer commented Aug 16, 2012

Has this been implemented in the latest bootstrap and how do I use it?

@vaughany

This comment has been minimized.

Copy link

@vaughany vaughany commented Aug 16, 2012

@ckizer I belive this will be in 2.1 which is available on the 'wip' branch (work in progress) which is due to go live (production ready) on Monday 20th August: http://blog.getbootstrap.com/2012/08/13/help-test-bootstrap-2-1/

@MGaetan89

This comment has been minimized.

Copy link
Contributor

@MGaetan89 MGaetan89 commented Aug 16, 2012

For those of you asking how to use it, have a look here and scroll to the Sub menus on dropdowns section ;)

@cantabria

This comment has been minimized.

Copy link

@cantabria cantabria commented Aug 18, 2012

I implemented a javascript version of submenu; it seams to me compliant with standard bootstrap menu behavior.
If you are interest, you can find an explanation here

@interscaperob-duplicate

This comment has been minimized.

Copy link

@interscaperob-duplicate interscaperob-duplicate commented Sep 14, 2012

If you want your submenu to open to the left instead of the right (for example, if you have a .pull-right dropdown) then add this to dropdowns.less:

// Left-opening Sub menus
// ---------------------------
.dropdown-submenu-left {
  position: relative;
}
.dropdown-submenu-left > .dropdown-menu {
  top: 0;
  left: -100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 6px 0px 6px 6px;
     -moz-border-radius: 6px 0px 6px 6px;
          border-radius: 6px 0px 6px 6px;
}
.dropdown-submenu-left:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu-left > a:before {
  display: block;
  content: "  ";
  float: left;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 5px 5px 0px;
  border-right-color: darken(@dropdownBackground, 20%);
  margin-top: 5px;
  margin-left: -10px;
}
.dropdown-submenu-left:hover > a:after {
  border-right-color: @dropdownLinkColorHover;
}

Hope that helps someone. Maybe it could get added to 2.1.2?

@hitangjun

This comment has been minimized.

Copy link

@hitangjun hitangjun commented Sep 22, 2012

+1! pls reopen and get added into 2.1.2

@opensas

This comment has been minimized.

Copy link

@opensas opensas commented Sep 22, 2012

+1, add it to next version

On Sat, Sep 22, 2012 at 5:52 AM, John notifications@github.com wrote:

+1! pls reopen and get added into 2.1.2


Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-8786812.

@KimTranjan

This comment has been minimized.

Copy link

@KimTranjan KimTranjan commented Sep 27, 2012

+1. Native implementation is always good. :)

@thugsb

This comment has been minimized.

Copy link

@thugsb thugsb commented Oct 1, 2012

-1. No.

@markdotto you had it right when you originally claimed this is not good for users. Please do NOT add any more layers beyond the one submenu!

@ everyone else: Multiple layers of dropdown menus are not good for users. If you're using Bootstrap, you're building websites for Users, not for clients, or for designers, or for anyone else. If a client wants it, let them know that they are asking for something considered to be BAD PRACTICE, and refuse to do it for them. If a designer wants it, tell them to become a real designer and start thinking about the Users, not their vain concept of prettiness. We, the developers of the web, are the final line of defence against giving the user a bad experience. Do your job! (but make sure you're having fun while you do it)

@ckizer

This comment has been minimized.

Copy link

@ckizer ckizer commented Oct 1, 2012

stu, it's already been implemented. 90% of the time it's a bad user experience. But some of the web applications we use for charting and such require these features. It's not always a poor user experience. But I agree with you in general. I often find myself using them when I'm building a rapid prototype application for internal use, and need to mimic a desktop application.

It's a personal choice, but they are useful for my projects and have been in v2.1

–––––––––––––––––––
Cheers,

Court Kizer
kizer@me.com
“We are the universe experiencing itself”

On Oct 1, 2012, at 1:59 PM, Stu Basden notifications@github.com wrote:

-1. No.

@markdotto you had it right when you originally claimed this is not good for users. Please do NOT add any more layers beyond the one submenu!

@ everyone else: Multiple layers of dropdown menus are not good for users. If you're using Bootstrap, you're building websites for Users, not for clients, or for designers, or for anyone else. If a client wants it, let them know that they are asking for something considered to be BAD PRACTICE, and refuse to do it for them. If a designer wants it, tell them to become a real designer and start thinking about the Users, not their vain concept of prettiness. We, the developers of the web, are the final line of defence against giving the user a bad experience. Do your job! (but make sure you're having fun while you do it)


Reply to this email directly or view it on GitHub.

@grandfatha

This comment has been minimized.

Copy link

@grandfatha grandfatha commented Oct 2, 2012

thugsb: But if your users actually ask for it, you are out of luck with that dogma. Users will benefit if it is done properly with hoverIntents, but if it is left to the developers it will be implemented over and over again everytime in a shitty way.

@bluej100

This comment has been minimized.

Copy link

@bluej100 bluej100 commented Aug 22, 2013

Markdotto has removed submenus in version 3.0.

bf3c5e0

@grandfatha

This comment has been minimized.

Copy link

@grandfatha grandfatha commented Aug 23, 2013

That is bad news unfortunately. I wanted to use these submenus for selecting nodes of a tree.

Just out of interest: How do you guys solve the problem of selecting 1 to n entries of a taxonomy across the different devices? Back in the day you had a Tree widget with checkboxes, but in our post-pc/mobile world, this is no longer working.

If even these submenus arent good enough, how do you solve it?

@interscaperob-duplicate

This comment has been minimized.

Copy link

@interscaperob-duplicate interscaperob-duplicate commented Aug 23, 2013

There is an aria-haspopup attribute that works on the root node of the item that will be a submenu, but I have no idea if the bootstrap team has looked into implementing it. I was planning on testing it with BS3 to see if it worked.

Sent from my Windows Phone


From: grandfathamailto:notifications@github.com
Sent: ý8/ý23/ý2013 1:11 AM
To: twbs/bootstrapmailto:bootstrap@noreply.github.com
Cc: Robert McLawsmailto:robert@interscapeusa.com
Subject: Re: [bootstrap] Dropdown Sub Menus / Menu (#424)

That is bad news unfortunately. Just out of interest: How do you guys solve the problem of selecting 1 to n entries of a taxonomy beyond the different devices. Back in the day you had a Tree widget with checkboxes, but in our post-pc/mobile world, this is no longer working.

If even these submenus arent good enough, how do you solve it?


Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-23143758.

@bluej100

This comment has been minimized.

Copy link

@bluej100 bluej100 commented Aug 23, 2013

rob, @mdo clarified for me today that accessibility is not his primary concern here.

mdo/ama#31

@interscaperob-duplicate

This comment has been minimized.

Copy link

@interscaperob-duplicate interscaperob-duplicate commented Aug 23, 2013

Well, @mdo is not always right, and plenty of apps need submenus. Feel free to release a plugin to help, and I'll contribute.

Sent from my Windows Phone


From: Braden Andersonmailto:notifications@github.com
Sent: ý8/ý23/ý2013 2:10 AM
To: twbs/bootstrapmailto:bootstrap@noreply.github.com
Cc: Robert McLawsmailto:robert@interscapeusa.com
Subject: Re: [bootstrap] Dropdown Sub Menus / Menu (#424)

rob, @mdohttps://github.com/mdo clarified for me today that accessibility is not his primary concern here.

mdo/ama#31mdo/ama#31


Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-23145174.

@bluej100

This comment has been minimized.

Copy link

@bluej100 bluej100 commented Aug 23, 2013

FYI, grandfatha, you may be interested in https://github.com/silviomoreto/bootstrap-select . It doesn't allow arbitrary nesting, but it does make it easy to use dropdowns for selection, and you could at least categorize things with headings.

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014
DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014
Add a dummy Rails app for testing against
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.