Menus and Tabs

Example 1 : basic menu

In the first example, the mouse will enable a hover event that will trigger the menu to fade in.

The jQuery

$(document).ready(function(){ // new anonymous function
	$('#menu > li > ul').hide();//hide all u;'s under the parent li
	$('#menu > li').hover(function() {//create a hover effect
	      $(this).find('ul').stop(true,true).fadeIn('slow');//fade in if hovered
			}, function() {//end 
	 $(this).find('ul').stop(true,true).fadeOut('slow');//fadeout  when mouse leaves
   });//end hover function
});//close anonymous function

The Html

<ul id="menu">
    <li><a href="#">First Level</a>
        <ul class="active">
            <li><a href="#">Second Level</a></li>
             <li><a href="#">Second Level</a></li>
              <li><a href="#">Second Level</a></li>
               <li><a href="#">Second Level</a></li>
                <li><a href="#">Second Level</a></li>
        </ul>
    </li>
 </ul>

The CSS

#menu { 
  width:200px;
  font-family:Arial; 
  position:relative;
 
 }
 
 #menu ul {
 position:absolute;
 }

#menu, #menu ul{
  list-style: none;
  padding:5px 0 0px 0;
 
 }

#menu li { 
  cursor:pointer;
  background:#FF0;
  border-bottom:1px dashed #000;
   padding:5px 0 5px 10px;
 
}

#menu li a {
  text-decoration: none;
}

#menu>li>a { 
  padding:10px;
  font-weight:bold;
}

#menu li li{
  width:190px; 
  cursor:auto;
  padding:5px 0 5px 10px;
  background-color:#ff0;
  border-bottom:1px dashed #000;
  margin:0 0 0 -10px;
}

The working Code

When passing the mouse over the first tier item, the menu will fade in and show the links, once the mouse passes out of the menu area the menu will will fade out.

Example 2 : Tabs

The second bit of code will create a tabs like illusion

The jQuery

 //tabs
$(document).ready(function(){//start anonymous function
  $( '#tab_content p:not(:first)' ).hide();//hide all paragraph tags in tab_content that aren't first
    $('#tab_display li').click(function(e) {//create click function
    $('#tab_content p').hide();// on click current tab
    $('#tab_display .current').removeClass("current");//remove class current from the tab
    $(this).addClass('current');//add current to clicked tab
    
    var clicked = $(this).find('a:first').attr('href');//create new variable to find selected tab
    $('#tab_content ' + clicked).fadeIn('fast');//selected tab clicked fade in
    e.preventDefault();//prevent defualt tab from loading on click
  }).eq(0).addClass('current');//add class current
});//close fucntion

The CSS

#tab_display {
    margin: 0 0 0 -40px;
}

#tab_display li {
	display:inline;
	padding:10px;
	width:98px;
	margin:0px;
	background-color:#000;
	border-top:#FF0 dashed 1px;
    border-left:#FF0 dashed 1px;
    border-right:#FF0 dashed 1px;
}
	
#tab_display li a{
    font-family:arial;
    font-size:14px;
    width:100px;
    height:40px;
    padding:10px;
    color:#FFF;
}

#tab_display li.current {
    background-color:#FF0;
	border-top:#000 dashed 1px;
    border-left:#000 dashed 1px;
    border-right:#000 dashed 1px;
    margin: 0 0 0 0px; 
}

#tab_display li.current a{
    font-family:arial;
    font-size:14px;
    width:100px;
    height:40px;
    padding:10px;
    color:#000;
}

#tab_content {
    background-color:#FF0;
    margin:10px 0 0 0;
    padding:10px;
    border-bottom:#000 dashed 1px;
    border-left:#000 dashed 1px;
    border-right:#000 dashed 1px;
    border-top:#000 dashed 1px;
}

#tab_content p {
    color:#000;
    margin:20px;
}

The HTML

       <ul id="tab_display">
        <li><a href="#tab_one">Tab One</a></li>
        <li><a href="#tab_two">Tab Two</a></li>
        <li><a href="#tab_three">Tab Three</a></li>
      </ul>
      <div id="tab_content">
  			<p id="tab_one">
  				tab one	
  			</p>
        <p id="tab_two">
          tab Two
        </p>
  			<p id="tab_three">
  				tab Three
  			</p>
      </div> 
 

The Working Code

Below is a functioning tab selection menu using jQuery.

tab one

tab Two

tab Three