Question

I am trying to use this menu for my wordpress site.

I am just wondering how can I make the float line change color for each nav item hovered/selected, cos it is red (background-color:#800; height:2px;) for all at the moment.

This is what I am trying to achieve:

Menu 1 – the hovering float line is green,

Menu 2 – the float line is yellow,
Menu 3 – red, menu4 – blue and so on.

Any help is appreciated.

Thank you.

Answer 1

There is a more “CSS” way to achieve this but with some javascript you can get something quite readable. With this approach, your pages will need to correctly initialize the float line (.hightlight) and the nav border (#sses1 > ul).

The ideal solution would be a class for each float lines but here’s what I got with javascript only :

<!-- added individual classes for nav items -->
<div id="sse1">
  <div id="sses1">
    <ul>
      <li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
      <li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
      <li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
    </ul>
  </div>
</div>

Before the body or window is loaded :

    function customHandleMenu() {
        // get nav selector
        var nav = $('#sses1 > ul');

        // get float line selector
        var floatLine = $('.highlight'); // .hightlight must exist at this point

        // get colors for the current page
        var defaultBGcolor = floatLine.css('background-color');
        var defaultBorderColor = floatLine.css('border-color');
        var defaultNavBorderColor = nav.css('border-bottom-color');


        // change background-color and border-color on mouseenter event

        $('.nav-item-1').on({
            mouseenter: function () {
                setColors({floatColor:'#0f0', borderColor:'#0f0'});
            }
        });

        $('.nav-item-2').on({
            mouseenter: function () {
                setColors({floatColor:'#ee0', borderColor:'#ee0'});
            }
        });

        $('.nav-item-3').on({
            mouseenter: function () {
                setColors({floatColor:'#05f', borderColor:'#05f'});
            }
        });


        /*
           ...
        */

        // put back default colors on the mouseleave event
        $('#sses1 > ul > li').on({
            mouseleave: function() {
              setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
            }
        });

        function setColors(args) {
            if (typeof args.floatColor != "undefined") {
                floatLine.css('background-color', args.floatColor);
            }

            if (typeof args.borderColor != "undefined") {
                floatLine.css('border-color', args.borderColor);
                nav.css('border-bottom-color', args.borderColor);
            }
        }
    }

To ensure that the selector is only use once .highlight exists, I suggest to modify the end of the original javascript to this:

function initMenu() {
    sse1.builMenu();
    customHandleMenu();
}

if (window.addEventListener) {
    window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", initMenu);
}
else {
    window["onload"] = initMenu;
}

Take a look at this jsfiddle.

P.S.: the event chain is slighly modified to fit into jsfiddle.