I have a ul li structure that looks like as in the code below.
I want to display just the first level of drop-down on hover. Now, since the <ul> has "drop-down menu" in various places withing the same <ul> tag, it displays all the items that are under this class. One way is to add a parent class either adding in HTML or dynamically by writing some script.
Is there a way we could access this directly using CSS alone ?
.nav-item:hover .dropdown-menu ul { should exclude all the dropdown-menu class where there is also a submenu class - something like this
}
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Item 1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Item 2
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Item 3
</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Second Level item1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Second Level item2
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Second Level item3
</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Third Level item1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Third Level item2
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Third Level item3
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
Item 4
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Item 5
</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Second Level item1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Second Level item2
</a>
</li>
</ul>
</li>
</ul>
The code runs perfectly in the real application by adding a specific class.
Add > to select direct child .navbar .nav-item:hover > .dropdown-menu
.navbar .nav-item:hover > .dropdown-menu{
display: block;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
To active submenu when hover dropdown-menu
.dropdown-menu li:hover>.submenu{
display: block;
background-color: #233d00;
}
Try this codepen Demo
nav {
vertical-align: middle;
text-align: center;
font-size: 12px;
background: #233d00 0% 0% no-repeat padding-box;
}
li:hover{background: #647e8f;}
#media all and (min-width: 992px) {
.navbar .nav-item:hover .nav-link {color: #fff;}
.navbar .nav-item:hover>.dropdown-menu{
display: block;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
.dropdown-item{color: #fff !important;}
.dropdown-menu li{position: relative;}
.nav-item .submenu{
display: none;
position: absolute;
left:100%;
top:-1px;
}
.dropdown-menu li:hover{ background-color: #f1f1f1 }
.dropdown-menu li:hover>.submenu{
display: block;
background-color: #233d00;
}
.dropdown-submenu li:hover > .dropdown-submenu{
display: block;
background-color: #233d00;
}
ul.dropdown-submenu {
list-style-type: '';
padding: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<body>
<nav class="navbar py-0 navbar-expand-lg navbar-dark" id="second-navbar">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav nav-fill w-100 nav-pills">
<li class="nav-item active"><a class="nav-link" href="#">First Level Item 1</a></li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown">First Level Item 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">First Level Sub Item 1</a></li>
<li><a class="dropdown-item" href="#">First Level Sub Item 2</a></li>
<li><a class="dropdown-item" href="#">First Level Sub Item 3</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Second Level item1</a></li>
<li><a class="dropdown-item" href="#">Second Level item1</a></li>
<li><a class="dropdown-item" href="#">Second Level item1</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Third Level item1</a></li>
<li><a class="dropdown-item" href="#">Third Level item2</a></li>
<li><a class="dropdown-item" href="#">Third Level item3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown">First Level Item 3</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Take screen width greater than 992px to view navbar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
As you are having different level, you must make different css setting:
.navbar li:hover ul{
display: block;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
.navbar li:hover ul li ul{
display: none;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
.navbar li ul li:hover ul{
display: block;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
.navbar li ul li:hover ul li ul{
display: none;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
.navbar li ul li ul li:hover ul{
display: block;
border-radius: 0;
background-color: #233d00;
position: absolute;
}
Related
I need to change a selector from a megamenu, from the list block itself to only the link inside the list, only on the main category.
This is a snippet of the code of the megamenu that i'm using. In that example i need that the megamenu open only on hover of the "Products", instead all the <li> block of "Products":
html
<ul class="navbar-nav">
<li class="dropdown">
[...]
</li>
<li class="dropdown dropdown-mega-menu">
<a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">Products</a>
<div class="dropdown-menu">
<ul class="mega-menu d-lg-flex">
<li class="mega-menu-col col-lg-3">
<ul>
<li class="dropdown-header">Woman's</li>
<li><a class="dropdown-item nav-link nav_item" href="shop-three-columns.html">Vestibulum sed</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-four-columns.html">Donec porttitor</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-grid-view.html">Donec vitae facilisis</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-list-view.html">Curabitur tempus</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-left-sidebar.html">Vivamus in tortor</a></li>
</ul>
</li>
<li class="mega-menu-col col-lg-3">
<ul>
<li class="dropdown-header">Men's</li>
<li><a class="dropdown-item nav-link nav_item" href="shop-cart.html">Donec vitae ante ante</a></li>
<li><a class="dropdown-item nav-link nav_item" href="checkout.html">Etiam ac rutrum</a></li>
<li><a class="dropdown-item nav-link nav_item" href="wishlist.html">Quisque condimentum</a></li>
<li><a class="dropdown-item nav-link nav_item" href="compare.html">Curabitur laoreet</a></li>
<li><a class="dropdown-item nav-link nav_item" href="order-completed.html">Vivamus in tortor</a></li>
</ul>
</li>
<li class="mega-menu-col col-lg-3">
<ul>
<li class="dropdown-header">Kid's</li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail.html">Donec vitae facilisis</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-left-sidebar.html">Quisque condimentum</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-right-sidebar.html">Etiam ac rutrum</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-thumbnails-left.html">Donec vitae ante ante</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-accordion-style.html">Donec porttitor</a></li>
</ul>
</li>
<li class="mega-menu-col col-lg-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail.html">Curabitur tempus</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-left-sidebar.html">Quisque condimentum</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-right-sidebar.html">Vivamus in tortor</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-thumbnails-left.html">Donec vitae facilisis</a></li>
<li><a class="dropdown-item nav-link nav_item" href="shop-product-detail-accordion-style.html">Donec porttitor</a></li>
</ul>
</li>
</ul>
<div class="d-lg-flex menu_banners">
<div class="col-lg-6">
<div class="header-banner">
<img src="assets/images/menu_banner1.jpg" alt="menu_banner1">
<div class="banne_info">
<h6>10% Off</h6>
<h4>New Arrival</h4>
Shop now
</div>
</div>
</div>
<div class="col-lg-6">
<div class="header-banner">
<img src="assets/images/menu_banner2.jpg" alt="menu_banner2">
<div class="banne_info">
<h6>15% Off</h6>
<h4>Men's Fashion</h4>
Shop now
</div>
</div>
</div>
</div>
</div>
</li>
<li class="dropdown">
[...]
</li>
css
.navbar .navbar-nav li > .dropdown-menu,
#navCatContent ul > li .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
margin-top: 20px;
pointer-events: none;
}
.navbar .navbar-nav li:hover > .dropdown-menu,
#navCatContent ul > li:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
margin-top: 0px;
pointer-events: auto;
}
.cart_dropdown:hover > .dropdown-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
margin-top: 0px !important;
}
.cart_dropdown:hover > .dropdown-menu.cart_box {
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
.navbar .navbar-nav li:hover > .dropdown-menu .mega-menu ul li .dropdown-menu {
margin-top: 10px;
}
.navbar .navbar-nav .dropdown-menu .dropdown-menu {
left: 100%;
top: 0;
}
.navbar .navbar-nav .dropdown-menu.dropdown-reverse .dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
}
.navbar .navbar-nav .dropdown-menu.dropdown-reverse li:hover > .dropdown-item::after {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.dropdown-menu.dropdown-reverse {
left: auto;
right: 0;
}
I'm struggling on this for a while, anyone can help to change correctly the selector?
first question, how to swap two divs, i want the image on the left and the text next to it
https://codepen.io/madaffakiren/pen/PomedWx
2nd question, I want to lower the "dropdown" but when I do it with margin-top then the "dropdown" disappears on hover, how to assign this blind spot (https://i.imgur.com/8mpN8BL.png) to dropdown?
HTML:
<!-- ======== Navbar ======= -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/"><img src="img/logo4.svg" width="120px" height="32px" alt="logo"></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
data-target=".navbar-collapse.show">Sample</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Sample</a>
<a class="dropdown-item" href="#">Sample</a>
</ul>
</li>
</li>
<li class="nav-item">
<a class="nav-link " href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
padding: 10px 0;
background-color: #37517e;
}
.navbar .nav-item {
margin: 0;
padding: 0;
}
.navbar .nav-item .nav-link {
font-size: 15px;
font-weight: 500;
color: #ffffff;
padding: 0;
margin-left: 35px;
transition: all 0.3s ease-in-out;
}
.navbar .nav-item .nav-link:hover {
transform: translateY(-3px);
color: #03b0d5;
}
.navbar .nav-item .dropdown-menu {
border: none;
margin: 20px 0;
background-color: blue;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
I got a problem, I do not know what is the problem with the hover menu but it disappears too fast
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class=" dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>
css:
.navbar .nav-item ul.log{
display: none;
list-style-type:none;
}
.navbar .dropdown-menu:hover ul.log{
display: block;
}
.log a{
color:var(--main-text-color);
font-family:var(--main-text-font);
font-size: 24px;
}
You need to use :hover pseudo class on .log-main:hover to show the next ul which will be .dropdown-menu
Live Demo:
.navbar .nav-item ul.log {
display: none;
list-style-type: none;
}
.log-main:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.log a {
color: var(--main-text-color);
font-family: var(--main-text-font);
font-size: 24px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class="dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>
You need to add hover to the element that is visible and the dropdown that is hidden.
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover{
display: block;
position: absolute;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
I have been trying to wrap my head around this issue for over an hour now and can't seem to fix.
When my nav menu collapses and I hover mouse over the SHOP item in menu, it moves the SHOP element to the left. When I mouse away, it goes back to middle position. SHOP should stay in line with the other two menus (NOT move left)
I have tried adjusting the dropdown-menu class as well as CSS for dropdown but still no fix.
Any push in right direction is appreciated. Thanks
HTML:
<div class="collapse navbar-collapse nav-layout" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index">HOME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle"dropdown" aria-haspopup="true" aria-expanded"false">SHOP</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="products">Tealights</a>
<a class="dropdown-item" href="products">Wax-Melts<span class="sr-only">(current)</span></a>
<a class="dropdown-item" href="products">Medium Candle</a>
<a class="dropdown-item" href="products">Large Candle</a>
<a class="dropdown-item" href="products">X-Large Candle</a>
</div>
</li>
<li>
<a class="nav-link" href="contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
CSS:
.narbar-default .navbar-nav > li.dropdown:hover > a,
.narbar-default .navbar-nav > li.dropdown:hover > a:hover,
.narbar-default .navbar-nav > li.dropdown:hover > a:focus, {
color: rgb(100, 100, 100);
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: #909090;
}
What displays on screen when hover over SHOP dropdown
You need to add position:absolute to teh dropdown-menu selector. Try this code.
.dropdown {
position: relative;
}
.dropdown > .dropdown-menu {
position: absolute;
left: 0;
top: 100%;
z-index: 2;
}