Orange Navbar TAB
Mod Version: 1.00, by Limode
| vB Version: 3.8.x | Rating:  (1 vote - 5.00 average) |
Installs: 18 |
| Released: 14 May 2009 | Last Update: Never | Downloads: 171 |
 Not Supported
 Template Edits
|
||
This is a navbar tab base CSS
Demo see screenshot
Install :
Upload images to /images/ folder
Additional CSS Definitions Add :
Add to navbar template or any where you need.
Navigation / Breadcrumb Templates / navbar
Very above find <br /> and add under
Demo see screenshot
Install :
Upload images to /images/ folder
Additional CSS Definitions Add :
Code:
ul.newsnav {
float:left;
clear:both;
margin:0;
padding:0;
width:840px;
}
ul.newsnav li {
float:left;
height:27px;
list-style-type:none;
display:inline;
font-size:12px;
margin-right:1px;
padding-top:12px;
}
ul.newsnav li.inorange {
height:27px;
width:auto;
padding:0 4px 0 0;
background:url(images/tabright.png) bottom right no-repeat;
text-transform:uppercase;
color:#fff;
margin-top:12px;
}
ul.newsnav li.inorange span {
float:left;
height:21px;
width:auto;
padding:6px 15px 0 20px;
background:url(images/tableft.png) bottom left no-repeat;
}
ul.newsnav li a {
float:left;
height:27px;
width:auto;
padding:0 4px 0 0;
background:url(images/tabright.png) top right no-repeat;
display:block;
text-transform:uppercase;
color:#2b6d9f;
text-decoration:none;
}
ul.newsnav li a span {
float:left;
height:21px;
width:auto;
padding:6px 16px 0 20px;
background:url(images/tableft.png) top left no-repeat;
cursor:pointer;
display:block;
}
ul.newsnav li a:hover {
background-position:bottom right;
color:#fff;
}
ul.newsnav li a:hover span {
background-position:bottom left;
color:#fff;
}
Navigation / Breadcrumb Templates / navbar
Very above find <br /> and add under
Code:
<!-- New Navbar --> <div align="center"> <ul class="newsnav"> <li class="inorange"><span>Home</span></li> <li><a href="#"><span>News</span></a></li> <li><a href="#"><span>People</span></a></li> <li><a href="#"><span>Social</span></a></li> <li><a href="#"><span>About us</span></a></li> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Orange TAB</span></a></li> </ul> </div> <!-- / New Navbar -->
Download
inorange.zip (4.2 KB, 198 downloads)
Screenshots
