Menu PruRobin

by aprudencio

HTML

<div id="menuContainer" >
    <div id="menu" class="menuClass">
        
        <a id="a" href="javascript:void()" >abrir Sub Menu</a>
        <a id="ac" href="javascript:void()" >cerrar Sub Menu</a>
    </div>
    <div id="submenu" class="menuClass ">
        <div id="submenuOpciones">
            <a class="suba" href="javascript:void()" >Item</a>
            <a class="suba" href="javascript:void()" >Item</a>
            <a class="suba" href="javascript:void()" >Item</a>
            <a class="suba" href="javascript:void()" >Item</a>
        </div>
    </div>
    <div class="menuClass" id="contentContainer">
        <div id="content">
            <p></p>
            <p>Contenido</p>
            <p></p>
        </div>
    </div>
</div>

CSS

#submenu {
    width: 940px;
    height:160px;
    border: 1px solid #000000;
    background-color: #d1d1d1;
    z-index: 5;
}
#submenuOpciones a{
    padding: 0 10px 0 10px;
}
#submenuOpciones{
    margin-top: 120px;
    margin-left: 30px;
}
#menu {
    width: 942px;
    height: 135px;
    background-image: url("http://www.google.com/nexus/images/header-bg-buy.png");
    z-index: 10;
}
#menuContainer {
    width: 1000px;
    height: 400px;
}
.menuClass {
    float:left;
    position: absolute;
}
#contentContainer {
    
    color: #ffffff;
    width: 942px;
    heigth: 800px;
}
#content {
    background-color: #989696;
    color: #ffffff;
    margin-top: 161px;
    width: 100%;
    heigth: 100%;
}

JavaScript

$("#submenu").hide();

$("#a").click(function() {
    $("#submenu").show("blind", 700);
});

$("#ac").click(function() {
    $("#submenu").hide("blind", 900);
});