Build a website fast with GoDaddy.com! - 125x125
Jun
27

jQuery Tutorial: Create jQuery and CSS based Awesome navigation.

Author ZeeShaN    Category CSS, JQuery, PHP, Web Development     Tags ,


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 {
 
}

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>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

5 to “jQuery Tutorial: Create jQuery and CSS based Awesome navigation.”

Post comment



Enter your Email:

Click Here for Popular

Who Am I

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Archives

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials curl dreamweaver cs5 Facebook Facebook. PHP. JQuery facebox farmville ffmpeg flv google api hacking image gallery Joomla JQuery jQuery Sliding Jquery tutorial mafia war Mootools MySQL Payment PHP php curl Poll System recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter Web XSS youtube

Comments