Search code examples
javascriptjquerycsshovershow-hide

Sub menu visible when hovering main menu but needs to remains visible when hovering the sub menu

I could achieve this in CSS no issues but due to framework restrictions i cannot alter the HTML of the main menu.

Therefore, i have come up with some jQuery that reveals an appropriate sub menu dependant on the main menu item that is hovered and positions it.

The issue is that when i hover out of the main menu item and into the sub menu the sub menu disappears. I am not sure how i am going to differentiate between the various scenarios where that will arise as to where the user is hovering.

It may be the case that i clone the sub menu HTML from the hidden stub that i have and insert it into the appropriate main menu items and implement the hosw/hide with CSS.

This is the Main menu html:

<ul class="nav-list">
  <li class="nav-first nav-linkitem 356">
    <a title="" href="/"><span class="nav-tlt">Home</span></a>
  </li>
  <li class="nav-linkitem 357">
    <a title="" href="/Channels/Chemicals"><span class="nav-tlt">Chemicals</span></a>
  </li>
  <li class="nav-linkitem 358">
    <a title="" href="/Channels/Energy"><span class="nav-tlt">Energy</span></a>
  </li>
  <li class="nav-linkitem 359">
    <a title="" href="/Channels/Fertilizers"><span class="nav-tlt">Fertilizers</span></a>
  </li>
  <li class="nav-linkitem 383">
    <a title="QA test" href="/QA"><span class="nav-tlt">QA</span></a>
  </li>
  <li class="nav-last nav-linkitem 384">
    <a title="QA2 test" href="/QA2"><span class="nav-tlt">QA2</span></a>
  </li>
</ul>

This is the sub menu HTML:

<!-- Chemicals -->
<div id="subNav-chemicals">
    <div>
        <h4>Our most popular Chemical reports</h4>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "Budgeting for the new normal"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">ICB magazine</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Chemicals: END -->
<!-- Energy -->
<div id="subNav-energy">
    <div>
        <h4>Our most popular Energy reports</h4>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "The light that shines twice as bright"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Energy blog</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Energy: END -->
<!-- Fertilizer -->
<div id="subNav-fertilizers">
    <div>
        <h4>Our most popular Fertilizer reports</h4>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "Fertilization in today's market"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Fertilizer blog</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Fertilizer: END -->

And the jQuery:

$(function(){

    var subNav = $('.rtx-SubNav'),
    mainNav = $('.nav-SiteNav'),
    mainNavHeight = mainNav.outerHeight(),
    mainNavOffset = mainNav.offset(),
    coordinates = [],
    splitCoordinates = [],
    subNavID = []
    linkWidth = [];

    // get widths of previous links 
    $('.nav-SiteNav a').each(function(index){

        var $this = $(this),
        $thisWidth = $this.parent().outerWidth(),
        offset = $this.offset(),
        offsetTop = Math.round(offset.top + mainNavHeight) + 'px',
        offsetLeft = Math.round(offset.left) + 'px';

        coordinates.push(offsetTop + '-' + offsetLeft);

        linkWidth.push($thisWidth);

        linkWidth.reverse();

    });

    // get IDs of   
    $('.rtx-SubNav div[id^="subNav-"]').each(function(index){

        $(this).hide();

        var divID = $(this).attr('id');
        subNavID.push(divID);
        subNavString = subNavID.toString(),
        len = subNavID.length;

        while(len--){
           subNavString = subNavString.replace('subNav-', '');
        }

    });

    subNavID = subNavString.split(',');

    // check the text against IDs 
    // show matched, hide others
    // position by hovered link
    // remain visible when hovering sub nav
    $('.nav-SiteNav a').hover(  
        function() {

            var $this = $(this),
            linkTxt = $this.text().toLowerCase(),
            hoverOffset = $this.offset(),
            linkIndex = $('.nav-SiteNav a').index($this),
            splitCoordinates = coordinates[linkIndex].split('-'),
            len = subNavID.length,
            total = 0,
            sliced = linkWidth.slice(0, linkIndex),
            slicedLen = sliced.length;

            while(slicedLen--){
                var numericVal = parseInt(sliced[slicedLen]);
                total += numericVal;                
            }

            while(len--){
                if (linkTxt === subNavID[len]){
                    $('.rtx-SubNav #subNav-' + linkTxt).show(); 
                }   
            }

            subNav.css({
                'top': '257px',
                'left': total + 'px'
            });

        },
        function() {

            subNav.removeAttr('style');

            $('.rtx-SubNav div[id^="subNav-"]').hide();

        }
    );      

});
Solution

  • Try this, I didn't test it, but I'm almost sure that this will work:

    var parent_a, parent_a_id, li_pos;
$('.subnav li').hover(function(){
    parent_a = $('a',this).attr('href').toLowerCase();
    parent_a_id = parent_a.split('/').pop().toString();
    li_pos = $(this).offset();
    $('#subNav-' + parent_a_id ).css({'left' : li_pos.left, 'top' : li_post.top}).stop(true, true).show();
}, function(e){
    $('#subNav-' + parent_a_id ).hide();

    }); $('div[id^="subNav-"]').hide();