堆栈内存溢出
  简体   繁体   English

即使隐藏在移动菜单中，下拉列表也会出现（悬停时）

[英]Dropdown list appears (on hover) even when it's hidden inside the mobile menu

 原文  2022-05-20 17:56:43  9   1    javascript/ html/ css

问题描述

In my navbar I have a li item that opens a dropdown menu when someone hovers over it.在我的导航栏中，我有一个 li 项目，当有人将鼠标悬停在它上面时会打开一个下拉菜单。 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).问题在于，在移动视图中，即使 li 项目在菜单中“隐藏”时，当有人将鼠标悬停在其在屏幕上的位置上时，它也会出现（即使它隐藏在菜单中）。

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 个解决方案

解决方案1
 0  2022-05-20 19:44:55

I solved it using media queries我使用媒体查询解决了它

Adjust for whatever pixle size you want调整您想要的任何像素大小

Code Pen Link:代码笔链接：

Click Here点击这里


<!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;
}

}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 即使鼠标悬停了，也使下拉菜单仍然可见 - 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：在移动设备上悬停下拉菜单 - li:hover dropdown menu on mobile devices hover 出现 Bootstrap 4 下拉菜单 - Bootstrap 4 dropdown appears by hover 移动菜单出现时如何消除滚动 - How to remove scrolling when mobile menu appears 悬停在下拉菜单上时，JQuery 悬停下拉菜单消失 - 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
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM