Question

我正在尝试制作一个类似于https://www.nakedcph.com/的下拉菜单。我目前的想法是创建一个菜单，其中链接在悬停时显示不同的div，位于当前菜单下方并将作为下拉列表

    <div id="menu">
	<ul>
	<li id="newarrivals-trigger"><a href="url">New Arrivals</a></li>
	<li><a href="url">Brands</a></li>
	<li><a href="url">Accessories</a></li>
	<li><a href="url">Journal</a></li>
	</ul>
</div>

其中#newarrivals-trigger显示在下面

<div id="dropdown">
<ul>
<li><a href="#">Adidas</a></li>
<li><a href="#">Nike</a></li>
<li><a href="#">New Balance</a></li>
<li><a href="#">Puma</a></li>
</ul>
<ul>
<li><a href="#">Vans</a></li>
<li><a href="#">Y3</a></li>
<li><a href="#">Reebook</a></li>
</ul>
</div>

使用

<script>
$(document).ready(function(){
$("#newarrivals-trigger").hover(function(){
$("#dropdown").show();
}, function(){
$("#dropdown").hide();
});
});
</script>

我的问题是，当我从id =“newarrivals-trigger”链接中删除光标时，下拉列表会立即消失。

如何构建这种下拉列表（Nakedchp）？

dropdown

我似乎只能找到链接在其下方显示一行链接的链接，如下所示。

dropdown

可以使用现有菜单的任何想法或知识吗？谢谢！

Answer 1

您可以在没有脚本的情况下执行此操作。使用CSS，您可以在鼠标悬停时操作特定元素。我会尝试使用

创建菜单作为单独的元素

.menuDiv{
  display:none;
}

然后，当您将鼠标悬停在要触发的链接上时，可以使用

激活菜单

link:hover .menuDiv{
  display:block;
}

您可能还想添加

.menuDiv:hover{
  display:block;
}

当鼠标离开链接时，为了防止菜单消失。

或者，使用您的代码，试试这个：

$("#newarrivals-trigger").on("mouseenter", function(){

    $("#dropdown").show();

});

$("#dropdown").on("mouseout", function(){

   $("#dropdown").hide();

});

分别处理鼠标悬停和鼠标退出事件，这有助于解决您的问题。

希望有所帮助！

Answer 2

如果你想用jquery做，那么你可以使用下面的代码。它显示了只有一部分菜单工作的片段。

＆＃13;

$("#BrandsAll").hover(function() {
  $("#BrandDropdown").toggleClass("show","hide");
});

＆＃13;

#BrandDropdown{display:none;}
#BrandDropdown.show{display:block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="menu">
  <ul id="newarrivalsTrigger">
    <li>New Arrivals</li>
    <li id=BrandsAll>Brands
    <ul id="BrandDropdown">
    <li><a href="#">Adidas</a></li>
    <li><a href="#">Nike</a></li>
    <li><a href="#">New Balance</a></li>
    <li><a href="#">Puma</a></li>
  </ul>
  </li>
    <li>Accessories</li>
    <li>Journal</li>
  </ul>
</div>

＆＃13;

Answer 3

我可能会将下拉列表放在列表标题的<li>内。

<div id="menu">
  <ul>
    <li id="newarrivals-trigger"><a href="url">New Arrivals</a>
      <div id="dropdown" class="hidden">
        <ul>
          <li><a href="#">Adidas</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">New Balance</a></li>
          <li><a href="#">Puma</a></li>
        </ul>
        ...
      </div>
    </li>
    <li><a href="url">Brands</a></li>
    <li><a href="url">Accessories</a></li>
    <li><a href="url">Journal</a></li>
  </ul>
</div>

让#dropdown div从设置display: none的类开始。

.hidden {
  display: none;
}

然后让悬停触发器删除/添加类而不是使用show / hide。这样，只要鼠标停留在列表标题或下拉列表上，它仍然悬停在顶级li上。

<script>
  $(document).ready(function(){
    $("#newarrivals-trigger").hover(function(){
      $("#dropdown").removeClass("hidden");
    }, function(){
      $("#dropdown").addClass("hidden");
    });
  });
</script>

您必须使用CSS进行更多操作才能正确定位下拉列表，但我认为您已经在某个地方找到了它。

Answer 4

默认情况下，在下拉列表中使用display none，然后在菜单悬停时使用display：block显示

$('li').on('mouseover', function() {
  $('ul li div.hover').removeClass('active');
  var submenu = $(this).children()[1];
  $(submenu).addClass('active');
});
$('ul li div.hover').on('mouseout', function() {
  $(this).removeClass('active');
});

li{
display: inline-block;
}
.hover {
  position: absolute;
  top: 35px;
  display: none;
}
.hover.active{
display: block;
}
.hover1:hover > .hover {
  display: block;
}
.hover2:hover > .hover {
  display: block;
}
.hover3:hover > .hover {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="hover1">
    <a href="">Link</a>
    <div class="hover">dropdown menu1</div>
 </li>
 <li class="hover2"><a href="">Link</a>
  <div class="hover">dropdown menu2</div>
 </li>
 <li class="hover3">
    <a href="">Link</a>
    <div class="hover">dropdown menu3</div>
 </li>
</ul>

Answer 5

我喜欢我的下拉菜单，即使他们没有被徘徊也要保持开放，所以我做了一些有点厚颜无耻的事情。

我使用按钮和：焦点选择器来保持菜单打开，即使它没有悬停在上面。当然还有其他方法可以做到这一点，但请查看我的jsfiddle以获取一个非常未精制的纯css示例。

我认为最重要的一点是完整（或几乎全宽）。要做到这一点，只需确保您的下拉内容是在导航栏内，并且导航栏有一个位置设置，例如“相对”。然后你的下拉列表应该有一个绝对的位置，一个100％的顶部（或更高的东西）和一个0的左边（或其他）。

然后确保您的drowndown或navbar之间没有任何位置设置，你应该得到一个漂亮的全宽下拉列表。

.root, body, html{
  margin : 0px;
  padding : 0px;
  width : 100%;
  height : 100%;
  background-color : blue;
  
  display : flex;
  flex-direction : column;
}

.navbar{
  position : relative;
  height : 60px;
  width : 100%;
  background-color : white;
  
  display : flex;
  flex-direction : row;
  justify-content : center;

}

.dropdown{
  position : absolute;
    
  top : 105%;
  left : 0px;
  
  display : none;
  height : 200px;
  background-color : white;
  width : 100%;
}

.link:focus .dropdown{
  display : flex;
}

<div class="root">
  <div class="navbar">
    <button class="link">
      <div class="text">Dropdown 1</div>
      <div class="dropdown">
        Content 1
      </div>
    </button><button class="link">
      <div class="text">Dropdown 2</div>
      <div class="dropdown">
        Content 2
      </div>
    </button><button class="link">
      <div class="text">Dropdown 3</div>
      <div class="dropdown">
        Content 3
      </div>
    </button>
  </div>
  <div class="content">
    Lorem ipsum and other such words
  </div>
</div>

显示/隐藏div下拉菜单

5 个答案: