jQuery Tutorial: Create jQuery and CSS based Awesome navigation.

Author: Zeeshan Rasool | Last updated on July 1st, 2010

CSS, JQuery, PHP, Web Development

[ad#co-4]

If you have less space on site home page and you need a simple but awesome jquery based navigation then you came in right place. I got this idea from learning jquery and stylized my navigation using CSS.

CSS

.button, .button:visited {
	background: #222 url(overlay.png) repeat-x;
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}
/*  TAB MENUE  */
.tab-nav {
	width: 1000px;
	margin-top:0px;
	overflow: hidden;
	float:right;
	}

.tab-nav ul {
  width: 2900px;
  margin-left: 960px; 
  padding-left: 0;
  margin-top:0px;
  list-style-type: none;
}
.tab-nav li { 
  float: left;
  margin-top:3px;
  clear: left; 
}

.tab-nav a.Arrow {
  display: block;
  width: 40px;
  height: 33px;
  float: left;
  background:url(dash_img.gif) top left no-repeat;
  text-align: center;
  text-decoration: none;
}
.tab-nav a.expanded {

}

.button, .button:visited {

background: #222 url(overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

position: relative;

cursor: pointer

}

/* TAB MENUE */

.tab-nav {

width: 1000px;

margin-top:0px;

overflow: hidden;

float:right;

}

.tab-nav ul {

width: 2900px;

margin-left: 960px;

padding-left: 0;

margin-top:0px;

list-style-type: none;

}

.tab-nav li {

float: left;

margin-top:3px;

clear: left;

}

.tab-nav a.Arrow {

display: block;

width: 40px;

height: 33px;

float: left;

background:url(dash_img.gif) top left no-repeat;

text-align: center;

text-decoration: none;

}

.tab-nav a.expanded {

}

[ad#co-2]

HTML

<div id="tab-nav-3" class="tab-nav">
  <ul>
	<li>
	  <a href="#" class="Arrow">&nbsp;</a>
	  <ul>
		<li>
		<div align="right" style="float:right; margin-right:7px;"> 
		<span>
			<a href="http://www.99points.info/" class="small button TabAddNew">
				99 Points
			</a>
		</span>	
		</div>
		</li>

		<li>
		<div align="right" style="float:right; margin-right:7px;"> 
		<span>
			<a href="http://www.99points.info/" class="small button TabAddNew">
			  PHP
			</a>
		</span>	
		</div>
		</li>
		
		<li>
		<div align="right" style="float:right; margin-right:7px;"> 
		<span>
			<a href="http://www.99points.info/" class="small button TabAddNew">
				jQuery
			</a>
		</span>	
		</div>

		</li>
		<li>
		<div align="right" style="float:right; margin-right:7px;"> 
		<span>
			<a href="http://www.99points.info/" class="small button TabAddNew">
				Codeigniter
			</a>
		</span>	
		</div>

		</li>
		
		<li>
		<div align="right" style="float:right; margin-right:7px;"> 
		<span>
			<a href="http://www.99points.info/" class="small button TabAddNew">
				Tutorials
			</a>
		</span>	
		</div>

		</li>
	  </ul>
	</li>
	
  </ul>
</div>

<ul>

<li>

<ul>

<li>

<span>

99 Points

</a>

</span>

</div>

</li>

<li>

<span>

PHP

</a>

</span>

</div>

</li>

<li>

<span>

jQuery

</a>

</span>

</div>

</li>

<li>

<span>

Codeigniter

</a>

</span>

</div>

</li>

<li>

<span>

Tutorials

</a>

</span>

</div>

</li>

</ul>

</li>

</ul>

</div>

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com