Float line menu/nav with different color options

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 .

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

Answer 2

What you're asking for is actually non-trivial. The author of the plugin is actually animating an li element's, "li.highlight", width and left positioning based on where you hover the mouse. You can easily change the color of this thing by altering the CSS definition for this item. For example to make it yellow, just include this css definition below the menu's css file:

#sses1 li.highlight {
    background-color: yellow;
    top: 36px;
    height: 2px;
    border-bottom: solid 1px yellow;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

I know this isn't the complete solution... but, if you're ambitious you could alter the javascript add a new class depending on which li element the .highlight element is under.