active link

ayok · May 7, 2008

Hi, I've got a question.

Is it possible to create a button or navigation menu that shows the page we are on. For example, we are on "home" page, I want to make that "home" button has different color than others, so we know that we are on "home" page.

I have tried with a:active, but it doesn't work on firefox and the active state change if we click on anywhere. Is it also possible to make the other button, which is also "home" button if we have two "home" buttons on a page. Or I can only do it with php?

Thank you. I hope you understand my question.

ayok

Fadion · May 7, 2008

As u said, a:active will not maintain state even if another link is clicked, so after a refresh u dont even think about it. Dont think there is a pure css approach to this without some php code on the back.

jcombs_31 · May 8, 2008

For an "active" page you need to add a new style. You can use a class or id, so in your stylesheet you might have something like:


a {
  color: #000;
  background-color: #fff
}

a#active {
  color: #fff;
  background-color: #000;
}

If you are using a list for your menu you may have something like


<ul>
  <li><a href='#' id='active'>Home</a></li>
  <li><a href='#'>Another Page</a></li>
</ul>

From here you can see that the "home" link is marked by the active id. Now you can either hard code this into each page or if are including your menu you will have to add a little logic with php, but this should give you the idea of how people mark active pages.

ayok · May 8, 2008

aah.. i c what you mean..

Thanks for the trick.

ayok

TheFilmGod · May 9, 2008

<div id="nav">

<ul>
  <li id="active"><a href="#">Homepage</a></li>
  <li><a href="#"></a></li>
</ul>

</div>

#nav ul li#active {
  code....
}

The reason this way is better than the other provided example is that you stress the importance of the "active" link to be connected with <li></li> instead of <a>. It's also a lot easier to read and understand.

ayok · May 9, 2008

Hi God,

I've tried to do

#nav ul li#active {
  code....
}
<li id="active">

but it doesn't work.

#nav ul li a#active {
  code....
}<a id="active">

is working..

Why is that?

GameYin · May 9, 2008

You declared it wrong. Also make sure you close your style tag..? I assume you did it.... #nav ul li #active. There

jcombs_31 · May 9, 2008

<div id="nav">

<ul>
  <li id="active"><a href="#">Homepage</a></li>
  <li><a href="#"></a></li>
</ul>

</div>

#nav ul li#active {
  code....
}
The reason this way is better than the other provided example is that you stress the importance of the "active" link to be connected with <li></li> instead of <a>. It's also a lot easier to read and understand.

On the contrary, you're styling the link, not the list item. The link style is what changes onrollover, active, etc and should be the item that is styled for consistency.

As far as being easier to read and understand, that is up for debate, in the end it is all about the result.

bronzemonkey · May 10, 2008

I agree with FilmGod. Better to put the class on the list item that is the parent of the link...rather than the link. It means you can also style the list item if needed, which it often is.

I also avoid using a class of "active" because there is already a css pseudo-class :active - a current page state is distinctly different from a link being active.

<!-- html -->
<ul id="nav">
  <li><a href="#"></a></li>
  <li class="current"><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

/* css */
#nav li.current a {}

You can also use purely css to produce current-page styles (I wouldn't use this technique on a large site though). Just give the body a page-specific id and each list item of the nav an id (or class)

<body id="home">
  <ul id="nav">
    <li id="navHome"><a href="#">Home</a></li>
    <li id="navAbout"><a href="#">About</a></li>
    <li id="navBlog"><a href="#">Blog</a></li>
    <li id="navContact"><a href="#">Contact</a></li>
  </ul>
</body>

/* css */

#nav li a {font-weight:normal; color:#000; background:#fff;}

#home #navHome a,
#about #navAbout a,
#blog #navBlog a,
#contact #navContact a {font-weight:bold; color:#fff; background:#000;}

TheFilmGod · May 10, 2008

Hey Ayok. I copied and pasted some code that I have on my website. Feel free to change/edit the code as much as you want. The active link is colored gray. It also has some nice hover effects. Make sure you name the css file as master.css.

HTML: call the file index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<style type="text/css">
  			@import url("master.css");
	</style>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Navigation Test Page - TheFilmGod is AWESOME!</title>

</head>	

<body>
	<div id="nav">
			<ul>
				<li id="active"><a href="#">Home</a></li>
				<li><a href="#">Page1</a></li>
				<li><a href="#">Page2</a></li>
				<li><a href="#">Page3</a></li>
				<li class="last"><a href="#">Page4</a></li>
			</ul>
		</div>
</body>
</html>

CSS: call the file master.css

#nav ul {
margin: 0 0 0 70px;
padding: 0;
}
#nav li {
list-style: none;
margin: 0 20px 0 0;
display: block;
width: 95px;
height: 25px;
float: left;
font: 14px/25px arial, sans-serif;
font-weight: bold;
text-align: center;
}
#nav li.last {
margin: 0;
}
#nav a {
display: block;
width: 95px;
height: 25px;
color: #fff;
background: url(layout/nav.png) no-repeat #424242;
}
#nav a:hover {
text-decoration: none;
background: url(layout/nav_hov.png) no-repeat #835d31;
}
#nav li#active a {
color: #000;
background: url(layout/nav_act.png) no-repeat #e1e1e1;
}

Sign In

active link

Recommended Posts

ayok

Link to comment

Share on other sites

Fadion

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

ayok

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

ayok

Link to comment

Share on other sites

GameYin

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information