Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight Menu item of Current Page

    Hello,

    I am new to CSS. I have a menu:

    Item 1 | Item 2 | Item 3 | Item 4 |

    When you click on Item 1 and go to its page, lets say item1.html I would like the link to be a different color or more specifically the background color to be different.

    I have found this guide:
    http://www.456bereastreet.com/archiv...tate_with_css/
    But I did was unable to get it to work.


    My html code for the items links look like:
    <div class="navbar">
    <a href="/emg_systems/ma-300.html" class="navbar"> EMG Systems </a> <IMG SRC="/img/bullettab.gif">
    ……other links…..
    </div>

    As in the guide I found, I tried assigning ID's to a span both before and after the a href's- neither way worked, is it because my a href’s already have a class?



    Just FYI- After I figure this out, I want to make a submenu on each page. So after clicking Item 1 you get:
    Item 1 | Item 2 | Item 3 | Item 4 |
    section a | Section b | section c
    And I want "Item 1" to stay highlighted on all the subpages...

    If there a better way to do this?

    Any help is great!

    Thanks,
    amanda

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add a class to the current link for each page and then change the colour for it.

    ie.

    <li>Link A</li>
    <li class="current">Link B</li>
    <li>Link C</li>
    <li>Link D</li>

    In CSS -

    li.current { color: #HEX }

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No Li's

    Thanks.

    I am not using them as a List, so Li's would not be appropriate.

    I like using Li's in a menu. But the page is set to downgrade to Netscape 3, and using Li's messes up some of my other code.

    I am thinking to just change my links of that page to:
    <a href="kfjgkh" class="current"> It should work the same I assume.

    Still would love any better ideas.

    -Amanda

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup doing that then should work the same way.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Classing/id'ing every link

    The idea behind Roger Johansson's approach is that each link is uniquely identified, either by a class or by an id (which must be unique).

    Through this unique identification and a specific id assigned to the body element of each of the site's pages, it's possible to define a set of style rules that work on every page to highlight the selected menu item without ever looking back.
    This is especially useful when you're including the menu markup from outside the pages, for example using server side includes or server side scripting (dynamic pages).

    If your site features static pages where the markup for the menu is included in every page, the approach suggested by mark87 works just fine.

    Besides this all, I really wonder why you even attempt to support archaic version 3 browsers; I really doubt if anyone still uses one those, and by avoiding modern, more advanced techniques you're hurting more people then you could possibly help.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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