时间戳

首页 > 解决方案 > 隐藏导航栏直到鼠标悬停

jquery - 隐藏导航栏直到鼠标悬停

问题描述

我试图隐藏一个导航栏（在一个名为 nav-container 的 div 中），直到用户将鼠标悬停在它上面，在这种情况下它会滑出以呈现自己。我在下面编写的 JQuery 代码似乎无法正常工作。任何帮助深表感谢！

HTML 导航栏代码：

<div class="nav-container">
    <nav id = 'navbar'>

        <div class="link-container ">
            <a href='#' class="nav-link">Home</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">FAQ</a>
        </div>
        <div class="link-container">
            <a href='#' class="nav-link">List a Coin</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">Contact Us</a>
        </div>
    </nav>
</div>

CSS导航栏代码：

.nav-container{
    width: 110px;
    height: 230px;
    background-color: rgb(48, 162, 255);
    border: solid 2px none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#navbar{
    position: relative;
    margin: auto;
 }

.link-container {
    margin: 10px;
    font-size: 18px;
    width: 100%;
    color: white;
}

.nav-link{
    display:inline-block;
}

jQuery代码：

var hovering = function(){
   $("nav").show("slide", { direction: "right" }, 1000);
};

var leaving = function(){
   $("nav").hide("slide", { direction: "left" }, 1000);
};

$("#nav-container").hover(hovering, leaving);

标签： jqueryhtmlcssnavbar

解决方案

这是一个简单的例子。实际做这项工作的是：

#navbar { 
  transform: translateY(-100%); /* normal, hidden state */
}
...
.nav-container:hover #navbar {
  transform: translateY(0); /* when parent is hovered */
}

其余的都是细节。看到它工作：

#navbar {
  display: flex;
  background-color: black;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
#navbar a {
    color: white;
    text-decoration: none;
}
#navbar > * {
  padding: 1rem;
}
body {
  margin: 0;
}
.nav-container:hover #navbar {
  transform: translateY(0);
}
<div class="nav-container">
    <nav id = 'navbar'>

        <div class="link-container ">
            <a href='#' class="nav-link">Home</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">FAQ</a>
        </div>
        <div class="link-container">
            <a href='#' class="nav-link">List a Coin</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">Contact Us</a>
        </div>
    </nav>
</div>

这是您示例中的相同技术：

.nav-container {
  width: 110px;
  height: 230px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

#navbar {
  background-color: rgb(48, 162, 255);
  border-radius: 0 8px 8px 0;
  transform: translateX(calc(-100% + 10px));
  transition: transform .4s cubic-bezier(.4, 0, .2, 1) .2s;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-container:hover #navbar {
  transform: translateX(0);
  transition-delay: 0s;
}

#navbar {
  position: relative;
}

.link-container {
  font-size: 18px;
  width: 100%;
}

.link-container a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 6px 12px;
}

.link-container a:hover {
  text-decoration: underline;
  background-color: #ffffff21;
}

.nav-link {
  display: inline-block;
}

body {
  margin: 0;
}

.nav-container,
.nav-container * {
  box-sizing: border-box;
}
<div class="nav-container">
  <nav id='navbar'>
    <div class="link-container ">
      <a href='#' class="nav-link">Home</a>
    </div>

    <div class="link-container">
      <a href='#' class="nav-link">FAQ</a>
    </div>
    <div class="link-container">
      <a href='#' class="nav-link">List a Coin</a>
    </div>

    <div class="link-container">
      <a href='#' class="nav-link">Contact Us</a>
    </div>
  </nav>
</div>

冒昧地留下一点，宣传菜单的存在。

推荐阅读