I have this dropdown on my navbar which looks like this:
Now I added a "Contact Us" tab on "HR & Admin" menu.
So is it possible to make "Contact Us" a dropdown based on my code?
Here's my html:
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav main-navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
HR & Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>C.O.C.</li>
<li>Contact Us</li>
<li>Job Vacancies</li>
</ul>
</li>
Yes like so, leave the css to you of course:-
<ul class="nav navbar-nav main-navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
<a href="#" title="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">HR & Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C.O.C.</li>
<li>Contact Us
<ul class="dropdown-menu-2">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Job Vacancies</li>
</ul>
</li>
</ul>
Just add another ul li inside your Contact Us li like so:
<li>Contact Us</li>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</li>
Related
I am building a site here:
Website Link
The drop-down navbar menu is working fine except the fact that when there is a mouse-over on the items to the right of the navbar, the first drop-down menu activates. (i.e. Click on Administration and both its drop-down menu and the drop-down menu under "who are we" also drops down!)
Any further suggestions, please?
The code is as follows:
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
-->
Toggle navigation
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li>
_Vet Clinics
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Any help in seeing where the problem is would be gratefully received as my eyes are going after hours of tring nto find the problem.
Many Thanks
Update:
I have applied the solution proposed by #Spade but the situation remains.
Using [link]http://apaaportugal.doidosou.eu/useful_links.php as a test page (no carousel) onmouseover on any dropdown menu item also activates the first drop-down under item "_who are we".
Javascript code on the page is:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Sub-Menu JavaScript -->
<script src="js/sub_menu.js"></script>
<!-- header script -->
<script>
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
</script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script>
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
</script>
Navbar Html code as follows:
<!-- Header Content -->
<div class="container">
<div class="row">
<div class="col-lg-1">
<img src="/images/APPA_logo_R_80.png"><a class="navbar-brand" href="#"></a>
</div>
<div class="col-lg-11">
<div>
<h1 class="h_header">APAA - Association for the Protection of Animals in the Algarve</h1>
<h3 class="h_header">Associação de Protecção Animal do Algarve</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
<!-- <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things need to be changed:
1) Replace "Script to Activate the Carousel" with the following:
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
2) Replace the code you shared for Navigation with the following:
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1" data-toggle="dropdown">
<ul class="nav navbar-nav">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Also Attaching the result at my side:
I've a problem with a website I am working at.
The site has a navigation bar which looks quite good on a bigger desktop screen.
But if I resize the screen it looks ugly and content is hidden behind the navigation bar.
How to fix this? Code is the following for the header:
<nav class="navbar navbar-default navbar-fixed-top" id="navbar-fixed" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
</button>
<a class="navbar-brand" href="index.html">Dummy</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Werke</li>
<li>Kontakt</li>
<li>Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Impressum</li>
</ul>
</div>
</nav>
Think I've found your issue. You need to wrap the menu in another <div> with the id which you have specified in your data-target attribute on the toggle button. And also give it the classes collapse navbar-collapse. So you will have the following for your menu section:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Werke</li>
<li>Kontakt</li>
<li>Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Impressum</li>
</ul>
</div>
I think just adding that div in should fix it. Here is a working jsfiddle: http://jsfiddle.net/Ca7B9/1/
See the Information section of the navbar here. I'm trying to get it to float right. I used .pull-right like the Bootstrap docs say, but it isn't working.
I also tried messing around with Inspect Element and applying float: right !important; directly to the li, which didn't work, and then to the a, which also didn't work.
This is my code:
<div class="navbar"">
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
<li id="academics" class="dropdown main_college_nav_item">Academics <b class="caret"></b>
<ul class="dropdown-menu">
<li id="professors"><a>Professors</a></li>
<li id="classes"><a>Classes</a></li>
<li id="difficulty"><a>Difficulty</a></li>
<li id="major"><a>Majors</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="living_environment" class="dropdown main_college_nav_item">Living Environment <b class="caret"></b>
<ul class="dropdown-menu">
<li id="campus"><a>Campus</a></li>
<li id="food"><a>Food</a></li>
<li id="housing"><a>Housing</a></li>
<li id="weather"><a>Weather</a></li>
<li id="safety"><a>Safety</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="kids"><a>Kids/Atmosphere</a></li>
<li id="parties"><a>Parties</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="information" class="main_college_nav_item"><a class="pull-right">Information <i class="icon-resize-vertical"> </i></a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
Use the below HTML instead of your HTML.
I have created Separate ul for the Information tab and floated to right.
Update: Working Demo
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
<li id="academics" class="dropdown main_college_nav_item">Academics <b class="caret"></b>
<ul class="dropdown-menu">
<li id="professors" class="active"><a>Professors</a></li>
<li id="classes"><a>Classes</a></li>
<li id="difficulty"><a>Difficulty</a></li>
<li id="major"><a>Majors</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="living_environment" class="dropdown main_college_nav_item">Living Environment <b class="caret"></b>
<ul class="dropdown-menu">
<li id="campus"><a>Campus</a></li>
<li id="food"><a>Food</a></li>
<li id="housing"><a>Housing</a></li>
<li id="weather"><a>Weather</a></li>
<li id="safety"><a>Safety</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="kids"><a>Kids/Atmosphere</a></li>
<li id="parties"><a>Parties</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li id="information" class="main_college_nav_item"><a>Information <i class="icon-resize-vertical"> </i></a></li>
</ul>
</div>
</div>
This is the partial view that generates the menu for the site.
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav" >
#foreach (var menu in Model)
{
<li class="dropdown">
#menu.DisplayName
#foreach (var menuitem in menu.MenuItems)
{
<ul class="dropdown-menu" >
<li class="dropdown">#Html.ActionLink(menuitem.DisplayName, menuitem.ActionName, menuitem.ControllerName, new { tabindex = "-1" })</li>
</ul>
}
</li>
}
</ul>
</div>
The menus can be visible and actually the dropdown menus are also created in the HTML as shown below
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
In out put is shown as bellow in the GUI
What is the issue with regard to this.
Make sure you have included the bootstrap.js file on that page.
Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class
Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/
Here's markup that works, based on your example
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li> <a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level.
This is the two level menu which I have:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I thought something like this would work:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li class="item-148 dropdown parent">
Learn more <b class="caret-right"></b>
<ul class="dropdown-menu">
<li class="item-149">The Software</li>
<li class="item-150">The Project</li>
<li class="item-151">The Leadership</li>
<li class="item-152">Open Source Matters</li>
</ul>
</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But that's not working.
Bootstrap 2.3.x and later supports the dropdown-submenu..
<ul class="dropdown-menu">
<li>Login</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
<li>Logout</li>
</ul>
Working demo on Bootply.com
Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.
<head>
...
<script src=".../jquery.smartmenus.min.js"></script>
<script src=".../jquery.smartmenus.bootstrap.min.js"></script>
...
<link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
...
</head>
Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html