Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    mbe is offline
    New to the CF scene
    Join Date
    Jun 2010
    Thanked 0 Times in 0 Posts

    How to highlight current page on menu tab?


    I've been searching on ways on how to highlight the current page on my menu tab if you use images for your menu links.

    I used a different hover image, and would like to keep the hover image if they are on that current page.

    Any tips would be much appreciated! Thanks!

    Here's the site: http://www.stubborneve.com

    Here's my code for the menu:

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide from older browsers

    var first_off = new Image();
    first_off.src = "{{ 'hometab.jpg' | asset_url }}";
    var first_on = new Image();
    first_on.src = "{{ 'homehover.jpg' | asset_url }}";

    var second_off = new Image();
    second_off.src = "{{ 'publictab.jpg' | asset_url }}";
    var second_on = new Image();
    second_on.src = "{{ 'publichover.jpg' | asset_url }}";

    var third_off = new Image();
    third_off.src = "{{ 'promotab.jpg' | asset_url }}";
    var third_on = new Image();
    third_on.src = "{{ 'promohover.jpg' | asset_url }}";

    var fourth_off = new Image();
    fourth_off.src = "{{ 'hertab.jpg' | asset_url }}";
    var fourth_on = new Image();
    fourth_on.src = "{{ 'herhover.jpg' | asset_url }}";

    var fifth_off = new Image();
    fifth_off.src = "{{ 'helptab.jpg' | asset_url }}";
    var fifth_on = new Image();
    fifth_on.src = "{{ 'helphover.jpg' | asset_url }}";

    var sixth_off = new Image();
    sixth_off.src = "{{ 'carttab.jpg' | asset_url }}";
    var sixth_on = new Image();
    sixth_on.src = "{{ 'carthover.jpg' | asset_url }}";

    function activate(imgName) {
    if ( eval(imgName + "_on.complete") ) {
    document.images[imgName].src = eval(imgName + "_on.src");

    function deactivate(imgName) {
    if ( eval(imgName + "_off.complete") ) {
    document.images[imgName].src = eval(imgName + "_off.src");

    // End script hiding -->

    <div id="menu">
    <A HREF="/" title="Go to frontpage" onMouseOver="activate('first')" onMouseOut="deactivate('first')"><IMG SRC="{{ 'hometab.jpg' | asset_url }}" BORDER="0" NAME="first" alt="HOME"></A>
    <A HREF="/blogs/publiccity" title="Press & Media" onMouseOver="activate('second')" onMouseOut="deactivate('second')"><IMG SRC="{{ 'publictab.jpg' | asset_url }}" BORDER="0" NAME="second" alt="PUBLIC CITY"></A>
    <A HREF="/blogs/promo" title="Promos & Offers" onMouseOver="activate('third')" onMouseOut="deactivate('third')"><IMG SRC="{{ 'promotab.jpg' | asset_url }}" BORDER="0" NAME="third" alt="PROMO"></A>
    <A HREF="/pages/herstory" title="Know more about Stubborn Eve" onMouseOver="activate('fourth')" onMouseOut="deactivate('fourth')"><IMG SRC="{{ 'hertab.jpg' | asset_url }}" BORDER="0" NAME="fourth" alt="HER STORY"></A>
    <A HREF="/pages/help" title="Shopping Guidelines" onMouseOver="activate('fifth')" onMouseOut="deactivate('fifth')"><IMG SRC="{{ 'helptab.jpg' | asset_url }}" BORDER="0" NAME="fifth" alt="HOW TO ORDER"></A>
    <A HREF="/cart" title="View Your Selected Items" onMouseOver="activate('sixth')" onMouseOut="deactivate('sixth')"><IMG SRC="{{ 'carttab.jpg' | asset_url }}" BORDER="0" NAME="sixth" alt="YOUR SHOPPING BAG"></A></h2>

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Thanked 79 Times in 77 Posts
    Can't you use 3-images for the menu? One image for the page you are on can be called for that page only with the common mouseon image. It can be made to be highly different from the others to show it has been selected. I used that scheme on some pages along with a preloader, but you have lots of coding and keeping track of which image goes where. Naming them so you can recognize which is which is a must.
    ☠ ☠RON☠ ☠

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Thanked 1 Time in 1 Post
    Well its pretty simple.

    Add an id to the current page link(you can do that manually while creating the page) called #active and style that id in css as same as hover.

    Also if you want to make the current page link disable, so it is not clickable.

    Here's the css code
    #active { pointer-events: none; cursor: default; background: same as hover image; }

    Just make sure the specificity of #active is more than the hover class
    Last edited by wp-coder; 07-08-2010 at 09:47 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,224 Times in 2,211 Posts
    Here's my code for the menu:
    Using javascript to make the hover/rollover effect is not a good practice as it won't do anything for users who have no js support in their browser or who've blocked js. I'd recommend to use a CSS based one instead. Look into http://www.google.com/search?q=css+image+rollover+menu (and it'll be easier to "show" the selected item using CSS than js )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Burford, Oxfordshire, United Kingdom
    Thanked 39 Times in 39 Posts
    As abduraooft suggests use CSS instead of javascript for your hover/rollover effect.

    As wp-coder you can mark your current page in the menu with an id of say "active".

    However I would advise against doing this manually - it will be a maintenance nightmare.

    The best ways of writing different code for your current page (be it id="active" or any other method) is to use a server side script (such as PHP) or an html pre-processor (such as PPWizard).

    A second best would be to use Javascript. Set up a standard menu to use on all pages. The standard menu will work on all pages, it just won't distinguish the current page from any other. Use Javascript to loop through the links in the menu and check if the link is to the current page, if so modify. The enhanced menu will be shown to the majority who have Javascript enabled, and a workable menu will be shown to the minority who do not.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Blackfield UK
    Thanked 36 Times in 36 Posts
    You could try this method, I user a similar method but without images here:
    www.filthybeast.co.uk Don't worry about the name, it is an old rock band.

    I'm sure I originally picked up the code on this forum but a quick search couldn't find it.

    First give each page's body an ID

    {whatever your code for body was goes here}

    Then create a state to highlight the menu link when you are on that page
    body#home a#home-nav,
    body#page1  a#page1-nav,
    body#page2  a#page2-nav
    background: #ccc url(your path to the hover image) repeat:none;
    border: 1px solid #foo;
    (I would add something else like the red border so that it is clearly not the hover or focus state)

    Your html

    <li class="a"><a id="home-nav" href="index.html" title="Your Home Page Title">Home</a> </li>
    <li class="a"><a id="page-1-nav" href="page1.html" title="Page1 Title">Page1</a> </li>
    <li class="a"><a id="page2-nav" href="page2.html" title="Page2 title">Page2</a> </li>
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #7
    mbe is offline
    New to the CF scene
    Join Date
    Jun 2010
    Thanked 0 Times in 0 Posts
    Thanks for the tips, I'll look into this. I just know basic html and css, and no idea about scripts. I just got my hover code on some tutorial on the net.

    So thanks for all your input. Much appreciated!


    Posting Permissions

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