<ul id="m_menu">
<li><a href="#" class="m">메뉴1</a>
<ul>
<li><a href="#" class="m">메뉴1_1</a>
<ul>
<li><a href="#">메뉴1_1_1</a></li>
<li><a href="#">메뉴1_1_2</a></li>
</ul>
</li>
<li><a href="#" class="m">메뉴1_2</a>
<ul>
<li><a href="#">메뉴1_2_1</a></li>
<li><a href="#">메뉴1_2_2</a></li>
</ul>
</li>
<li><a href="#" class="m">메뉴1_3</a>
<ul>
<li><a href="#">메뉴1_3_1</a></li>
<li><a href="#">메뉴1_3_2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="m">메뉴2</a>
<ul>
<li><a href="#">메뉴2_1</a></li>
<li><a href="#">메뉴2_2</a></li>
<li><a href="#">메뉴2_3</a></li>
</ul>
</li>
<li><a href="#" class="m">메뉴3</a>
<ul>
<li><a href="#">메뉴3_1</a></li>
<li><a href="#">메뉴3_2</a></li>
<li><a href="#">메뉴3_3</a></li>
</ul>
</li>
</ul>* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
font-family: "굴림", sans-serif;
color: #999;
font-size: 0.9em;
text-decoration: none;
}
#m_menu{
position: absolute;
width: 50%;
height: 100%;
background: #262626;
}
#m_menu a{
display: block;
padding: 20px;
border-top: 1px solid #2e2e2e;
border-bottom: 1px solid #2e2e2e;
}
#m_menu a.m{
background: #111;
font-weight: bold;
}
#m_menu a.m.on{
color: #ff6600;
}
#m_menu ul a{
background: #3a3a3a;
text-indent: 20px;
}
#m_menu li ul{
display: none;
}
#m_menu li ul.on{
display: block;
}$(document).ready(function(){
$("#m_menu a.m").click(function(){
$(this).next().addBack().toggleClass("on").end().find(".m. ul").removeClass("on").end().parent().siblings().find(".m. ul").removeClass("on");
return false;
})
})
External CSS
This Pen doesn't use any external CSS resources.