SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Please help with a:active in a menu, thanks

    Hello,

    I do not want to use lists in my menu, I want a simple text menu like this:

    Code:
    ....
    <style type="text/css">
    #menu1{float:right; display:inline; width:450px; text-align:right; padding:5px 0px 0px 0px;}
    #menu1 a { background:transparent; padding:0px 30px 0px 0px; text-decoration:none; font:normal normal normal 10px arial black;}
    #menu1 a:link {color:#0291CD;}
    #menu1 a:visited {color: #130E76;}
    #menu1 a:hover {color:#0291CD;}
    #menu1 a:active {color: yellow;}
    </style>
    ........
    
    <body>
    ......
        <div id="menu1">
    	  <a href="">Item 1</a>
    	  <a href="">Item 2</a>
    	  <a href="">Item 3</a>
        </div>
    .......
    It works except the
    #menu1 a:active {color: yellow;}

    I see the yellow when I click, but when the pages finish to load, no yellow, it keeps the a:visited color. The a:hover works fine.

    Can somebody help me to find what am I doing wrong with this?

    Thanks a lot
    Regards
    joejac

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a:active is for just that, the color of the link text while the link is actually being clicked.

    You need to assign an active class to the link for the current page:
    Code HTML4Strict:
    <a href="" class="active"... >
    Then in the .css create a class for this:
    Code CSS:
    #menu1 a.active {
     property:value
    }
    Hope it helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Johnny,

    Thanks for your post. In that way, how can the class know when it should be active? All links are yellow now, and they should be only when the URL is in that page. Am I missing something?

    Regards
    joejac

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You only want the active class to appear on the link for the current page, not all of them.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    I use a php script that generates the menu categories and the pages. I guess that implies dynamic modification of the link with the class when it is clicked. I was wondering if there is only a pure css solution that do not imply to modify a php script?. Sorry I am not an expert
    Regards
    joejac

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    "With a little help from my friends" I was able to manage the dynamic change of css class, now is working. Thanks a lot for your advice Johnny.
    Regards
    joejac

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No prob, glad you got it to work, sorry I was not able to help with the dynamic class change.


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
  •