Project Avant Facebook Page Project Avant Twitter Page

tutorial #4: Menu Tabs

Tabs can help organize content on the webpage, and make better UI. Here, we will use a menu as a demonstration.

In this demonstration, you will learn how to make a menu with tabs. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you learn elements needed to create menu tabs in HTML and CSS.

Below is demonstration of menu tabs. Click on each tab and you see the content change.

The How-To

HTML

                 
<ul id="menu-tabs">
<li><a href="#jquery-tab">jQuery</a></li>
<li><a href="#html5">HTML5</a></li>
<li><a href="#css3">CSS3</a></li>
<li><a href="#php">PHP</a></li>
<li><a href="#worpress">WordPress</a></li>
</ul>

<div id="menu">

<p id="jquery-tab"><b>jQuery</b> is a diverse and compressed library of JavaScript.
jQuery has a wide range of features that are used to enhance HTML/CSS
animated effects,compatible on all web browsers, and user interface controls
like the example in this demonstration.</p>


<p id="html5"><b>PHP Hypertext Preprocessor</b> is a scripting language that
is implemented on web servers. PHP allows easier web development for vital components
such as dynamic content, database, and user control.</p>


<p id="css3"><b>HTML5</b> is the latest version of HyperText Markup Language.
HTML5 offers new distinct tags, multimedia content…etc.</p>


<p id="php"><b>CSS3</b> is the latest version of Cascading Style Sheets.
CSS3 uses advanced selectors, as well as animation transformations, transitions…etc.</p>

<p id="worpress"><b>WordPress</b> is an open-sourced software that
 uses templates, plugins,and widgets.</p>

</div>

CSS


#menu {
	
	border:#155a7a thin solid;
	padding:20px;
}

#menu-tabs{
	margin: 0 auto;
	padding: 6px 0;
	width: 100%;
	list-style: none;
}
#menu-tabs a {
	color:#FFFFFF;
}

#menu-tabs li{
	display: inline;
	background: #155a7a;
	border:#155a7a thin solid ;
	border-bottom: 0;
	margin-right:2px;
	padding: 10px;
}

jQuery

                
                
$(document).ready(function(){//The document is ready.
  $('#menu p:not(:first)').hide();//Hides all the p tags in the div with the "menu" attribute.
  
  $('#menu-tabs li').click(function(event) {//Assigns a click function to all tabs.
    event.preventDefault();//Prevents the default functions of a tags.
    $('#menu p').hide();//Hides the p tags.
    $('#menu-tabs .current').removeClass("current");
    $(this).addClass('current');//Adds the class of 'current'
    
    var clicked = $(this).find('a:first').attr('href');//Finds the a tag and gets the href
    $('#menu ' + clicked).fadeIn('fast');
  }).eq(0).addClass('current');//Moves the selector to the first tab
});//Close.