SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Active link

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Active link

    My main menu is just text links taking a class from my external css. I want the link for the page I'm currently on to be highlighted, what's the easiest way of doing this?

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Humm. Most people would just put a class on the link itself or redefine the style on that page. But, personally, I'd go for putting a class on the body or html tag--that way you change the layout of a page easily depending on where you are:
    Code:
    .about #aboutNavLink { /*...*/ }
    .about h1 { /*...*/ }
    .home #homeNavLink { /*...*/ }
    .home h1 { /*...*/}
    Gives you slightly more flexibility on the whole page design, I think. Hope This Helps! :-)

    ~~Ian
    Last edited by Ian Glass; Mar 28, 2003 at 10:11.

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does a little Ian but I only half understand your concept.

    My top menu links are contained in a div called "nav" which looks like this

    .nav {
    background-color : #eeeeee;
    font-family: Verdana, Helvetica;
    font-size: x-small;
    color: #000000;
    margin-left: 18px;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    }

    the menu, header and footer etc are all ASP include files on every page, what do I need to do?

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah...you'll need some server-side coding that checks if the link pertains to the current page, and if so puts it into a class of its own. i'm not an ASP guy, but probably something along the lines of:

    - add a new class to your css, e.g.

    Code:
    .currentlink {
        background: #ffeeee;
    }
    and then your ASP, which is included, should be something like this (note: i don't know ASP, so it's going to be pseudo-code)

    Code:
    <div class="nav">
    <a href="/"<% if (current page = home) print ' class="currentlink"' %>>home</a> |
    <a href="/services/"<% if (current page = services) print ' class="currentlink"' %>>services</a> |
    <a href="/contact/"<% if (current page = contact) print ' class="currentlink"' %>>contact</a>
    </div>
    hope this helps. there's probably more elegant ways of doing this (e.g. keep all the link texts and hrefs in an array, and write the whole navigation out in a loop), but this should give you an initial idea...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Redux, I know some ASP and could write that, I was kinda hoping to avoid writing any such coding but you've probably given me the only solution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •