时间戳

首页 > 解决方案 > 鼠标移出后显示子菜单

javascript - 鼠标移出后显示子菜单

问题描述

你们能帮我解决鼠标移出的过渡延迟吗？:D

我的导航栏有一个下拉菜单，但是因为在主菜单项和子菜单之间有几个像素的空白，如果我没有足够快地向下移动鼠标，子菜单会再次消失。我一直在玩基于其他线程答案的过渡效果，但我无法让它工作（因为我并不真正理解逻辑 - 我通常通过反复试验来学习）。

像这样的，你们能帮助我吗？我更喜欢专注于过渡的解决方案（而不是减少空白的解决方案），因为我也想学习其他网页设计方面的过渡技巧。希望这样，我也能更好地理解这些 HTML 结构实际上是如何工作的，这样我就可以重用基本概念的想法。

注意：菜单项在悬停时会改变颜色。列出了用于该目的的主要 CSS，但我省略了颜色的特定 CSS。

nav {
  display:flex;
  align-items:center;
  flex-direction:row;
  float:right;
  nav-right:auto;
  justify-content:space-between;
}

.btn.btn-primary {
  border: 0px;
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.btn.btn-primary:hover {

}

.dropdown-menu {
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a{
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a:hover{

}

.dropdown:hover .dropdown-menu {
  display: block;
}
<section>
  <header class="container">
    <div class="row">
      <nav class="navbar navbar-default navbar-fixed-top" style="background-color:snow;">
        <h2 class="col-md">
          <a class="nav" href="./index">Foundation</a>
        </h2>
        <nav class="navbar-right">
          <!-- make it into one block, or aligned block-->
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                Our mission </button>
            <ul class="dropdown-menu">
              <li>
                <a href="./Guidelines#Conservation">Natural resources</a>
              </li>
              <li>
                <a href="./Guidelines#Food">Access to food</a>
              </li>
              <li>
                <a href="./Guidelines#Health">Public health</a>
              </li>
            </ul>
          </div>
        </nav>
      </nav>
    </div>
  </header>
</section>

标签： javascripthtmlcss

解决方案

我认为您的问题不在于过渡，而在于导航栏本身。顺便说一句，您是否使用引导程序？在下面的代码片段中，我刚刚将 BS 链接到您的代码，我看到的是菜单是可点击的，但点击子菜单真的很棘手。

这个btn btn-primary类更像是可点击的菜单或提交按钮，但你仍然可以让它看起来像一个带有一点 CSS 的按钮。但是对于下拉菜单，我想它不是很直观。

完整页面视图，无切换

.btn.btn-primary {
  border: 0px;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

.dropdown-menu {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a href="./index" class="navbar-brand">Foundation</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
          <p class="navbar-btn">
                    <a href="#" class="btn btn-primary" data-toggle="dropdown">Our mission</a>
                </p>
          
            
          </li>
          <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li>
                <a href="./Guidelines#Conservation">Natural resources</a>
              </li>
              <li>
                <a href="./Guidelines#Food">Access to food</a>
              </li>
              <li>
                <a href="./Guidelines#Health">Public health</a>
              </li>
            </ul>
              </li>
        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
</body>

</html>

推荐阅读