Highlighting Current Menu / Css

Greetings. First, i must say that this is really great programming forum i discovered with google. Secondly i'am apologizing if i will spell something wrong in english, since it is not my first language.

I'am currently dealing with css problem. I was already searching the internet for this problem and i found it but i don't manage to work it. ok so my problem is quite simple to say:

i would like to highlight the current menu on webpage, the guest is on. for instance: [icode]Home | Gallery | About us | Contact us |[/icode], and currently iam on about us page, and this page is highlighted ( depends on my css of course )

ok so this is my html:
<div id="menu">
    	<ul>
        	<li><a  href="index.html">Home</a></li>
              <li><a href="gallery.html">Gallery</a></li>
            <li><a href="about-us.html">About us</a></li>
            <li> <a href="contact-us.html">Contact us</a></li>
        
        </ul>

i was already watching one of Lynda css videos and the guy created: [icode]<li><a href="index.html" class="current">Home</a></li>[/icode] and he targeted this class in css like: [icode]#menu li a.current {code}[/icode] but i cant manage to work.

Thank you all for your time and answers...appriciate it :)

Comments

  • what i understand that u want to highlight something when the mouse is over it...
    for ur example it's so simple ... u can use this stylesheet :
    #menu a:hover{
    background-color:black;
    color:white;
    	
    }
    
    
  • You need to add [icode]current[/icode] to the class of the [icode]a[/icode] tag in question:
    <li><a class="current" href="index.html">Home</a></li>
    
  • FiRaS wrote:
    what i understand that u want to highlight something when the mouse is over it...
    for ur example it's so simple ... u can use this stylesheet :
    #menu a:hover{
    background-color:black;
    color:white;
    	
    }
    
    

    No, you didnt understand me. ok let me show you an example. see this menu:

    menu1p.jpg

    here is home highlighted because it is active and someone is just visiting "home" page.

    menu2o.jpg

    Here you can see, that visitor has clicked "forums" and forums menu is highlighted - and active..

    @titaniumdecoy. I already tried that but then when call class id in css ( a.current ) and when i load the page it is highlighted all the time. And if i click somewhere else, other menu is not highlighted.
  • i didn't c the picture...because it didn't appear...but i understood that u want the links to be highlighted after first visit...

    try this.. :
    #menu a:visited{
    background-color:black;
    color:white;
    	
    }
    
    

    is this what u mean?? or if not... give me other links .. :)
  • Normally, when you click a link, it loads another page. Each page should have the [icode]current[/icode] class on the correct [icode]a[/icode] tag. It looks to me like this is what you really want to do since your links point to pages like "index.html", "gallery.html", etc.

    If you are, in fact, loading your page's content inline via JavaScript (which I doubt), you will also have to use JavaScript to change the selected tag:
    <html>
    <head>
    <style type="text/css">
    #menu li a.current {
        background-color:black;
        color:white;  
    }
    </style>
    <script type="text/javascript">
    function highlight_link(link) {
        var menu_links = document.getElementById("menu").getElementsByTagName("a");
        for (var i = 0; i < menu_links.length; ++i) {
            menu_links[i].className = (menu_links[i] == link) ? "current" : "";
        }
    }
    </script>
    </head>
    <body>
    <div id="menu">
    <ul>
        <li><a onclick="highlight_link(this);return false;" href="index.html">Home</a></li>
        <li><a onclick="highlight_link(this);return false;" href="gallery.html">Gallery</a></li>
        <li><a onclick="highlight_link(this);return false;" href="about-us.html">About us</a></li>
        <li><a onclick="highlight_link(this);return false;" href="contact-us.html">Contact us</a></li>
    </ul>
    </body>
    </html>
    
  • thank you titaniumdecoy. you helped me =)
Sign In or Register to comment.