Make a navbar hidden until mouse hover

Question

I am trying to have a navbar (within a div called nav-container) be hidden until the user hovers their mouse over it, in which case it slides out to present itself. The JQuery code I have written below does not seem to be working properly. Any help is much appreciated!

HTML Navbar Code:

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

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

Here's a simple example. What's actually doing the job is:

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

The rest are details. See it working:

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

And here's same technique on your example:

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

Took the liberty to leave a bit out, to advertise the presence of the menu.

Answer 2

the menu is set to display none in the css and then jquery is used to toggle to block when hovered over

$( ".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>

Answer 3

What you'll want to do is to hide the navbar by default and then enable it only when the mouse hovers it.

You're code is fine, the only thing you need to add is a css statement:

nav {
    display: none;
}

Oterhwise nav is already going to be enabled by default which makes the jquery hover trigger useless.

Also it is good practise to use the jQuery ready function:

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