• Client-side
    • Add Me!Close Menu Navigation
    Add Me!Open Categories Menu
  • Client-side

    • Pure CSS & XHTML tabs

    Across-browser approach for tab-based navigation using unordered lists. The code is just a foundation, and can be further extended with custom design. Credits are due to Joshua Kaufman who provided me with the base to start with.

    I ended up with making the following modifications to his code:

    • I converted the id based approach to a class based approach, since I needed multiple tab navigations on a single page.
    • Removed the need of having to wrap the active tab in a anchor tag
    • Updated the mouse cursor styles

    First you need to set up the following HTML markup.

    <ul class="tabnav">
	<li class="activetab"><span>Home</span></li>
	<li><a href="">About</a></li>
	<li><a href="">Contact</a></li>
</ul>

    And then the following CSS should be applied to it.

    ul.tabnav { /* general settings */
	text-align: left; /* set to left, right or center */
	font-size:14px;
	border-bottom: 1px solid #8FC400; /* set border COLOR as desired */
	list-style-type: none;
	padding: 3px 0px 1px 10px; /* THIRD number must change with respect to padding-top (X) below */
	margin-right: 0px;
	cursor:default;
}

ul.tabnav li { /* do not change */
	display: inline;
}

li.activetab { /* settings for selected tab */
	border-bottom: 1px solid #fff; /* set border color to page background color */
	background-color: #8FC400; /* set background color to match above border color */
}

ul.tabnav li.activetab a, ul.tabnav li.activetab span { /* settings for selected tab link */
	background-color: #8FC400;
	color: #fff;
	position: relative;
	top: 1px;
	padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.tabnav li a, ul.tabnav li span { /* settings for all tab links */
	padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
	border: 1px solid #8FC400; /* set border COLOR as desired; usually matches border color specified in #tabnav */
	background-color: #fff; /* set unselected tab background color as desired */
	color: #666; /* set unselected tab link color as desired */
	margin-right: 0px; /* set additional spacing between tabs as desired */
	text-decoration: none;
	border-bottom: none;

}

ul.tabnav a:hover { /* settings for hover effect */
	background: #8FC400; /* set desired hover color */
	color:#fff;
	cursor:pointer;
}
    Posted By Shahways Romani

    Developer working on both the front & back-end side of the web. Consulting attitude, with an eye for marketing. Loves fresh coffee, and a good game of poker.

    Leave a Reply