CODEWITHSUNDEEP
phphtmlcssmenu
MstrQKN
MstrQKN

Reputation: 834

How to make a link stay active in CSS?

Basically I want the hover-look of a link stay active when you're on that site. I hope I'm explaining this right. There's supposed to be a background behind the link when you're visiting that specific page.

Here's the code for the html:

<div class="menudiv">
<div id="menu">
    <ul id="menu">
      <li><a href="?p=start"><span>Hem</span></a></li>
      <li><a href="?p=omoss"><span>Om oss</span></a></li>
      <li><a href="?p=tjanster"><span>Tjänster</span></a></li>
      <li><a href="?p=referenser"><span>Referenser</span></a></li>
      <li><a href="?p=kontakt"><span> Kontakt</span></a></li>
    </ul>
  <div class="clr"></div>
  </div>
  </div>

And here's the css:

#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}

Upvotes: 0

Views: 7074

Answers (4)

Maai
Maai

Reputation: 369

What you basically need is to add a css class to the a tag in your menu. example: 

<li><a href="?p=start" class="currentPage"><span>Hem</span></a></li>

add styling to your currenPage class as per the designs you want for that menu item

now, your page should be dynamic for you to be able to set the currenPage css class to the current menu item where the user is currently viewing

example:

<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>

Upvotes: 0

echo_Me
echo_Me

Reputation: 37233

you are giving same id :

  <div id="menu">
     <ul id="menu">

which is wrong

you should make ids different.

Upvotes: 0

olend
olend

Reputation: 1

As much I know the hover property should put last in CSS (below the active and others) in order to work properly.

Upvotes: 0

SLaks
SLaks

Reputation: 887285

Add a CSS class for the that link (eg, <a class="CurrentPage">), then apply the selector to that class (eg, #menu ul li a:active, a.CurrentPage)

Upvotes: 6

Related Questions