MegaNav Layout Notes

Just the container divs

by amindunited

HTML

<div class="pageWrap wrap">
    <span class="tip"><span>?</span><div class="text">This is the div that wraps the whole application</div></span>
    
    <div class="megaNavWrap wrap">
        <span class="tip"><span>?</span><div class="text">This is the div container for the mega nav</div></span>
        <div class="navHeader wrap">
            <span class="tip"><span>?</span><div class="text">This is the div container navHeaderCategories</div></span>
            <ul>
                <li>Custom Cat 1</li>
                <li>Custom Cat 2</li>
                <li>Custom Cat 3</li>
                <li>Custom Cat 4</li>
                <li>Custom Cat 5</li>
                <li>Custom Cat 6</li>                
            </ul>
        </div>
        <div class="navBody wrap">
            <span class="tip"><span>?</span><div class="text">This is the div container wraps the groups, subNav and events</div></span>
            <div class="groupsSubNav wrap">
                <span class="tip"><span>?</span><div class="text">This is the div container groupsSubNav</div></span>
                <ul>
                    <li>Group 1</li>
                    <li>Group 2</li>
                    <li>Group 3</li>
                    <li>Group 4</li>
                    <li>Group 5</li>
                    <li>Group 6</li>                
                </ul>
            </div>
            <div class="subNav wrap">
                <span class="tip"><span>?</span><div class="text">This is the div container subNav</div></span>
                <ul>
                    <li>SubCat 1</li>
                    <li>SubCat 2</li>
                    <li>SubCat 3</li>
                    <li>SubCat 4</li>
                    <li>SubCat 5</li>
                    <li>SubCat 6</li>                
                </ul>
            </div>
            <div class="events wrap">
                <span class="tip"><span>?</span><div class="text">This is the div container events</div></span>
       ...

CSS

div {
    padding: 5px;
    margin:5px;
    border: solid 1px #999999;
    background-color: rgba(200, 200, 200, .33);
    border-radius: 5px;
    position: relative;
}
.pageWrap .groupsSubNav, .pageWrap .subNav, .pageWrap .events {
    float: left;
    max-width: 30%;
}
 .pageWrap .events {
    max-width: 70%;
}
/* clear fix code */
.pageWrap .navHeader:after, .pageWrap .navBody:after, .pageWrap .groupsSubNav:after, .pageWrap .subNav:after, .pageWrap .events:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

,pageWrap .navHeader ul {
    list-style-type: none;
}
.pageWrap .navHeader ul li {
    display: block;
    float: left;
    width: 100px;
    padding: 5px;
    margin:5px;
    border: solid 1px #999999;
    background-color: rgba(200, 200, 200, .33);
    border-radius: 5px;
}
.pageWrap .groupsSubNav ul li, .pageWrap .subNav ul li, .pageWrap .events ul li{
    padding: 5px;
    margin:5px;
    border: solid 1px #999999;
    background-color: rgba(200, 200, 200, .33);
    border-radius: 5px;
}
 .pageWrap .events ul li{
    float: left;
}
.pageWrap .tip {
    text-align: center;
    width: 15px;
    height: 15px;
    padding: 5px;
    margin:5px;
    border: solid 1px #999999;
    background-color: rgba(200, 200, 200, .33);
    border-radius: 5px;
    position:absolute;
    right: 5px;
    top: 5px;
}
.pageWrap .tip .text{
    background-color: #faff00;
    border: solid 1px #ff7f00;
    left: 0px;
    top:0px;
}
.wrap.active {
    background-color: yellow;
}

JavaScript

$(function(){
    $('.tip .text').hide().css({'position':'absolute'});
    /*
    $('.tip').on('mouseenter', function(e){
        $('.tip .text.active').removeClass('active').hide('slow')
        $(this).children('.text').addClass('active').show('slow')
    })
    $('.tip').on('mouseleave', function(e){
        $('.text.active', this).removeClass('active').hide('slow')    
    })
            */
    /*
    $('.wrap').on('mouseover', function(e){
        //$('.wrap.active').removeClass('active')
        console.log('over')
        $('.wrap.active').removeClass('active')
        $(this).addClass('active');
    }).on('mouseout', function(e){
        $('.wrap.active').removeClass('active')
    })
      */  
    $('.wrap').on('mouseover', function(e){
        e.stopPropagation();
        $('.wrap.active').removeClass('active')
        $(this).addClass('active');
        var tipText = $(this).children('.tip').children('.text').html();
        $('.infoWrap').html(tipText);
    })
    $('.wrap').on('mouseout', function(e){
        e.stopPropagation();
        $('.wrap.active').removeClass('active')
        $('.infoWrap').html('');
    })
    
})