I have used bootstrap large menu the Dropdown menu don't display same width it's different from each menu. How can I solve this issues the are given below.
.dropdown-header {
font-size: 18px;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large>li>ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large>li>ul>li {
list-style: none;
}
.dropdown-menu-large>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
color: #999999;
}
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0;
margin-right: 0;
}
.dropdown-menu-large>li {
margin-bottom: 30px;
}
.dropdown-menu-large>li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
border-left: 1px solid gray;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-header">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="mobile navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-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 logo" href="index.html"><img src="img/logo.png" alt="cablenet"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home<span></span></li>
<li>About Us<span></span></li>
<li class="dropdown dropdown-large"> Cabling<span></span> <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">We do provide below services:</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Structured Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Telephone Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Copper Cabling – Cat 5, Cat 6 and Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cabling – Single Mode and Multi-Mode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Support / Tray Systems installation</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Management</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Audio & Video Cables</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Voice / Telecom Cable</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Electrical Cable</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Network Switches</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 24 Port Patch Panel Loaded with Modular Jacks - Cat3, Cat5e, Cat6</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Cables - Cat3, Cat5e, Cat6 ,Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Patch Cords - Cat3, Cat5e, Cat6 ,Cat 7</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 1U /2 U Horizontal Cable Management Strip</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cable - Indoor, Outdoor, Armoured, Multimode, Singlemode, 2, 4, 6, 12, 24 core</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Termination Blocks for Telephone Lines - 110 Block, Krone Block</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Patch Panel - rack mount, wall mount, 6, 12, 24, 48 port c/w SC, ST, FC, LC adapters, Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Media Converter - Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 19" Network Rack - 6U, 12U, 42U, wall mount, standing, customized</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> Electrical<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply varies Electrical products like Lights, FAN and Electrical Cable</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design and install electrical cabling system with safety in place. </li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do install various electrical products like Lights , Fan and other electrical appliances.</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> CCTV Surveillance System<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply Various CCTV system as below:</a></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Analog camera 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel NVR / 16 Channel NVR/ 32 Channel NVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Various Hidden camera to secured environments</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design, Install and Support services for various CCTV system to have better secured environments to protect your workplace to enhance the work productivity and to have the piece of minds .</li>
</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> DAS<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Door Access System</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
</div>
<!-- Main Header End -->
</header>
check the DAS menu and CCTV menu width size
both are not same width
it's possible to change the same width size for all drop down menus
am using row for each menu
Is this what you are looking for , i have set width:100% to .dropdown-menu
.dropdown-header{
font-size:18px;}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
.dropdown-menu {
min-width: 200px;
width:100%;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
border-left: 1px solid gray;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-header">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="mobile navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-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 logo" href="index.html"><img src="img/logo.png" alt="cablenet"></a> </div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home<span></span></li>
<li>About Us<span></span></li>
<li class="dropdown dropdown-large"> Cabling<span></span> <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">We do provide below services:</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Structured Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Telephone Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Copper Cabling – Cat 5, Cat 6 and Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cabling – Single Mode and Multi-Mode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Support / Tray Systems installation</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Management</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Audio & Video Cables</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Voice / Telecom Cable</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Electrical Cable</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Network Switches</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 24 Port Patch Panel Loaded with Modular Jacks - Cat3, Cat5e, Cat6</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Cables - Cat3, Cat5e, Cat6 ,Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Patch Cords - Cat3, Cat5e, Cat6 ,Cat 7</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 1U /2 U Horizontal Cable Management Strip</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cable - Indoor, Outdoor, Armoured, Multimode, Singlemode, 2, 4, 6, 12, 24 core</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Termination Blocks for Telephone Lines - 110 Block, Krone Block</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Patch Panel - rack mount, wall mount, 6, 12, 24, 48 port c/w SC, ST, FC, LC adapters, Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Media Converter - Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 19" Network Rack - 6U, 12U, 42U, wall mount, standing, customized</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> Electrical<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply varies Electrical products like Lights, FAN and Electrical Cable</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design and install electrical cabling system with safety in place. </li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do install various electrical products like Lights , Fan and other electrical appliances.</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> CCTV Surveillance System<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply Various CCTV system as below:</a></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Analog camera 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel NVR / 16 Channel NVR/ 32 Channel NVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Various Hidden camera to secured environments</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design, Install and Support services for various CCTV system to have better secured environments to protect your workplace to enhance the work productivity and to have the piece of minds .</li>
</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> DAS<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Door Access System</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
</div>
<!-- Main Header End -->
</header>
.dropdown-menu {
width:100%;
}
use the code above i think maybe solve the problem
Related
I want to make admin navigation. When I click a menu it will be active until I click another menu. When I click another menu that should then be active. In my admin nav, I used the below code but it is not working. All my CSS is working properly, but I can't set the clicked menu as active. How I can fix this problem?
$(function() {
$('li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
.admin-menu ul {
padding: 0;
margin: 0;
}
.admin-menu ul li {
list-style: none;
transition: .4s;
}
.admin-menu ul li a {
color: #333;
display: block;
padding: 10px 15px;
font-size: 16px;
text-transform: capitalize;
}
.admin-menu ul li:hover, li.active {
background-color: #F8694A !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
<div class="admin-menu">
<ul>
<li class="active"><i class="fas fa-home"></i> Dashboard</li>
<li><i class="far fa-list-alt"></i> Category</li>
<li><i class="fas fa-book"></i> Books</li>
<li><i class="fas fa-users"></i> Users</li>
<li><i class="fas fa-chalkboard-teacher"></i> E-books</li>
<li><i class="fas fa-cart-arrow-down"></i> Orders</li>
<li><i class="fas fa-layer-group"></i> Others</li>
<li><i class="fas fa-cog"></i> Settings</li>
<li><i class="fas fa-power-off"></i> Logout</li>
</ul>
</div>
</div>
I have a question about Tree view in pure HTML/CSS/JS files.
I can make Tree view with HTML/CSS successfully and get help from w3school, you can see my code here:
html file:
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li class="caret">
<i class="fa fa-graduation-cap"></i> Tutorial
<ul class="nested">
<li class="caret">
<i class="fa fa-chrome"></i> Web Development
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-server"></i> Network
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-microchip"></i> IOT
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>
But I have a problem in cascading (Open/close) them in js file, first time that I click on tutorials, that list will open without any problems, but after that when I click on one of the nested lists in it (web development) all of the tree from tutorials is closing.
First thing your JS is correct, this this.parentElement.querySelector(".nested") alwayse targeting the first <ul>, just try to remove caret class from <li> and put it inside <a>, that's main that the click will be binded to <a> instead of<li>. or put it inside <span> as you want, it works as well. See the code snippet below :
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-graduation-cap"></i> Tutorial</a>
<ul class="nested">
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-chrome"></i> Web Development</a>
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-server"></i> Network</a>
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-microchip"></i> IOT</a>
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>
The problem here is that you are binding the event on ul element. when the click happens it took this.parentElement (this is the element which click was binded on) so it is higher html level then you need. Place caret class on a element inside li. And the next problem is that they are using span element and you are using a element which is doing redirection by default so stopPropagation is needed as well.
I think I import my CSS and jQuery correctly but the results shown wasn't what I am looking for.
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link ref="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<style>
//all the css from the template, stackoverflow says my question is full of codes so I remove it
</style>
<body>
<section class="pricing py-5">
<div class="container">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Free</h5>
<h6 class="card-price text-center">$0<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
</ul>
Button
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
</body>
I get the template from: template
jsfiddle: jsfiddle
Can anyone points out where is the problem in my code, would appreciate it.
The results should look like this
but I am getting this
Here is a solution for your problem, just change the "ref" to "rel" and you are good to go.
Everything was correct, just because your external stylesheet was not able to load because of "ref". To load any external css file use "rel" instead of "ref". I have attached working piece of code just for your reference. I hope, it solves your problem.
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<style>
section.pricing {
background: #9CECFB;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.pricing .card {
border: none;
border-radius: 1rem;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}
.pricing .card-price {
font-size: 3rem;
margin: 0;
}
.pricing .card-price .period {
font-size: 0.8rem;
}
.pricing ul li {
margin-bottom: 1rem;
}
.pricing .text-muted {
opacity: 0.7;
}
.pricing .btn {
font-size: 80%;
border-radius: 5rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
transition: all 0.2s;
}
/* Hover Effects on Card */
#media (min-width: 992px) {
.pricing .card:hover {
margin-top: -.25rem;
margin-bottom: .25rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
opacity: 1;
}
}
</style>
<body>
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<section class="pricing py-5">
<div class="container">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Free</h5>
<h6 class="card-price text-center">$0<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
</ul>
Button
</div>
</div>
</div>
<!-- Plus Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
<h6 class="card-price text-center">$9<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
</ul>
Button
</div>
</div>
</div>
<!-- Pro Tier -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
<h6 class="card-price text-center">$49<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
</ul>
Button
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
</body>
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!
I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}