Best IT Recipes

Bootstrap 3: how to make a link for a dropdown menu pressed in navbar

I use the default navigation bar, and a few list items are drop-down menus. I can’t click on the link that brings up the dropdown. I know that I could just add a duplicate link to the drop-down list, but I would prefer. Is it possible to make a link to a link a clickable link (and not just a handle for a drop-down list)?

For reference, see the first link in the drop-down list below. I want users to be able to click on it and actually go to the page that it points to.

<nav class="navbar navbar-fixed-top admin-menu" role="navigation"> <div class="navbar-header">...</div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> I DONT WORK! <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/page2">Page2</a></li> </ul> </li> <li><a href="#">I DO WORK</a></li> </ul> </div><!-- /.navbar-collapse --> </nav>
+60
javascript css twitter-bootstrap-3
Nov 12 '13 at 17:08
source share
13 answers

Here is the code that slides over the submenu on hover and allows you to redirect to the page if you click on it.

How: remove class="dropdown-toggle" data-toggle="dropdown" from the tag and add css.

The following is a jsfiddle demo ( FYI: For a demo, configure jsfiddle splitter to view a dropdown list due to Bootstrap CSS . Jsfiddle will not let you redirect to a new page.)

enter image description here

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <style type='text/css'> ul.nav li.dropdown:hover ul.dropdown-menu { display: block; } </style> </head> <body> <nav class="navbar navbar-fixed-top admin-menu" role="navigation"> <div class="navbar-header">...</div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a href="http://stackoverflow.com/">Qaru <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/page2">Page2</a> </li> </ul> </li> <li><a href="#">I DO WORK</a> </li> </ul> </div> <!-- /.navbar-collapse --> </nav> </body> </html>
+70
Nov 12 '13 at 20:03
source share

Just add the disabled class to the anchor:

 <a class="dropdown-toggle disabled" href="{your link}"> Dropdown</a>

And you are free.

+48
Sep 20 '15 at 7:22
source share

Here is a small hack based on Bootstrap 3.3 using the jQuery bit.

Clicking on the drop-down menu provides a link.

 $('li.dropdown').on('click', function() { var $el = $(this); if ($el.hasClass('open')) { var $a = $el.children('a.dropdown-toggle'); if ($a.length && $a.attr('href')) { location.href = $a.attr('href'); } } });
+13
Apr 14 '15 at 17:37
source share

I know this is a little old, but I recently came across this looking for a similar solution. Relying on hover events is not very good for responsive design and is especially terrible on mobile / touch screens. I ended up doing a little editing in the dropdown.js file so that you can click on a menu item to open the menu, and if you click the menu item again, it will follow it.

The good thing about this is that it does not rely on hovering at all, and therefore it still works great on the touch screen.

I posted it here: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

Hope this helps!

+11
Mar 13 '14 at 19:53
source share

1: remove dropdown-trigger:

 data-toggle="dropdown"

2: add this css

 .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { margin-top: 0px; }

published for people how stumbled upon this

+10
Feb 16 '14 at 1:44
source share

No need to use CSS / JS add-on. (Tested)

  • data-toggle="dropdown" - for Clickable (you can use Mobile and Web)
  • data-hover="dropdown" - for Hover (only for websites. Cz mobile does not have a HOVER function)

Works well on mobile :)



Sample code for Clickable ( data-toggle="dropdown" )

 /*! * this CSS code just for snippet preview purpose. Please omit when using it. */ #bs-example-navbar-collapse-1 ul li { float: left; } #bs-example-navbar-collapse-1 ul li ul li { float: none !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a class="" href="">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> subnav1 </a> <ul class="dropdown-menu"> <li><a href="">Sub1</a></li> <li><a href="">Sub2</a></li> <li><a href="">Sub3</a></li> <li><a href="">Sub4</a></li> <li><a href="">Sub5</a></li> <li><a href="">Sub6</a></li> </ul> <div class="clear"></div> </li> <li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> subnav2 </a> <ul class="dropdown-menu"> <li><a href="">Sub1</a></li> <li><a href="">Sub2</a></li> <li><a href="">Sub3</a></li> <li><a href="">Sub4</a></li> <li><a href="">Sub5</a></li> <li><a href="">Sub6</a></li> </ul> <div class="clear"></div> </li> </ul> </div> <br> <br> <p><b>Please Note:</b> added css code not related to Bootstrap navigation. It just for snippet preview purpose </p>

Exit

output enter image description here

+4
Nov 11 '16 at 17:01
source share

Add the disconnected class in your anchor, the following js:

 $('.navbar .dropdown-toggle').hover(function() { $(this).addClass('disabled'); });

But this is not suitable for mobile devices, so you need to remove the disabled class for mobile devices, so the js code is updated:

 $('.navbar .dropdown-toggle').hover(function() { if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');} else { $(this).removeClass('disabled'); } });
+3
Sep 27 '16 at 9:36
source share

Anyone arriving here who wants to quickly answer this problem. Replace the "Dropdown.prototype.toggle" function in the bootstrap.js (or dropdown.js) file as follows:

  Dropdown.prototype.toggle = function (e) { var $this = $(this) if ($this.is('.disabled, :disabled')) return var $parent = getParent($this) var isActive = $parent.hasClass('open') clearMenus() if (!isActive) { if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { // if mobile we use a backdrop because click events don't delegate $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) } var relatedTarget = { relatedTarget: this } $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented()) return $parent .toggleClass('open') .trigger('shown.bs.dropdown', relatedTarget) $this.focus() } else { var href = $this.attr("href").trim(); if (href != undefined && href != " javascript:;") window.location.href = href; } return false }

In the second click (that is, if there is a "open" class in the menu item), it first checks if href is undefined or set to "javascript :;" before sending you in your own fun way.

Enjoy it!

+1
Dec 03 '14 at 15:47
source share

This allows you to use the link in the top-level menu of the drop-down list when it opens, and disables it when you close it, while the only drawback, apparently, is to double-click the drop-down menu to close it on mobile devices.

 $(document).on("page:load", function(){ $('body').on('show.bs.dropdown', function (e) { $(e.relatedTarget).addClass('disabled') }); $('body').on('hide.bs.dropdown', function (e) { $(e.relatedTarget).removeClass('disabled') }); });

Note , this assumes “standard” markup and Turbolinks (Rails). You can try with $ (document) .ready (...)

+1
Dec 11 '14 at 9:52
source share

Here is my solution that uses jQuery in your header and works on Mobile.

On a mobile phone, the top links require two taps: one for the drop-down menu and one for navigating to its link.

 $(function(){ $('.dropdown-toggle').click( function(){ if ($(this).next().is(':visible')) { location.href = $(this).attr('href');; } }); }); });
+1
Sep 13 '17 at 19:14
source share

I know him too late, but everyone who came here for help, now you can see this post. There are two options for using css / JavaScript, and if you use css, it will be applicable to devices that are larger than 769 pixels in size for an interactive top menu that will work fine f

See here for the article.

0
Jan 30 '15 at 18:20
source share

Most of the above solutions are not mobile.

The solution that I propose detects if it is not a touch device and that the navbar-toggle (hamburger menu) is not visible, and makes the parent menu item expand the submenu on hover and follow its click link

Also does margin-top 0, because the gap between the navigation bar and the menu in some browser will not allow you to point to sub-items

 $(function(){ function is_touch_device() { return 'ontouchstart' in window // works on most browsers || navigator.maxTouchPoints; // works on IE10/11 and Surface }; if(!is_touch_device() && $('.navbar-toggle:hidden')){ $('.dropdown-menu', this).css('margin-top',0); $('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul id="nav" class="nav nav-pills clearfix right" role="tablist"> <li><a href="#">menuA</a></li> <li><a href="#">menuB</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a> <ul id="products-menu" class="dropdown-menu clearfix" role="menu"> <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> </ul> </li> <li><a href="#">menuD</a></li> <li><a href="#">menuE</a></li> </ul> 

 $(function(){ $("#nav .dropdown").hover( function() { $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); }, function() { $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul id="nav" class="nav nav-pills clearfix right" role="tablist"> <li><a href="#">menuA</a></li> <li><a href="#">menuB</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a> <ul id="products-menu" class="dropdown-menu clearfix" role="menu"> <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> </ul> </li> <li><a href="#">menuD</a></li> <li><a href="#">menuE</a></li> </ul>
0
Mar 13 '17 at 9:55
source share

Alternatively here's a simple jQuery solution:

 $('#menu-main > li > .dropdown-toggle').click(function () { window.location = $(this).attr('href'); });
0
Jul 10 '17 at 20:01
source share


More articles:


All Articles