Боковое меню с подменю

Question

Я хочу, чтобы меню имело тот же эффект, что и это меню с этой страницы http://store.anumberofnames.org/, когда кто-то нажимает на ссылку магазина, чтобы подменю выпадало, и когда они нажимают на информацию, ссылка магазина закрывается и информационное подменю к раскрывающимся, а также при нажатии на категории на sebmenus я хочу ссылку, что они выбрали для подсвечивается, ниже HTML, и CSS код у меня есть

HTML

<div id="menu"> 
<nav> 
<ul> 

    <li> 
    <a href="#">SHOP</a> 
    <ul> 
     <li><a href="#">T-SHIRT</a></li> 
     <li><a href="#">KNIT</a></li> 
     <li><a href="#">SHIRT</a></li> 
     <li><a href="#">PANTS</a></li> 
     <li><a href="#">ACCESSORY</a></li> 
    </ul> 
    <li><a href="#">INFORMATION</a> 
    <ul> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">CONTACT</a></li> 
     <li><a href="http://www.google.com">NEWSLETTER</a></li> 
     <li><a href="#">LEGAL</a></li> 
    </ul> 
    </LI> 
    </ul> 
    </nav> 
</div>  
</div> 

CSS

#menu nav > ul > li > ul { 
display: none; 
text-align: right; 
} 

#menu nav a { 
display: block; 
} 

#menu nav > ul > li > a { 
display: block; 
border-bottom: 3px solid transparent; 
} 

#menu nav > ul > li:hover > a { 
border-bottom: 3px solid white; 
} 



#menu nav ul li { 
font-size: 11px; 
top:106px; 
list-style-type: none; 
text-decoration: none; 
color:#ffffff; 
line-height: 19px; 

} 

nav a { 
color:rgb(153, 153, 153); 
text-decoration: none; 
} 
#mainSidebar { 
display: block; 
font-family:arial; 
font-size: 11px; 
font-stretch: normal; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
height: 450px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
min-height: 750px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
position: fixed; 
text-transform: uppercase; 
vertical-align: baseline; 
} 
#menu nav ul { 
padding: 0px; 
line-height: 11.5px; 
margin-top: 0px;  
padding-bottom: 5px; 
width: 143px; 
padding-top: 5px; 
} 
#menu nav ul li a:hover{ 
color: #000; 
} 

Answer 1

Это использует jQuery. Вы можете сделать это с помощью двух функций: slideDown() и slideUp(), или используя одну функцию: slideToggle():

$(function() { 
 
    $("#menu nav > ul > li > ul").hide(); 
 
    $("#menu nav > ul > li > a").click(function() { 
 
    if (!$(this).next("ul").is(":visible")) { 
 
     $("#menu nav > ul > li > ul").slideUp(); 
 
     $(this).next("ul").slideDown(); 
 
    } 
 
    return false; 
 
    }); 
 
});

#menu nav > ul > li > ul { 
 
    margin: 0; 
 
    margin-left: 25px; 
 
} 
 
#menu nav a { 
 
    display: block; 
 
} 
 
#menu nav > ul > li > a { 
 
    display: block; 
 
    border-bottom: 3px solid transparent; 
 
} 
 
#menu nav > ul > li:hover > a { 
 
    border-bottom: 3px solid white; 
 
} 
 
#menu nav ul li { 
 
    font-size: 11px; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    line-height: 19px; 
 
} 
 
nav a { 
 
    color: rgb(153, 153, 153); 
 
    text-decoration: none; 
 
} 
 
#mainSidebar { 
 
    display: block; 
 
    font-family: arial; 
 
    font-size: 11px; 
 
    font-stretch: normal; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: normal; 
 
    height: 450px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    min-height: 750px; 
 
    padding-bottom: 0px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    padding-top: 0px; 
 
    position: fixed; 
 
    text-transform: uppercase; 
 
    vertical-align: baseline; 
 
} 
 
#menu nav ul { 
 
    padding: 0px; 
 
    line-height: 11.5px; 
 
    margin-top: 0px; 
 
    padding-bottom: 5px; 
 
    width: 143px; 
 
    padding-top: 5px; 
 
} 
 
#menu nav ul li a:hover { 
 
    color: #000; 
 
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<div id="menu"> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a href="#">SHOP</a> 
 
     <ul> 
 
      <li><a href="#">T-SHIRT</a></li> 
 
      <li><a href="#">KNIT</a></li> 
 
      <li><a href="#">SHIRT</a></li> 
 
      <li><a href="#">PANTS</a></li> 
 
      <li><a href="#">ACCESSORY</a></li> 
 
     </ul> 
 
     <li><a href="#">INFORMATION</a> 
 
     <ul> 
 
      <li><a href="#">ABOUT</a></li> 
 
      <li><a href="#">CONTACT</a></li> 
 
      <li><a href="http://www.google.com">NEWSLETTER</a></li> 
 
      <li><a href="#">LEGAL</a></li> 
 
     </ul> 
 
     </LI> 
 
    </ul> 
 
    </nav> 
 
</div>