Resolved How to make an active tab in nth-child css? [Archive]

...

View Full Version : Resolved How to make an active tab in nth-child css?

unleash

07-18-2011, 06:40 PM

Hello,

I am using the following codes for making a navigation bar!

<div id="top"> -- This ID is basically a navigation bar

<ul class="topnav">
<li class="first">Home</li> ----- This Css Makes my Home as active tab always.
<li> About </li> ---- This is others tabs which I want to make it active when someone click on it not visited but active when someone opens a page!
</ul>
</div>

Please help me to make other tabs active!

Testing Link! (www.t-clicks.com/test)

/* top navigation */
.topnav { z-index:99; margin:0px; padding:1px 0px; list-style:none; line-height:1; }

.topnav a { z-index:100; position:relative; display:block; text-decoration:none; }

.topnav li { float:left; width:auto; }

.topnav li a { padding:7px 13px 6px 13px; font-size:11px; font-weight:bold; color:#1e598e; line-height:18px; text-transform:uppercase; text-decoration:none; }

.topnav li a:hover, .topnav li a:active { background:#ffffff; color:#000000; text-decoration:none; }

.topnav li.first a { background:#FFFFFF; color:#000000; border-top: 2px solid red; }

.topnav .first { background-color: #FFFFFF; color: #FFFFFF; }

.topnav li ul li a, .topnav li ul li a:visited { background:#fff; width:140px; padding:7px 13px 6px 13px; color:#26b; font-size:11px; font-weight:bold; border-bottom:none; text-transform:uppercase; }

/* topnav indicator */
.topnav .sf-sub-indicator { display:none; }
.topnav li ul .sf-sub-indicator { background:url(images/icon-arrow-right.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }

ul.topnav li{
background:transparent;
}
ul.topnav li a{
border-top:2px solid transparent;
}
ul.topnav li a:hover {
background:white; color:blue;
}

ul.topnav li:nth-child(1) a:hover {

border-top: 2px solid red;
}
ul.topnav li:nth-child(2) a:hover {

border-top: 2px solid blue;
}
ul.topnav li:nth-child(3) a:hover{

border-top: 2px solid green;
}
ul.topnav li:nth-child(4) a:hover{

border-top: 2px solid yellow;
}

Apostropartheid

07-18-2011, 06:48 PM

Your class shouldn't be "first", it should be "active" or "selected".

Simply add this class to the tab that the page is on.

unleash

07-18-2011, 06:50 PM

YOu mean like this?

<li class="select"> Home </li>
<li> About Us</li>

unleash

07-18-2011, 07:54 PM

I tried both none of them working!

I have made this code myself and I suspect that some are duplicate so please check the code as well there was no mistakes in it!

Apostropartheid

07-18-2011, 10:13 PM

Okay have a look at this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
html {
font-family: verdana, sans-serif;
font-size: .825em;
}
nav ul {
margin: 2em;
list-style: none;
}
nav li {
float: left;
border: #ddd solid;
border-width: 1px 1px 1px 0;
}
nav li:first-child {
border-left-width: 1px;
}
nav li:hover {
background: #39f;
}
nav a {
padding: .5em 1em;
display: block;
text-decoration: none;
color: #06c;
}
nav li:hover a {
color: #fff;
}
nav .selected {
background: #06c;
}
nav .selected a {
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="selected"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>

Now change the LI which has the class #selected. See how it works? All you have to do is which LI has that class and your navigation changes.

unleash

07-18-2011, 11:10 PM

No Not working!

unleash

07-18-2011, 11:57 PM

I fixed It, thanks :) How Can I marked this resolve!

Chris Hick

07-19-2011, 06:25 AM

Unleash, just edit your opening post then click go advanced. Next, just use the prefix dropdown menu to select Resolved. ^_^

unleash

07-19-2011, 10:31 AM

Thanks :)