0

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

1

1 Answer 1

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')
})
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.