CODEWITHSUNDEEP
jquerycss
Low Rider
Low Rider

Reputation: 183

Highlight menu parent

I am trying highlight the MENU ITEM when I have the SUBMENU selected. I can see the code below is working to keep the menu item selected when I don't have a submenu. When I have a menu with submenu, the submenu is the only one that stays selected/highlight but menu.

I was trying different approach without success, can you help me? Thank you.

HTML:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Item 1</a>
        <ul class="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="sub-menu">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a>
        <ul class="sub-menu">
            <li><a href="#">Item 6.1</a></li>
            <li><a href="#">Item 6.2</a></li>
        </ul>
    </li>
</ul>

CSS:

  ul#menu, ul#menu ul.sub-menu {
        padding:0;
        margin: 0;
    }

    #menu {
        float: left;
        list-style: none outside none;
        padding-left: 20px;
        margin-top: 5px;

    }
    #menu li {
        border-right: 1px solid #7A0019;
        float: left;
        padding: 2px;
        font-size: 15px;
        position: relative;
    }
    #menu li a {
        color: #FFFFFF;
        display: block;
        padding: 5px 10px;
        text-decoration: none;
    }
    #menu li a:hover {
        background: none repeat scroll 0 0 #CCC;
        color: #000000;
        text-shadow: 0 0 5px #FFFFFF;
        z-index: 100;
    }

    #menu li a:active {
        background: none repeat scroll 0 0 #CCC;
        color: #000000;
        text-shadow: 0 0 5px #FFFFFF;
        z-index: 100;
    }



    #menu li ul {
        background-color: #7A0019;
        display: none;
        left: 0;
        position: absolute;
        top: 29px;
        z-index: 100;
    }

    #menu li:hover ul, #menu li.over ul {
        display: block;
    }

    #menu li ul li {
        border: 1px solid #7A0019;
        display: block;
        width: 130px;
        z-index: 50;

        -webkit-transition-delay:0.1s;     
        -moz-transition-delay:0.1s; 
        -ms-transition-delay:0.1s;     
        -o-transition-delay:0.1s;     
        transition-delay:0.1s;         
    }

.active_menu {      color: #000000 !important;
                    text-shadow: 0 0 5px #FFFFFF;
                    z-index: 100;
                    background-color: #FFCC33;
                    cursor:pointer !important;}

Jquery:

$(function(){     
    var url = window.location.href; 
    $("#menu a").each(function() {
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active_menu");
            $(this).closest("li a").css("color","#000");
        }
    });
});

Solution:

After so many tries finally a simple way to reach the result. Thank you ALL.

($(function () {
    var url = window.location.href;
    $("#menu a").each(function () {
        if (url == (this.href)) {
            $(this).closest(".menuHeader").children("a").addClass("active_menu");
            $(this).closest("li").addClass("active_menu");
            $(this).closest("li a").css("color", "#000");
        }
    });
});

Thank you Jesse, JEES and Gregg.

Upvotes: 1

Views: 1022

Answers (4)

Mi-Creativity
Mi-Creativity

Reputation: 9654

Ok, let's hope I figured it out this time, and my name is JEES and not Jesse :P.. however as this example can't be done on jsfiddle or on S.O.. here's a link showing it in action http://test.mi-creativity.com/highlight-parent/

So we basically check if it is a sub-item or not depending on if it's closest ul has class sub-menu or not, and add style upon that, here is the code

JS: external.js

$(document).ready(function () {
    var url = window.location.href,
    websitename = "http://localhost/test/highlight-parent/";

    $("#menu a").each(function () {
        var href = $(this).attr("href");
        if( websitename == url){ 
            $("#homepage").addClass("active_menu");
            $("#homepage a").css("color","#000");
        }else if( websitename + href == url){
            if($(this).closest("ul").hasClass("sub-menu")){
                $(this).closest("#menu > li").addClass("active_menu");
            }else{       
                $(this).parent().addClass("active_menu");
            }
        }
    });
});

HTML:

<ul id="menu">
    <li id="homepage"><a href="index.html">Home</a>
    </li>
    <li><a href="">Item 1</a>

        <ul class="sub-menu">
            <li><a href="subitem_1.1.html">Item 1.1</a>
            </li>
            <li><a href="subitem_1.1.html">Item 1.2</a>
            </li>
        </ul>
    </li>
    <li><a href="">Item 2</a>

        <ul class="sub-menu">
            <li><a href="subitem_2.1.html">Item 2.1</a>
            </li>
            <li><a href="subitem_2.2.html">Item 2.2</a>
            </li>
        </ul>
    </li>
    <li><a href="item_3.html">Item 3</a>
    </li>
    <li><a href="item_4.html">Item 4</a>
    </li>
    <li><a href="item_5.html">Item 5</a>
    </li>
    <li><a href="">Item 6</a>

        <ul class="sub-menu">
            <li><a href="subitem_6.1.html">Item 6.1</a>
            </li>
            <li><a href="subitem_6.2.html">Item 6.2</a>
            </li>
        </ul>
    </li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="external.js"></script>

UPDATE: Extra CSS:

I've also added this snippet to get rid of the text-shadow that was affecting the the color of the selected menu item and make trying to set font color as black through javascript useless, also thus we can omit both .css("color","#000"); lines in the javascript code:

.active_menu a{
   color:#000 !important;
   text-shadow:none;
}

Upvotes: 0

Gregg Duncan
Gregg Duncan

Reputation: 2725

If I'm understanding what your trying to do. You want to highlight the menu item of the page the user is on, PLUS the parent menu item if that menu item is in a sub-menu. I'm seeing answers about setting classes on hover and mouseover and I didn't see anything in your question or code about hover effects. So I just wanted to make sure I understood what you were trying to do.

Something like this should do it. Instead of looping through all the anchors looking for the one with the matching url just use the selector to find it. (untested):

$(function(){     
    var url = window.location.href; 
    // get the active link by looking for the anchor matching the url
    var $active = $('#menu a[href=' + url + ']');
    // get a reference to the li wrapping the anchor
    var $li = $active.closest("li");
    // add the active_menu Class to the li
    $li.addClass("active_menu");
    // set the color of the active Anchor
    // although I'd use the stylesheet: li.active_menu a { color: #000; }
    $active.css("color","#000");

    // Check the UL parent of the li for the class 'sub-menu'
    if($li.parent().hasClass('sub-menu')){
        // if it is a sub-menu find the li wrapping the sub-menu and add the active_menu class
        $li.parent().closest("li").addClass('active_menu');
    }

});

Upvotes: 0

Federico M. Rinaldi
Federico M. Rinaldi

Reputation: 353

I have an answer that just works with your HTML just replace:

$(this).closest("li").addClass("active_menu");
$(this).closest("li a").css("color","#000");

with:

$("#menu li").has("a[href='" + this.href + "']").addClass("active_menu");
$("#menu li").has("a[href='" + this.href + "']").css("color","#000");

Working example:

http://codepen.io/anon/pen/VvxaMg

Upvotes: 0

Jesse
Jesse

Reputation: 1262

Here, this way may work for you. Add class to the parent li, and then add/remove class to the parent li on hover/mouse out.

fiddle: https://jsfiddle.net/b56vy1w5/

HTML

<ul id="menu">
    <li class="menuHeader"><a href="#">Home</a></li>
    <li class="menuHeader"><a href="#">Item 1</a>
        <ul class="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li  class="menuHeader"><a href="#">Item 2</a>
        <ul class="sub-menu">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a>
        <ul class="sub-menu">
            <li><a href="#">Item 6.1</a></li>
            <li><a href="#">Item 6.2</a></li>
        </ul>
    </li>
</ul>

JQUERY

$(function(){     
    var url = window.location.href;
    $(".sub-menu li a").hover(function() {
        console.log($(this));
        $(this).closest(".menuHeader").children("a").addClass("active_menu");
    });

    $(".sub-menu li a").mouseout(function(){
        $(this).closest(".menuHeader").children("a").removeClass("active_menu");
    })
});

Upvotes: 1

Related Questions