I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked.
For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again).
How can I achieve this?
This is the HTML:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li class="dropdown">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Offers/Fees <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Patients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li>Blog</li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS:
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/
I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.
There seemed to be an issue with:
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added:
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question!
Related
I cannot change the HTML as it is generated.
Like the title says, if the grandchild Terms II in Terms 2 is active, then Terms 2 > Terms B should remained open. Likewise, if the child, Terms I in Terms 3 is open, then Terms 3 must remained open. How can I go about this?
JSFiddle DEMO: https://jsfiddle.net/t2sz3ogv/
PS: I have created 3 different HTML in JSFiddle to show the different scenarios for your convenience.
PSS: Please note that the parent Market is hidden permanently.
HTML:
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
CSS:
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
I suggest that: find each parent of li.active and show them:
$("li.active").parents('ul.nav, ul.nav-child').show();
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
$("li.active").parents('ul.nav, ul.nav-child').show();
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="current active deeper parent">Terms 1</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="current active">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Simple problem: I have a nav menu, it shows sub menus when clicked on the '+' beside menu item. BUT IT SHOULD ALSO show drop down menu when hovered.
I think the problem might be:
a) Am I not targeting the right elements
b) is the toggle approach wrong?
New to javascript so I am not sure what is the issue here.
I believe my script is wrong. not sure what the problem is, please help
/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
$(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});
// Sub menu drop down
$(".dropdown-toggle").click(function() {
$(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down
$(".dropdown-toggle").hover(function() {
$(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});
/*
# HEADER
*/
*,
html {
margin: 0;
font-size: 16px;
}
.site-header {
background-color: black;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-navigation {
padding: 2rem;
background-color: red;
}
/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
display: none;
}
*/
/* Menu styles */
.main-navigation .sub-menu {
display: none;
}
.sub-menu.toggle-on {
display: block;
}
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
list-style: none;
}
.main-navigation ul li a {
color: #fff;
text-decoration: none;
}
/* First Highrarchy */
.main-navigation ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-navigation ul li {
margin-right: 2rem;
}
/*.dropdown-toggle:hover {
display: block;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title">LOGO</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
<div class="menu-test-container">
<ul id="primary-menu" class="menu" aria-expanded="true">
<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
Services
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
Commercial
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
Rural
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
Electrical
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
Residential
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083">News Updates</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
Projects
</li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
Blog
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
About
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
News Updates
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
<link rel="stylesheet" type="text/css" href="style.css">
</header>
The menu only opens when hovering over the button. Hence, when even hovering over the menu itself, the menu closes. You can add the following
$(".sub-menu").hover(function() {
$(this).addClass("toggle-on");
});
$(".sub-menu").mouseleave(function() {
$(this).removeClass("toggle-on");
});
The menu keeps jumping and causes UI changes since it is not absolute. You may add the following
.sub-menu {
position: absolute;
background-color: #000;
margin-top: -26px;
margin-left: -38px;
}
Below is an updated snippet.
/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
$(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});
// Sub menu drop down
$(".dropdown-toggle").click(function() {
$(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down
$(".dropdown-toggle").hover(function() {
$(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});
$(".sub-menu").hover(function() {
$(this).addClass("toggle-on");
});
$(".sub-menu").mouseleave(function() {
$(this).removeClass("toggle-on");
});
/*
# HEADER
*/
*,
html {
margin: 0;
font-size: 16px;
}
.site-header {
background-color: black;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-navigation {
padding: 2rem;
background-color: red;
}
/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
display: none;
}
*/
/* Menu styles */
.main-navigation .sub-menu {
display: none;
}
.sub-menu.toggle-on {
display: block;
}
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
list-style: none;
}
.main-navigation ul li a {
color: #fff;
text-decoration: none;
}
/* First Highrarchy */
.main-navigation ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-navigation ul li {
margin-right: 2rem;
}
.sub-menu {
position: absolute;
background-color: #000;
margin-top: -26px;
margin-left: -38px;
}
/*.dropdown-toggle:hover {
display: block;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title">LOGO</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
<div class="menu-test-container">
<ul id="primary-menu" class="menu" aria-expanded="true">
<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
Services
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
Commercial
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
Rural
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
Electrical
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
Residential
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083">News Updates</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
Projects
</li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
Blog
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
About
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
News Updates
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
<link rel="stylesheet" type="text/css" href="style.css">
</header>
Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}
Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.
Is it possible with css or maybe javascript/jQuery-manipulation to center some navigation items within the same div container, while other itmes in this container (last three) should be on the right edge of the navbar? I've tried it with flexbox and with inline-block/text-align center. I was able to center the whole div container. But when I moved the last three divs to the right, the remaining items stayed in their position. Based on the fact, that the three items now are on the right side, the width of the centered navbar changed and it should actually move a little bit to the right to be centered again.
Making new wrap elements around these centered and right side elements would be the last choice, since I am running on wordpress with php-menues. Therefore, changing the markup would maybe not so easy, like a simple css or javascript/jquery solution.
You may have a look at the fiddle below the posted markup to understand me better ;)
Default HTML-Markup:
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav" class="menu">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul></div>
</div>
Default CSS:
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
JSFiddle-Example: https://jsfiddle.net/tz0atc4o/1/
Update:
Here a fiddle, where I've tried the text-align and inline solution. You may read the CSS-Comments, so you are able to test the thing, when the whole div is centered. In this case just comment out the last css rule. In contrast the the whole centered div, I am not sure if the items are really centered, when the last three are floated to right :/
https://jsfiddle.net/37gc2v9x/
Thanks in advance!
add float: right to the last items and others make display: inline-block; and float:none; then only change .menu to text-align: center; and width: 100%;
You can handle the last three li by nth-child selector and float them to right.
if you don't get it right here's something for you to work around.
<style>
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 120%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
height: 50px;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.spacer {
width: 30%;
}
</style>
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px"> <a class="logo-link" href="http://stackoverflow.com/"> <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="38" width="51"> </a> </div>
<table width="92%" border="0">
<tr>
<td width="85%" height="38"><table width="109%" height="25" border="0" align="right">
<tr>
<td width="47%" height="21"> </td>
<td width="53%" align="right"> <ul id="menu-mainnav" class="menu" style="float:none;">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
</ul></td>
</tr>
</table></td>
<td width="15%" align="left"><table width="213" border="0" align="right" class="menu">
<tr>
<td width="56%" height="21" align="right"><ul id="menu-mainnav" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT </span></li>
</ul></td>
</tr>
</table></td>
</tr>
</table>
</div>
<p> </div>
</div></p>
Try this:
Divide the menu into two parts.
Simplify the .main-menu class.
Use position:absolute; left:0; right:0; to extend the block to the width of its parent.
Add text-align: center; to place items in the center of the block.
Please check the result: https://jsfiddle.net/glebkema/0on8za7q/
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
position: relative;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.menu > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right: 11px;
}
.menu > li {
float: none;
display: inline-block;
}
.menu > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.menu-center {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.menu-right {
float: right;
}
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin-bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav-1" class="menu menu-center">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
</ul>
<ul id="menu-mainnav-2" class="menu menu-right">
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Is there any way to create a horizontal multilevel menu structure using bootstrap
I haven't seen any multilevel menus with Horizontal orientation .
If not i have to use some external css and styles to generate this kind of menu .
A sample structure of the menu structure is similar to this
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="root">
Multi Level <b class="caret"></b>
<ul class="dropdown-menu">
<li>Level 1</li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Level 2</a>
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 3
</li>
<li>Level 3
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 4
</li>
<li>Level 4
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 5
</li>
<li>Level 5
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
</li>
<li>Level 2
</li>
</ul>
</li>
<li>Level 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu
{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.root:hover .dropdown-menu{
display: block;
}
Some working Jsfiddle examples
Example 1
Example 2
Example 3
Example 4