<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav id='navigasi'>
<span id='toggle-dropdown'>Menu<i class="fa fa-bars"></i></span>
<ul id='nav' class='hidemenu'>
<li><a href=''>menu 1</a></li>
<li><span class='subs'>menu 2<i class="fa fa-plus-square"></i><i class="fa fa-minus-square"></i></span>
<ul>
<li><a href=''>submenu 1</a></li>
<li><a href=''>submenu 2</a></li>
</ul>
</li>
<li><a href=''>menu 3</a></li>
<li><span class='subs'>menu 4<i class="fa fa-plus-square"></i><i class="fa fa-minus-square"></i>
</span>
<ul>
<li><a href=''>submenu 1</a></li>
<li><a href=''>submenu 2</a></li>
</ul>
</li>
</ul>
</nav>
.fa.fa-bars{
display:none;
}
#navigasi{
background:#3498db;
font-family:"Comic Sans MS", cursive, sans-serif;
}
#navigasi ul{
margin:0;
padding:0 8px;
list-style:none;
}
#navigasi ul li{
display:inline-block;
}
#navigasi li a,
#navigasi li span{
display:inline-block;
padding:0 8px;
text-decoration:none;
cursor:pointer;
line-height:40px;
}
#navigasi li a,
#navigasi li span,
#navigasi .fa-plus-square{
color:black;
}
#navigasi .fa-plus-square,
#navigasi .fa-minus-square{
margin-left:10px;
}
#navigasi li:hover .fa-plus-square{
display:none;
}
#navigasi li:hover .fa-minus-square{
display:inline-block;
}
#navigasi li .fa-minus-square{
display:none;
}
@media (min-width:481px){
#toggle-dropdown{display:none}
#navigasi ul ul{
display:none;
padding:0;
min-width:170px;
}
#navigasi ul ul li,
#navigasi ul ul li a{
display:block;
}
#navigasi ul li:hover ul{
display:block;
background:#ecf0f1;
position:absolute;
}
#navigasi li:hover span,
#navigasi li a:hover,
#navigasi li span:hover,
#navigasi li:hover .fa-plus-square{
background:#2980b9;
}
}
@media (max-width:480px){
.showmenu{display:block}
.hidemenu{display:none}
#toggle-dropdown,
#toggle-dropdown .fa.fa-bars{line-height:40px;}
#toggle-dropdown{display:block;cursor:pointer;padding:0 10px;}
.fa.fa-bars{display:inline-block;float:right;}
#navigasi{height:30%;overflow:auto;padding-bottom:4px}
#navigasi li a,#navigasi li span{border-bottom:1px dotted;}
#navigasi li a,
#navigasi li span,
#navigasi ul li{display:block;cursor:pointer;}
#navigasi ul ul{display:block;padding:0 0 0 10px;}
#navigasi li{position:relative}
#navigasi .fa-plus-square,
#navigasi .fa-minus-square{
position:absolute;
right:0;
line-height:40px;
}
#navigasi li:hover span,
#navigasi li a:hover,
#navigasi li span:hover,
#navigasi li:hover .fa-plus-square{
color:white;
}
}
document.getElementById('toggle-dropdown').addEventListener('click', toggleOpenMenu);
function toggleOpenMenu(){
document.querySelector('#navigasi ul').className = "showmenu";
document.querySelector('#toggle-dropdown').style.color = "white";
document.getElementById('toggle-dropdown').removeEventListener('click', toggleOpenMenu);
document.getElementById('toggle-dropdown').addEventListener('click', toggleCloseMenu);
}
function toggleCloseMenu(){
document.querySelector('#navigasi ul').className = "hidemenu";
document.querySelector('#toggle-dropdown').style.color = "black";
document.getElementById('toggle-dropdown').removeEventListener('click', toggleCloseMenu);
document.getElementById('toggle-dropdown').addEventListener('click', toggleOpenMenu);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.