I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.
My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").
I'll share some code to make it a bit more understandable:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="/customer-service" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service -->
<ul class="dropdown-menu" role="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>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
/
(be sure to read the ment in the HTML and give the "Result-view" enough space/width so the menu appears)
I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.
My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").
I'll share some code to make it a bit more understandable:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="/customer-service" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service -->
<ul class="dropdown-menu" role="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>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
http://jsfiddle/kozog9rx/2/
(be sure to read the ment in the HTML and give the "Result-view" enough space/width so the menu appears)
Share Improve this question edited Jun 9, 2015 at 14:44 amphetamachine 30.7k12 gold badges68 silver badges74 bronze badges asked Jan 11, 2015 at 17:03 JackquesJackques 1071 silver badge8 bronze badges 4- 2 Please share some code, it'll be easier to understand your problem and more expressive that way, than writing about it :) – surajck Commented Jan 11, 2015 at 17:06
- I will thank you, sorry for my absense for a few days. I was quite busy with another project :) – Jackques Commented Jan 13, 2015 at 22:29
- I have changed the title and text of my post to make it more clear. Can you or someone else please have another look at it? – Jackques Commented Jan 18, 2015 at 21:02
- Just leaving this for anyone who es in via Google : there's another question about this here : stackoverflow./questions/24247970/… with an answer that worked for me. – Victoria Commented Nov 5, 2015 at 10:34
1 Answer
Reset to default 4Well, assuming you are using bootstrap 3.2.0 Here's the code:
<li class="dropdown">
<a href="example./page">Dropdown</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" role="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></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
What i'm doing is making the carat open the menu, and the text href to wherever you want it to go to.