Expanding Menu JS
HTML
<h1>Expanding Menu JS</h1>
<nav data-action="expand">
<span>☰</span>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</nav>
CSS
html, body{
display: block;
width: 100%;
height: 100%;
}
nav{
display: block;
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
z-index: 9000;
padding: .5em 1em .5em 1em;;
width: 3em;
height: 3em;
text-align: center;
background: black;
border-radius: 0 0 0 100%;
transition: all 1s;
overflow: hidden;
}
nav.open{
width: 100%;
height: 100%;
border-radius: 0;
}
nav *:first-child{
position: absolute;
right: .4em;
top: .2em;
cursor: pointer;
clear: both;
}
nav a{
display: block;
font-size: 3em;
color: white;
font-family: arial;
text-decoration: none;
margin-top: 1em;
}
nav span {
color: white;
font-size:1.3em;
}
JAVASCRIPT
window.addEventListener("load",function(){
$.each($('nav[data-action="expand"] *:first-child'),function(){
$(this).on("click",function(){
if($(this).parent().hasClass("open") === false)$(this).parent().addClass("open");
else $(this).parent().removeClass("open");
});
});
});
