SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Europe :-)
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HOW TO - permanent orange color on the currently viewed nav selection...

    At http://www.gospelcom.net/
    You could find "navbar" which is "active" (with orange color) when You are visiting that specific section?

    How could I do that as is on that site...

    I'm talking about the permanent orange color on the currently viewed nav selection (at the top)

    Home or Ministries or Entertainment or My Life or Spiritual Walk or Shopping
    Last edited by japaja; Aug 15, 2003 at 05:44.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    On that site they have defined one class for the current page selected (mainmenuselected) and one for the main menu (mainmenu).

    It's just a matter of putting the appropriate class in each page on the correct link.

    example from their site:
    Code:
    <a href="/" class="mainMenuSelected">Home</a>&nbsp;&nbsp;&nbsp;
    <a href="/ministries/" class="mainMenu">Ministries</a>&nbsp;&nbsp;&nbsp;
    <a href="/entertainment/" class="mainMenu">Entertainment</a>&nbsp;&nbsp;&nbsp;
    <a href="/my_life/" class="mainMenu">My Life </a>&nbsp;&nbsp;&nbsp;
    In your post you have used the same class for each link. Just use the mainmenuselected class for the selected page and then use the mainmenu class for the other links.

    This code lifted directly fromthat site:
    Code:
    /* The main menu colors */
    .mainMenu {
    color: #CCCCFF;
    font-weight: bold;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    }
    .mainMenu:visited {
    color: #CCCCFF;
    }
    .mainMenu:hover {
    color: #FF9933;
    text-decoration: none;
    }
    /* The main menu selected colors */
    .mainMenuSelected {
    color: #FF9933;
    font-weight: bold;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    }
    .mainMenuSelected:visited {
    color: #FF9933;
    }
    .mainMenuSelected:hover {
    color: #cc6600;
    text-decoration: none;
    }
    Hope this helps.

    Paul
    Last edited by Paul O'B; Aug 15, 2003 at 05:52.

  3. #3
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you could just put a specific style in the head that is just and only change the class of the specific link that is the page it is currently on.

    .mainMenuSelected:active {
    color: #etc;
    background: #color;
    (whatever properties you want it to have when it is active)
    }

    That way, the rollover you have still works and everything, just the active state is changed.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Vflytrap,

    With your version you'd have to put the CSS code in the head of every page that has the menu, instead of once in the stylesheet. (Unless I misunderstood you )

    Also I don't think Japaja was talking about the active state of the link (i.e.the colour of the link when the mouse is clicked on it etc) but the normal link that refers to the current page.

    (Although his message was a bit cryptic so I may be wrong anyway. )

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Europe :-)
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :-) cryptic ... yes that who I am

    I'm talking about: .mainMenuSelected item

    ... or to say like this ... about permanent orange links of

    Home or Ministries or Entertainment or My Life or Spiritual Walk or Shopping

    it's (permanent) colored based on page you are visiting...I'm interested in such (my own) pages

    p.s. I'm using PHP and wanted to have pages (with css) as same as at http://www.gospelcom.net/ (navbar)
    Last edited by japaja; Aug 15, 2003 at 05:57.


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
  •