How to create a Show Hide Nav Menu

Question

I would like to create a show hide Nav menu like this..

http://www.dtelepathy.com/blog/inspiration/22-fresh-single-page-website-for-your-inspiration

HTML Code

<div id="menus">
<nav id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BIOGRAPHY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">WRITINGS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>

CSS Code

#nav ul{
margin-top:10px;
margin-bottom:20px;
padding:50px;
}
#nav ul li{
float:left;
padding:48px;

}
#nav a:link{
color:#999;
}
#nav a:visited{
color:#000;
}
#nav a:hover{
color:#999;
border-bottom-style:solid;
}

Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on Stack Overflow. See "Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?. BTW, it's "Thanks in advance", not "Thanks in advanced". — John Saunders
– John Saunders, Commented Apr 26, 2015 at 18:34

Antonio Smoljan · Accepted Answer · 2015-04-19 12:01:14Z

2

We can just change the top property of the ul links make it to default to a minus value eq top:-70px; then when we hover the header make the ul top value 0 by adding a class called show via jquery.

Here is the example

The main code we have to worry about is the ul and header properties

HTML:

  <header> 
    <nav>
      <ul class="menu">
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </nav>
  </header>

CSS:

ul {

 -webkit-transition:all 0.6s;
  position: relative;
  top: -70px;
}
.show {
  top: 0;
}

(the transition is gonna make it a smooth animation instead of showing immediately)

JS:

$("header").hover(function() {
  $('ul.menu').toggleClass('show')
})

edited Apr 19, 2015 at 12:01

answered Apr 19, 2015 at 10:55

Antonio Smoljan

2,2071 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a Show Hide Nav Menu

HTML Code

CSS Code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code

CSS Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related