CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Artisan
Artisan

Reputation: 4112

Bootstrap3, how to have dropdown menu on the toggle button?

Please run this coding using mobile view.

I copied the code from bootstrap documentation, I wish to have the toggle button (triple bar button) when I pressed the button I want to get a dropdown menu. But I really don't understand the concept of how to have a dropdown on toggle button.

Please show me sample coding, thanks.

Upvotes: 0

Views: 1009

Answers (1)

Alexander Rechsteiner
Alexander Rechsteiner

Reputation: 5764

I think using the drop downs from a right-aligned button is going to be tricky if not painful. Also the menu items are probably too small to be comfortable to tap on a touch device.

How about the navbar-collapse instead? 

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".Kongthaps-navbar">
...
<div class="collapse navbar-collapse Kongthaps-navbar">

Notice how the data-target class is used to identify the toggled menu.

Full example:

http://jsfiddle.net/yNHpf/3/

As for your version with a regular drop down, the trigger has to be inside the <div class="dropdown"> tag, and the data-toggle needs to be data-toggle="dropdown" instead of data-toggle="collapse". Also, I think there can't be a data-target (otherwise it doesn't work)

Here's your example, semi-working:

http://jsfiddle.net/6jF9x/3/

I leave the positioning of the drop down up to you ;-)

I use the first technique in my themes, check out my theme Tales which I already migrated to BS3 for a real life example.

Hope this helps!

Upvotes: 2

Related Questions