Dropdown list appears (on hover) even when it's hidden inside the mobile menu
Question
In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() { $(".toggle").on("click", function() { if ($(".item").hasClass("active")) { $(".item").removeClass("active"); } else { $(".item").addClass("active"); } }); });
nav { background: #3e3e40; padding: 0 20px; } ul { list-style-type: none; } a { color: white; text-decoration: none; } a:hover{ color: rgb(189, 169, 136); } nav a:focus{ outline: 0; } .logo a:hover { text-decoration: none; } .menu li { font-size: 16px; padding: 15px 5px; white-space: nowrap; } .logo img{ width: 50px; height: 40px; } .logo{ padding: 0; flex: 1; } .toggle a { font-size: 20px; } nav, ul, li{ margin: 0; padding-top: 0; padding-bottom: 0; } /* Mobile menu */ .menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .toggle { order: 1; } .cart{ order:1 } .item { width: 100%; text-align: center; order: 3; display: none; } .login-info{ order:2 } .item.active { display: block; } /* Navbar Toggle */ .toggle { cursor:pointer; } .bars { background: #999; display: inline-block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .bars:before, .bars:after { background: #999; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .bars:before { top: 5px; } .bars:after { top: -5px; } /*---------------dropdown li css-------------------*/ .dropdwn { position: relative; display: inline-block; color: white; } .dropdwn-content { visibility: hidden; opacity: 0; position: absolute; background-color: #ffffff; padding: 12px 16px; right: 39.5%; z-index: 1; height: 0; } .dropdwn-content a{ color: #3e3e40; } .dropdwn-content li{ color: #3e3e40; } .dropdwn-content a:focus{ outline:0; } .dropdwn:hover .dropdwn-content { display: block; color: white; visibility: visible; opacity: 1; height: auto; transition: all 250ms ease-in; } /*------font awesome and pseudo classes navbar-----*/ .fa-lg{ color: rgb(255, 255, 255); font-size: 26px; position: relative; } .fa-lg::before{ content: ''; border: rgb(255, 255, 255); border-style: solid; border-width: 2px; border-radius: 50%; position: absolute; width: 43px; height: 43px; right:14px; top:-8px } .badge:after{ content:attr(value); font-size:18px; color: #fff; background: rgb(92, 148, 166); border-radius:50%; padding: 0 5px; position:relative; left:-2px; top:-15px; opacity:0.9; } .pseudo::before{ content:attr(username); display: block; font-size: 12px; width: auto; height: 6px; margin-bottom: 12px; } .circle{ border: #fff; border-style: solid; border-radius: 50%; width: 40px; height: 40px; } /* Tablet menu */ @media all and (min-width: 468px) { .menu { justify-content: center; } } /* Desktop menu */ @media all and (min-width: 768px) { .item { display: block; width: auto; } .toggle { display: none; } .item { order: 2; } .menu li { padding: 15px 10px; } .dropdwn { position: relative; display: inline-block; } .dropdwn-content { position: absolute; right: auto; padding: 12px 16px; z-index: 1; } .dropdwn:hover .dropdwn-content { display: block; color: white; } .signup{ padding-right: 2rem; } .pseudo::before{ width: 10px; margin-bottom: 10px; } .pseudo::after{ content:''; display: block; font-size: 13px; width: auto; height: 7px; margin-bottom: 10px; } }
<!DOCTYPE HTML> <html lang="en-gb"> <head> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="max-age=604800" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title></title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <nav> <ul class="menu"> <li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li> </li> <li class="item"> <a href="">Home</a> </li> <li class="item"> <a href="">Store</a> </li> <li class="dropdwn item"> <span class="item">Categories</span> <ul class="dropdwn-content"> <li><a href="{{category.get_url}}">Product1</a></li> <li><a href="{{category.get_url}}">Product2</a></li> </ul> </li> <li class="item"> <a href="" class="pseudo" username="Welcome Guest">Login</a> </li> <li class="item"> <a href=""class="signup">Signup </a> </li > <li class="item"> <form action="" method='GET' > <input type="text" placeholder="Search.." name="keyword"> <button type="submit" > </button> </form> </li> <li class="toggle"><span class="bars"></span></li> </ul> </nav> </body>
1 answers
solution1
0 2022-05-20 19:44:55
I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
<a href="">Home</a>
</li>
<li class="item">
<a href="">Store</a>
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear"><a href="{{category.get_url}}">Product1</a></li>
<li class="disapear"><a href="{{category.get_url}}">Product2</a></li>
</ul>
</li>
<li class="item">
<a href="" class="pseudo" username="Welcome Guest">Login</a>
</li>
<li class="item">
<a href=""class="signup">Signup </a>
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
@media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
@media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
@media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
@media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
make dropdown menu still visible even when mouse hover is lost
Reset a dropdown menu when hidden
Link with hover dropdown menu for Mobile Devices
li:hover dropdown menu on mobile devices
Bootstrap 4 dropdown appears by hover
How to remove scrolling when mobile menu appears
JQuery hover dropdown menu disappears when hovering on the dropdown menu
Styling Hidden Dropdown Menu
Dropdown menu on hover
Hover not working on dropdown menu
Related Tags