session state menu

by karin

HTML

<div id="MainMenu">
    <ul>
        <li class="main-menu-item" data-tag="1"><a href="#">First</a>

        </li>
        <li class="main-menu-item" data-tag="2"><a href="#">Second</a>

        </li>
        <li class="main-menu-item" data-tag="3"><a href="#">Third</a>

        </li>
    </ul>
</div>
<div class="dd-menu">
    <div class="submenu1">submenu 1 <a href="#">Page2</a>

    </div>
    <div class="submenu2">submenu 2 <a href="#">Page3</a>

    </div>
    <div class="submenu3">submenu 3 <a href="#">Page1</a>

    </div>
    <div class="close-menu-holder"><a href="#">close</a>
    </div>
</div>

CSS

#MainMenu ul {
     display: inline-block;
     list-style-type: none;
     width:60%;
 }
 #MainMenu ul li {
     display: inline;
     margin-right:0.5em;
     background:peru;
     padding:0.5em 1em;
 }
 #MainMenu ul li a {
     padding:1em;
 }
 .submenu1, .submenu2, .submenu3 {
     min-height:8em;
     background:peru;
     border:thin solid white;
 }
 .dd-menu {
     position:relative;
     background:#ddd;
     display:none;
 }
.close-menu-holder{
    display:inline-block;
    position:relative;
    margin-bottom:1em;
}

JavaScript

$('.close-menu-holder a').on('click', function () {
    $('.submenu1, .submenu2, .submenu3').stop().slideUp('slow');
    $('.dd-menu').slideUp();
});

var dataTag = [0];
$('.main-menu-item').on('click', function () {
    dataTag.push($(this).attr('data-tag'));
//if closed - open
    $('.dd-menu').stop().slideDown('slow', 'easeOutQuad', function () {
        switch (dataTag[dataTag.length - 1]) {
            case "1":
                $('.submenu2, .submenu3').stop().slideUp('slow', function () {
                    $('.submenu1').slideDown('slow');
                });
                break;
            case "2":
                $('.submenu1, .submenu3').stop().slideUp('slow', function () {
                    $('.submenu2').slideDown('slow');
                });
                break;
            case "3":
                $('.submenu1, .submenu2').stop().slideUp('slow', function () {
                    $('.submenu3').slideDown('slow');
                });
                break;
            default:
                $('.submenu1, .submenu2,.submenu3').stop().slideUp('slow');
        }
    });
    
    //if open check whether the same menuitem was clicked
        //if yes then close menu
        //else keep menu open and change dd-menu content
});