Question

I was wondering how i might build a similar navigation through css and eventually js. I have no problem replicating the “static” part, what i would like to know is how to make the drop down menu as they made it.

Like the whole page slides to make space for it, it does not overlap like in all the scripts i found.Id appreciate an explanation or even better a ready made script somewhere on the web that i haven’t been able to find.

Answer 1

jsBin demo

jQuery:

$('nav li:has(ul)').on('hover',function(){
    $('ul', this).stop().animate({height:'toggle'},300); 
});

HTML

  <nav>    
    <ul>      
      <li><a href="#">Join</a></li>      
      <li><a href="#">Login</a></li>      
      <li>
          <a href="#">Watch</a>
          <ul>
              <h2>Watch additional menu</h2>      
          </ul>     
      </li>            
    </ul>
 </nav>

CSS:

/* ALL ULs */
nav ul{
  list-style:none;
  width:100%;
}

/* INNER UL */
nav li > ul{
  float:left;
  display:none;
  background:#ccc;
}

/* ALL LI */
nav li{
  display:inline;
  margin:30px;
}