Javascript styling if specific content is present or hovered

Question

I've been battling with this piece of code the last few days and I really don't know what to do with it.

Basically when a user rolls their mouse over one of the LI elements from the main nav menu, a Javascript function runs and depending on which element triggered the function puts links into the UL underneath (id=mainNav_Drop).

What I want to do is set a style of

background-color: #000

on the LI element from the main nav both when it is hovered over and the relevant content in the sub-menu is present (not ONLY when it's hovered over), and then for this styling to be removed and switched between different LI elements as they are each rolled over respectively.

Please help I'm at a dead loss, here's the code.

<ul>
    <li class="mainNav_Home" onmouseover="mainNav_Hover('Home')"><a href="#">Home</a></li>
    <li class="mainNav_Portfolio" onmouseover="mainNav_Hover('Portfolio')"><a href="#">Portfolio</a></li>
    <li class="mainNav_Tutorials" onmouseover="mainNav_Hover('Tutorials')"><a href="#">Tutorials</a></li>
    <li class="mainNav_Contact" onmouseover="mainNav_Hover('Contact')"><a href="#">Contact</a></li>
    <ul id="mainNav_Drop">
            <li class='mainNav_Drop_Home'><a href='#'></a></li>
    </ul>
</ul>

function mainNav_Hover(cls){
    var id=document.getElementById('mainNav_Drop');
    switch(cls){
        case("Home"):
            id.innerHTML="<li class='mainNav_Drop_Home'><a href='#'>Home</a></li>"
            break;
        case("Portfolio"):
            id.innerHTML="<li class='mainNav_Drop_Portfolio'><a href='#'>Qualifications</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Services</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Portfolio</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Case Studies</a></li>"
            break;
        case("Tutorials"):
            id.innerHTML="<li class='mainNav_Drop_Tutorials'><a href='#'>HTML5</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>CSS3</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>WordPress</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>Design</a></li>";
            break;
        case("Contact"):
            id.innerHTML="<li class='mainNav_Drop_Contact'><a href='#'>Contact</a></li>"
            break;
        default:
            id.innerHTML="<li><a href='#'></a></li>"
        }
}

To clarify: if the user hovers / moves the mouse over the menu item home you want background of `
That looks like a job for [jqueryUI](http://jqueryui.com/themeroller/). — havarc, Jul 14 '13 at 08:23
May be would be better hide content and with css toggle classes instead of creating new content of `"mainNav_Drop"` over and over... — Givi, Jul 14 '13 at 09:00
@Givi your jsFiddle doesn't work I appreciate the attempt though. — aaa, Jul 15 '13 at 06:00
@threeFourOneSixOneThree currently if the user hovers over for example class="mainNav_Home" the background colour is triggered by the CSS :hover selector in my CSS. However, when the user hovers over class="mainNav_Drop" the mainNav_Home (it could also be any other of the 4 main nav links) comes out of its hover state. I want to implement a constant hover state on the main navigation link once it's been hovered and for this hover state to deactivate once one of the other links is hovered, however I can't use onmouseout() because the point is for the dropdown to stay visible - — aaa, Jul 15 '13 at 06:02
- once it's activated, as well as the hover state, so it wouldn't work! — aaa, Jul 15 '13 at 06:07

score 1 · Accepted Answer · edited May 23 '17 at 10:25

I have understood the following. The main navigation should do the following

on hover change background color and show matching sub-navigation
on mouseout keep background color of main navigation and show subnavigation
unless another main navigation is hovered then drop background-color and start at 1 for new main nav

Working demo

Please take a look at my fully working demo on plunk that demonstrates the above.

Helper function to create the subnavigation. Be carefull .forEach(...) is not native in every browser so please try it with a current firefox, chrome. There are shims / polyfills for forEach or it could be replaced if you need to support for older browsers.

function setSubNav(navClass, navItems)
{
    // renamed since this returns an element not only an id
    var elNavDrop=document.getElementById('mainNav_Drop'); 
    var subNavList ="";
    // .forEach requires a shim 
    // please see --> https://stackoverflow.com/questions/9329446/
    navItems.forEach(function(navItem) {
        subNavList += "<li class='" + navClass +"'><a href='#'>" + navItem +"</a></li>";
    }); 
    elNavDrop.innerHTML =subNavList; 
    return;
};

The following is a helper function to remove a css-class from an element. If you use any library like jQuery, MooTools, Zepto.js it would be built in.

function removeHoverState(mainNavId, classToRemove){
  // console.log("mainNavId = " + mainNavId);
  // remove class  --> https://stackoverflow.com/questions/2155737/
  document.getElementById(mainNavId).className =
    document.getElementById(mainNavId).className.replace('wasHovered','');

};

This is the function that sets the background. I use the onMouseOver to add an additional class to the active element.

function navHover(cls){

    // remove the hover class from all entries
    var mainNavIds = ["Home", "Portfolio", "Tutorials"];    
    mainNavIds.forEach(function(mainNavId){
          removeHoverState(mainNavId, "wasHovered")});

    var elMainNav = document.getElementById(cls);    
    if(elMainNav.className.indexOf("wasHovered") == -1) 
    {
            elMainNav.className += " wasHovered";
    };
    switch(cls){
        case("Home"):            
            setSubNav('mainNav_Drop_Home', ["Home"]);
            break;
        case("Portfolio"):
            var naItemsPortfolio = ["Qualifications"
                   , "Services", "Portfolio", "Case Studies"];
            setSubNav('mainNav_Drop_Portfolio', naItemsPortfolio);            
            break;
        case("Tutorials"):
            var naItemsTutorials = ["HTML5"
                   , "CSS3", "WordPress", "Design"];
            setSubNav('mainNav_Drop_Tutorials', naItemsTutorials);              
            break;
        default:
            elNavDrop.innerHTML="<li><a href='#'></a></li>"
        }
};// end of  navHover

Please let me know if you need any pointers and if you find it usefull an upvote is always appreciated.

Looking through it now I'll let you know how it goes and whether I need to adjust it shortly :) — aaa, Jul 15 '13 at 11:32
Shieeet man sorry but I've come up with my own solution that's a fair bit simpler.. Sorry but I really appreciate you trying. I'm giving you accepted answer because without your input I would never have come up with my own solution, which I will post in the below answer. — aaa, Jul 15 '13 at 13:14

score 1 · Answer 2 · answered Jul 15 '13 at 13:17

I used two functions in my Javascript:

        function styleAdd(ca) { 
 document.getElementById('Home').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Portfolio').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Tutorials').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Contact').className = document.getElementById('Contact').className.replace('duck','');

 document.getElementById(ca).className += " duck";
}

where duck is my CSS class containing the styles applicable to the top navigation bar, along with the HTML

<nav id="nav">
    <ul>
        <li id="Home" class="mainNav_Home" onmouseover="mainNav_Hover('Home'); styleAdd('Home')"><a href="#">Home</a></li>
        <li id="Portfolio" class="mainNav_Portfolio" onmouseover="mainNav_Hover('Portfolio'); styleAdd('Portfolio')"><a href="#">Portfolio</a></li>
        <li id="Tutorials" class="mainNav_Tutorials" onmouseover="mainNav_Hover('Tutorials'); styleAdd('Tutorials')"><a href="#">Tutorials</a></li>
        <li id="Contact" class="mainNav_Contact" onmouseover="mainNav_Hover('Contact'); styleAdd('Contact')"><a href="#">Contact</a></li>
        <ul id="mainNav_Drop">
            <li class='mainNav_Drop_Home'><a href='#'></a></li>
        </ul>
    </ul>
</nav>

score 0 · Answer 3 · answered Jul 15 '13 at 18:58

For the fun of it i took your approach and tried to shorten it further. I made a demo plunk that shows the same as the previous plunk. Here is the code

Helper method to remove the style from all main navigation entries

function setHoverStyle(mainNavId, mainNavIds) { 
   // console.log('mainNavIds: ' + mainNavIds);
   for (i = 0; i < mainNavIds.length; ++i)
   {
      document.getElementById(mainNavIds[i]).className = 
           document.getElementById(mainNavIds[i]).className.replace('duck','');
   }
   document.getElementById(mainNavId).className += " duck";
};

Helper function to add the subnavigation entries

function setSubNav(navClass, subNavigationItems)
{
    var elSubNav =document.getElementById('mainNav_Drop'); 
    var subNavList ="";
    for (i = 0; i < subNavigationItems.length; ++i)
    {
        subNavList += "<li class='" + navClass +"'><a href='#'>" 
                              + subNavigationItems[i] +"</a></li>";         
    }
    elSubNav.innerHTML =subNavList; 
    return;
};

Refactored function to put all pieces together

function navHover(id){

    var mainNavIds = ['Home', 'Portfolio', 'Tutorials', 'Contact'];
    var subNavigation = {};
    subNavigation['Home'] = ['Home'];
    subNavigation['Portfolio'] = ["Qualifications", "Services"
                                  , "Portfolio", "Case Studies"];
    subNavigation['Tutorials'] = ["HTML5", "CSS3", "WordPress", "Design"];
    subNavigation['Contact'] = ['Contact'];
    setHoverStyle(id, mainNavIds);
    setSubNav(id, subNavigation[id]);
};

Javascript styling if specific content is present or hovered

3 Answers3

Working demo