Click Nav

What you will be learning.

You will be learning how to add a clickable nav with open and closed indecators. This is useful to make a nav condensed.

Important

For this tutorial you will be required to make a sprite sheet. A sprite sheet is a group of images on one single file.

To do this create a document in photoshop that is 40px x 20px and seperate it in the middle on the top part make an up arrow and on the bottom part you guessed it make a down arrow.

Some key terms before you continue.

slideUp() Hides the elements attached with the sliding motion.

slideDown() Reveals the elements attached with the sliding motion.

stopPropagation() Prevents any parent of the element from being notified of the event.

Example

Code Required

HTML Markup

          <nav role="navigation">
  <ul id="nav">
    <li><a href="#"> Tab 1 </a>
      <ul class="active">
        <li><a href="#">List Item 1 of tab 1</a></li>
        <li><a href="#">List Item 2 of tab 1</a></li>
      </ul>
    </li>
    <li><a href="#"> Tab 2 </a>
      <ul>
        <li><a href="#">List Item 1 of tab 2</a></li>
        <li><a href="#">List Item 2 of tab 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS Markup

 #nav{
  width: 500px;
  height: 200px;
}
 #nav, #menu ul{
	 list-style:none;
	padding-top: 10px;
	 margin:0 auto;
 }
 #nav li{
	cursor:pointer;
	background:url(../img/arrows1.png) #F4B166 no-repeat right top;
	border-bottom: 1px solid #444;
 }
 #nav li a {
	 text-decoration:none;
	   line-height: 1.5;
 }
 #nav>li>a{
 padding: 2px 10px; 
 font-weight:bold;	 
	font-size:25px;	
	font-family: "Open Sans", sans-serif;
	color:white; 
 }
 #nav li li {
	 cursor:auto;
	 border:0;
	 padding:0 14px;
	 background-color:#fff;
	 background-image:none;
	 height:25px;
 }

Javascript Markup 

$(document).ready(function(){
	$('#menu > li > ul')
	.hide()
	.click(function(e){ //click event
	e.stopPropagation();
	});
	$('#menu >li').toggle(function(){ // adds toggle to the menu li
		$(this)
		.css('background-position','right -40px') // add css background position
		.find('ul').slideDown();
	}, function(){
		$(this)
		.css('background-position','right top') // add css background position
		.find('ul').slideUp();
	});
});

Back