Thursday, 17 March 2016

Expandable Menu with JQuery

Posted by Ashutosh Dwivedi -Digital Marketer 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();
});

0 comments:

Post a Comment