js-dropdown-menu
Version:
Simple drop-down menu.
73 lines (69 loc) • 1.73 kB
HTML
<html>
<head>
<![if !IE]>
<script type="application/javascript" src="../dist/polyfillClosest.js"></script>
<![endif]>
<script type="application/javascript" src="../dist/jsDropdownMenu.js"></script>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100px;
float: left;
background: #dbdbdb;
line-height: 2em;
text-align: center;
margin: 0 5px;
cursor: pointer;
}
ul li span {
display: block;
}
ul li ul {
display: none;
}
ul .dropdown-menu-show ul {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown-menu">
<a href="http://www.idnes.cz" class="dropdown-menu-button"><span>Item 1</span></a>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li class="dropdown-menu">
<span class="dropdown-menu-button">Item 2</span>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li class="dropdown-menu">
<span class="dropdown-menu-button">Item 3</span>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li class="dropdown-menu">
<span class="dropdown-menu-button">Item 4</span>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
<script>
new jsDropdownMenu.default();
</script>
</body>
</html>