javascript - Additional Navigation bar on click -

i have navigation bar section "contracts" , wondering if possible, , how go adding additional navigation bar expand underneath when button tagged, (for example, on apple store site, when click product, adds bar)

i can provide entire css style sheet if needed! think require javascript i'm trying keep pure css now!

all appreciated!

html code: navigation html

<header>     <div class="title">         <img src="img/logo2.png"/>     </div>     <div class="navbar">         <ul>             <li style="float: left"><a href="#home">home</a></li>             <li><a href="#contact">contracts</a></li>             <li><a href="#about">about us</a></li>             <li><a href="#other">other</a></li>             <li> <a href="#release">release notes</a></li>             <li> <a target="_blank" href="http://www.phpartnership.com">pinnacle health partnership</a></li>         </ul>     </div> </header> 

creates this

css code: entire stylesheet

body {     background-color: #fff;     margin: 0;     font-family: arial;     color: #333; }  header {     background-color: #333;     position: fixed;     top: 0;     width: 100%; }  .navbar {     display: block;     text-align: center; }  .navbar ul {     list-style-type: none;     padding: 0;     margin: 0;     overflow: hidden; }   .navbar li {     display: inline-block;     vertical-align: middle;     -webkit-transform: translatez(0);     transform: translatez(0);     box-shadow: 0 0 1px rgba(0, 0, 0, 0);     -webkit-backface-visibility: hidden;     backface-visibility: hidden;     -moz-osx-font-smoothing: grayscale;     position: relative;     overflow: hidden; } .navbar li:before {     content: "";     position: absolute;     z-index: -1;     left: 50%;     right: 50%;     bottom: 0;     background: white;     height: 4px;     -webkit-transition-property: left, right;     transition-property: left, right;     -webkit-transition-duration: 0.3s;     transition-duration: 0.3s;     -webkit-transition-timing-function: ease-out;     transition-timing-function: ease-out; } .navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {     left: 0;     right: 0; }  .navbar li {     padding: 25px;     display: block;     height: 100%;     color: white;     text-decoration: none; }  .title {     height: 80px;     padding: 2px;     background-color: #fff; }  .container {     margin-top: 150px;     padding-top: 50px; }  .home {     margin-top: 10px;     text-align: center;     padding: 40px !important; } .wrap {     width: 100%;     margin: 0 auto; } .left_col {     float: left;     width: 50%; } .right_col {     float: right;    width: 50%; } .right_col img {     width: 80%;     margin-top: 50px;     border: 2px solid black;     border-radius: 5px; } .left_col img {     width: 80%;     margin-top: 50px;     border: 2px solid black;     border-radius: 5px; } 

this javascript tried use hide , show div on click

<script> $(index.php).ready(function(){     ``$("#contract").click(function(){             $("<div class="contracts">").toggle();         }); }); </script> 

guess want smth : jsfiddle

first add jquery local environment use <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

add in head section of html. more info check how install jquery

added html inside .navbar

<ul class="aditional">      <li>test1</li>       <li>test2</li>       <li>test3</li>       <li>test4</li> </ul> 

added css :

.aditional { position:absolute; top:100%; width:100%; background:#000; display:none; } .aditional li { color:#fff; } 

added js :

$('.navbar ul li:nth-child(2) a').click(function() {           $(".aditional").slidetoggle() }); 

or if want more responsive solution

check :jsfiddle target

use data-target on li a this

<li><a href="#contact" data-target="contracts">contracts</a></li> <li><a href="#about" data-target="aboutus">about us</a></li> 

added html :

 <ul class="aditional contracts">      <li>test1</li>      <li>test2</li>      <li>test3</li>      <li>test4</li>  </ul>  <ul class="aditional aboutus">       <li>about</li>       <li>about</li>       <li>about</li>       <li>about</li>  </ul> 

jq added :

$('.navbar ul li a').click(function() {   $(".aditional").slideup()   var target = '.' + $(this).data('target');   $(target).slidedown(); }) 

or u can target href of li a. add

<li><a href="#contract">contracts</a></li> <li><a href="#about">about us</a></li> ------ <ul class="aditional" id ="contract"> .... <ul class="aditional" id ="about"> .... 

and js :

$('.navbar ul li a').click(function() { $(".aditional").slideup() var target = $(this).attr('href'); $(target).slidedown();  }) 

see here jsfiddle

one of these solutions should work . let me know