Menu
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.net/kozog9rx/2/
(be sure to read the comment in the HTML and give the "Result-view" enough space/width so the menu appears)
713
Well, assuming you are using bootstrap 3.2.0 Here's the code:
<li class="dropdown">
<a href="example.com/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.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
