How to deactivate current page link??

Discussion in 'HTML & Website Design' started by shajimanjeri, Nov 15, 2006.

0
  1. #1
    Hi all,

    Is there is any way to deactivate the current page link in CSS

    I mean I have 3 link in my website. Home, AboutUs, Contact.

    If I am in the home page, I need to deactivate the link for Home but the link for AboutUs and ContactUs will be active.
    at same way, if I am in AboutUs page, I need to deactivate link for AboutUs
    but the link for Home and ContactUs will be active.

    Anybody can help me to do this in css.

    All are appreciate
    With regards
    shaji :)
     
    shajimanjeri, Nov 15, 2006 IP
  2. M57

    M57 Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    CSS can't detect which page the user is viewing. You need a either a server-side language (PHP, ASP..etc) or JavaScript with CSS to accomplish this. :)
     
    M57, Nov 15, 2006 IP
  3. shajimanjeri

    shajimanjeri Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok,
    Then can you tell me how to it by using Javascript and css.
    or any other way??


    Regards
    shaji:)


     
    shajimanjeri, Nov 15, 2006 IP
  4. shajimanjeri

    shajimanjeri Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok, Thanx

    Then can you tell me how to do it by using Javascript and css.
    or any other way??


    Regards
    shaji:)


     
    shajimanjeri, Nov 15, 2006 IP
  5. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #5
    Not true. Use id's.

    Look at the source of www.monochromedia.com/index.html:
    <body [COLOR="Red"]id="home"[/COLOR] class="body">
    Code (markup):
    This tells the page which id it's on.

    li><a href="index.html" [COLOR="Red"]id="menu-home"[/COLOR]>Home</a></li>
<li><a href="design.html" id="menu-design">Design</a></li>
<li><a href="feedback.html" id="menu-feedback">Feedback</a></li>
<li><a href="clients.html" id="menu-clients">Clients</a></li>
<li><a href="faq.html" id="menu-faq">FAQ</a></li>
<li><a href="weblog.html" id="menu-weblog">Weblog</a></li>
<li class="bottom"><a href="contact.html" id="menu-contact">Contact</a></li>
    Code (markup):
    This tells the menu which id to assign to each link. Finally, we go to the CSS:

    [COLOR="red"]body#home a#menu-home[/COLOR], body#design a#menu-design, body#feedback a#menu-feedback, body#clients a#menu-clients, body#faq a#menu-faq, body#weblog a#menu-weblog{
background-image: url(http://www.monochromedia.com/images/2b.gif);
}

body#contact a#menu-contact{
background-image: url(http://www.monochromedia.com/images/3b.gif);
}
    Code (markup):
    As far as deactivating the other links, I don't know. This will, however, allow you to style them accordingly.

    For more information, try this site: http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css.
    Or this one: www.google.com.

    Enjoy!

    -Peter
     
    dp-user-1, Nov 15, 2006 IP
  6. M57

    M57 Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You'll use id's to tell CSS which link to decativiate (visually), but there's no way CSS can tell which page the user is viewing. Your site is using a server-side language to insert an ID for the current page.

    shaji, if you show me the site you're trying to implement this in, i might make a small javascript script for you to take care of it. :)
     
    M57, Nov 15, 2006 IP
  7. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #7

    Sorry, misread the question - but after I had finished that long post, I didn't want to delete it. Hence:
    :p
     
    dp-user-1, Nov 15, 2006 IP