Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard.
However, my client now has a specific request - they want users to have the ability to click on the link associated with the dropdown button itself, instead of just the children links. For example, if the user clicks on a button labeled "Customer Service", a dropdown menu opens up (thanks to Bootstrap), and upon a second click, they should be directed to the "/customer-service" page.
I will provide some code snippets to illustrate this concept more clearly:
<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>
<!-- Triggering the submenu on first click and direct link on the second click -->
<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/
(Make sure to review the comment in the HTML code and adjust the width of the "Result-view" accordingly to display the menu correctly)