Expandable Menu with JQuery

Posted by elearnschool on Thursday, March 17, 2016 | No comments

Make attractive Expandable Menu:

(menu.html):-

<ul id="menu">

<li><a href="#">What's new?</a>

<ul class="active">

<li><a href="#">Weekly specials</a></li>

<li><a href="#">Last night's pics!</a></li>

<li><a href="#">Users' comments</a></li>

</ul>

</li>

<li><a href="#">Member extras</a>

<ul>

<li><a href="#">Premium Celebrities</a></li>

<li><a href="#">24-hour Surveillance</a></li>

(menu.css):-

#menu, #menu ul {

list-style-type: none;

padding: 0;

margin: 0;

}

#menu li {

cursor: pointer;

background: #94C5EB;

border-bottom: 1px solid #444;

}

#menu li a { text-decoration: none; }

#menu > li > a {

padding: 2px 10px;

font-weight: bold;

}

#menu li li {

cursor: auto;

border: 0;

padding: 0 14px;

background-color: #fff;

}

(menu.js):-

$('#menu > li > ul')

.hide()

.click(function(e) {

e.stopPropagation();

});