<nav>
<label for="toggle-mobile-menu">☰ Menu</label>
<input id="toggle-mobile-menu" type="checkbox"/>
<ul>
<li>
<a href='Menu 1'>Menu 1</a>
<ul>
<li>
<a href='#'>Menu 1.1</a>
<ul>
<li><a href='#'>Menu 1.1.1</a></li>
<li><a href='#'>Menu 1.1.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 1.2</a></li>
<li>
<a href='#'>Menu 1.3</a>
<ul>
<li><a href='#'>Menu 1.3.1</a></li>
<li>
<a href='#'>Menu 1.3.2</a>
<ul>
<li><a href='#'>Menu 1.3.2.1</a></li>
<li><a href='#'>Menu 1.3.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu 1.4</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
<li><a href='#'>Menu 2.3</a></li>
<li><a href='#'>Menu 2.4</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
</nav>
<div> rest of the page</div>
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
nav {
display: block;
background: black;
position: relative;
min-height: 40px;
}
nav, nav a {
color: white;
text-decoration: none;
}
nav a {
display: block;
padding: 10px;
}
nav a:hover {
background: gray;
}
nav ul {
padding:0;
margin: 0;
}
nav ul li {
float:left;
display:inline;
position:relative;
background: #505050;
border-right: 1px solid white;
}
nav ul li ul {
left:0;
top:100%;
}
nav ul ul {
display:none;
}
nav li:hover > ul {
display:block;
position:absolute;
z-index:1000;
width: 120px;
}
nav ul ul li:hover > ul {
right: -120px;
top: 0;
left: auto;
}
/*Hide checkbox and label by default*/
nav > input,
nav > label {
display: none;
}
nav > label {
width: 100%;
float: left;
padding: 10px;
padding-right: 0;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Media query*/
@media (max-width: 400px) {
nav > ul {
height: 0;
opacity: 0; /* For cross browser support https://css-tricks.com/snippets/css/cross-browser-opacity */
clear: both;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
transition:all 1s ease;
}
nav > label, nav ul li ul {
display: block;
}
nav > input:checked + ul {
opacity: 1;
height: auto;
}
nav ul ul li a:before {
content:'↪ ';
display: inline;
}
nav ul li {
float: none;
display: block;
border-right: none;
padding-left: 10px;
}
nav li:hover ul {
position: relative;
width: auto;
}
nav ul ul li:hover > ul {
right:auto;
top: auto;
left: auto;
}
}
$(function(){
$(document).click(function(e){
var $checkbox = $('#toggle-mobile-menu'),
$elClicked = $(e.target);
if(!($elClicked.is($checkbox) || $elClicked.is("label[for='toggle-mobile-menu']") && $checkbox.is(':checked'))) {
e.stopPropagation();
$checkbox.prop('checked', false);
}
});
});
Also see: Tab Triggers