Question

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

HTML Navbar代码：

<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 Navbar Code：

.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);

Answer 1

这是一个简单的例子。实际上做的是：

#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>

自由离开，宣传菜单的存在。

Answer 2

菜单设置为在css中显示none，然后jquery用于在悬停时切换到阻止

＆＃13;

$( ".nav-container" ).hover(function() {
    $( "#navbar" ).toggle("slide");
  });

＆＃13;

.nav-container{
    width: 110px;
    display: flex;
    flex-direction: column;
}

#navbar{
    background-color: rgb(48, 162, 255);
    border: solid 2px none;
    border-radius: 8px;
    position: relative;
    margin: auto;
    display: none;
 }

.link-container {
    margin: 10px;
    font-size: 18px;
    width: 100%;
    color: white;
}

.nav-link{
    display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="nav-container">
<p style="text-align: center;">hover</p>
    <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>

＆＃13;

Answer 3

您要做的是默认隐藏导航栏，然后仅在鼠标悬停时启用它。

您的代码很好，您需要添加的唯一内容是css语句：

nav {
    display: none;
}

默认情况下，OTERhwise nav已经启用，这使得jquery悬停触发器无效。

使用jQuery ready函数也是一种好习惯：

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

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

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

隐藏导航栏，直到鼠标悬停

3 个答案: