Сделать навигационную панель скрытой, пока мышь не зависнет

Question

Я пытаюсь скрыть панель навигации (внутри элемента div, называемого nav-container), пока пользователь не наведет на него курсор мыши, и в этом случае он выдвигается, чтобы представить себя. Код 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 Navbar:

.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

Что вы хотите сделать, это скрыть панель навигации по умолчанию, а затем включать ее только тогда, когда ее наведет курсор мыши.

С вашим кодом все в порядке, вам нужно добавить только инструкцию css:

nav {
    display: none;
}

Oterhwise nav уже будет включен по умолчанию, что делает бесполезным триггер jquery.

Также рекомендуется использовать функцию готовности jQuery:

$( 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);
});

Answer 2

Вот простой пример. Что на самом деле делает работу:

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

меню настроено на отображение ни одного в css, а затем jquery используется для переключения на блокировку при наведении на

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

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

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