I'm building a site with Bootstrap 2, and I'd like to add a dropdown menu to one item in the navbar.
Simple enough. However, when the dropdown is expanded, it appears underneath the incorrect item in the navbar:
Notice in the above screenshot that the dropdown renders underneath "Admin" (the leftmost navbar element) instead of "Locator" (the element that activates the dropdown).
How do I fix this so that the dropdown appears underneath the correct navbar element?
Here is the HTML for the navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li>
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
Your dropdown is appearing on the wrong spot because you're missing the class that defines the relative position for your dropdown. To fix this, just add the .dropdown class to your menu item with a submenu like so:
<li class="dropdown"> ... </li>
Here is your fixed markup:
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li class="dropdown">
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
Related
How should you handle h tags in the main menu of your site if the main menu renders above the h1?
Is it ok to break heading hierarchy in this case to provide the additional semantics / hierarchy, or should a different element be used instead of heading tags?
For example:
You have menu that shows a secondary menu on hover / focus / click.
It uses a checkbox input to indicate the state of the menu so as to allow the menu to stay open.
The secondary menus use h2 > ul >li > a to organize and provide additional hierarchy to the overall menu.
Third level link lists follow the heading hierarchy, eg., h3 > ul > li > a
CodePen link for more clarity :: https://codepen.io/uxmfdesign/pen/yLBrMmd
<header>
<div class="main-menu__container">
<input
class="main-menu__toggle webaim-hidden"
type="checkbox"
id="main-menu-toggle-block-main-menu">
<!-- toggle open close -->
<label
class="main-menu__label"
for="main-menu-toggle-block-main-menu"
aria-label="Toggle Main menu"
>
Main menu
</label>
<nav class="main-menu__nav">
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<h1>
The problem heading is here
</h1>
</main>
First ever question on here so go easy... (can you smell fear through the internet??) Okay, so my dropdown menu works fine in a desktop size viewport but viewing it through developer tools in mobile size it gets clipped and won't extend beyond the bottom of the nav div. What gives, yo? Here's the code, which I understand is the accepted protocol...
<!--start of navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid"><!--stretches navbar full width of screen-->
<div class="navbar-header">
<!--hamburger collapse menu-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span><!--sr-only is for people with vision impairment-->
<span class="icon-bar"></span><!--triple lines on burger menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="homelink navbar-brand" href="#">Michael Amos</a>
</div> <!--/nav header-->
<div class="collapse navbar-collapse"> <!--make navbar list collapse when resize for small screen-->
<ul class="nav navbar-nav navbar-right"><!--applies bootstrap styling to float navbar items right-->
<li>about</li>
<li>contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">work<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
<li>FAQ</li>
</ul>
</div> <!--/nav collapse-->
</div> <!--/container-fluid-->
</nav> <!--/navbar-->
Muchas gracias!
I'm using the getbootstrap code for default navbar.
I want the title name of Drop-down (Test2) also to link to a html page. I added the linkage for the href, however when I'm running the page and clicking on the Drop-down text (Text2) nothing happened
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand">Test</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-header" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>test1</li>
<li class="dropdown">
Test2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test21</li>
<li>Create Test22</li>
<li>Test23</li>
</ul>
</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
I need to have a menu/mega menu that will shift the content down when the dropdown opens like on Facebook for Business menu: https://www.facebook.com/business
I saw the same effect on Avast: http://www.avast.com
Thanks for the help, it's much appreciated!
For behavior you want you can use: slideDown() function of JQuery. Then you can bind mouseover and mouseout events over menu items and call slideDown and slideUp function.
Example in JSFiddle
HTML:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active menu-item" data-menuItem="#getstarted">
Getting started <b class="caret"></b>
</li>
<li class="menu-item" data-menuItem="#css">CSS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="getstarted">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
</ul>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="css">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
</ul>
</div>
</div>
JavaScript:
$(".menu-item").mouseenter(
function(e){
e.preventDefault();
e.stopPropagation();
var $active=$(".active-menu-panel");
$active.removeClass("active-menu-panel").hide();
var selector=$(this).attr("data-menuItem");
if($active.length){
$(selector).addClass("active-menu-panel").show();
} else {
$(selector).addClass("active-menu-panel").slideDown();
}
}
);
$(".menu-panel").mouseleave(function(){
$(this).removeClass("active-menu-panel").slideUp();
});
Hyperlink in navbar dropdown doesn't seem to work.Even the "disabled" doesn't seem to work.
Here is my code
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled"
data-toggle="dropdown" href="http://www.google.com"> Link
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li></ul>
</li>
</ul>
</div>
</div>
</div>
Clicking the link where you have set Google as the link won't take you to that link as the click action on that link opens/closes the dropdown menu.
If you put a link on another anchor tag you'll see that those will work fine.