HorizontalMenuJSv2

For WAC

by Koubenec

HTML

<div class="maincontainer">
    <div id="home">HOME</div>
    <div id="becomemembercontainer">
        <div id="becomemember"><span id="becomemembertext">BECOME A MEMBER</span></div>
        <div id="becomemember1"><span id="becomemembertext1">SUBLINK 1</span></div>
        <div id="becomemember2"><span id="becomemembertext2">SUBLINK 2</span></div>
    </div>
    <div id="profdevcontainer">
        <div id="profdev"><span id="profdevtext">PROFESSIONAL DEVELOPMENT</span></div>
        <div id="profdev1"><span id="profdevtext1">SUBLINK 1</span></div>
        <div id="profdev2"><span id="profdevtext2">SUBLINK 2</span></div>
    </div>
</div>

CSS

.maincontainer {
width: 1005px;
height: 60px;
background-color: #B6D2CD;
overflow: hidden;
}

#becomemembercontainer {
width: 170px;
height: 60px;
background-color: #B6D2CD;
float: left;
margin-right: 3px;
}

// These properties are applied by JS instead, but included for reference // #becomemembercontainer:hover {
width: 1005px;
height: 60px;
background-color: #B6D2CD;
float: left;
position: absolute;
z-index: 99;
margin-right: 3px;
}

#becomemember {
width: 170px;
height: 60px;
background-color: #E1721E;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext {
font-size: 16px;
color: #fff;
}

#becomemember1 {
width: 100px;
height: 60px;
background-color: #E1721E;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext1 {
font-size: 16px;
color: #fff;
}

#becomemember2 {
width: 100px;
height: 60px;
background-color: #E1721E;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext2 {
font-size: 16px;
color: #fff;
}

#home {
width: 100px;
height: 60px;
background-color: gray;
text-align: center;
line-height: 60px;
padding: 0px 0px 0px 0px;
margin-right: 3px;
float: left;
}

#hometext {
font-size: 16px;
}

#profdevcontainer {
width: 250px;
height: 60px;
background-color: #B6D2CD;
float: left;
margin-right: 3px;
}

#profdevcontainer:hover {
/* animated wit css / width: 1005px; */
/* animated wit css / height: 60px;
/* animated wit css / background-color: yellow;
/* animated wit css / float: left; */
/* position: absolute; */
z-index: 99;
margin-right: 0px; 
}

#profdev {
width: 250px;
height: 60px;
background-color: #FC9F21;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#profdevtext {
font-size: 16px;
color: #fff;
}

#profdev1 {
width: 100px;
height: 60px;
background-color: #FC9F21;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float:...

JavaScript

$(document).ready(function() {
    $("#becomemembercontainer").hover(function() {
        $(this).stop().animate({
            width: '990px',
            marginLeft: '-105px',
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            width: '170px',
            marginLeft: '0px'
        }, 'fast');   
    });
});

$(document).ready(function() {
    $("#profdevcontainer").hover(function() {
        $(this).stop().animate({
            width: '1005px',
            marginLeft: '-276px',
            // 'z-index': '99'
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            width: '250px',
            marginLeft: '0px'
        }, 'fast');   
    });
});

    // $('#clickme').hover(function() {
    // $('#book').animate({
    // opacity: 0.25,
    // left: '+=50',
    // height: 'toggle'
    // }, 5000, function() {
    // Animation complete.
    // });
    // });