Feeling stuck in one place with my code here: link
The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link
$(document).ready(function() {
$('.interfejs, .procesor, .dane, .grafika, .linux, .sieci').click(function() {
$('.dropdown-content').toggleClass('visible-dropdown');
})
})/*===Site nav content===*/
.nav-header {
width: 100%;
height: 65px;
position: relative;
text-align: center;
}
.nav-header h2 {
color: #fcfcfc;
font-size: 33px;
font-weight: 800;
letter-spacing: 1px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0 13px;
background-color: #011018;
z-index: 1;
width: auto;
display: inline-block;
text-shadow: 0px 0px 4px black;
}
.nav-header:after {
content: '';
background-color: #f5f5f5;
height: 1px;
width: 100%;
position: absolute;
top: 50%;
left: 0
margin-top: -0.5px;
}
.nav-menu {
position: relative;
}
.nav-menu a {
padding: 15px 8px 15px 32px;
margin-left: 20px;
text-decoration: none;
font-size: 20px;
font-weight: 200;
letter-spacing: 1px;
color: #818181;
background-color: #011018;
display: block;
transition: 0.3s;
position: relative;
}
.nav-menu a:hover {
background-color: #212E35;
color: #f5f5f5;
letter-spacing: 2px;
font-weight: 500;
}
.fa-angle-double-down {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
}
/*===dropdown-content===*/
.dropdown-content {
text-decoration: none;
color: #fff;
height: 0;
transition: 0.3s height;
background-color: #081d2a;
box-shadow: inset 4px 4px 10px #05141D;
margin-left: 20px;
}
.visible-dropdown {
height: 100px;
}
.dropdown-content li {
padding: 2px 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="site-nav">
<header class="nav-header">
<h2>Content List</h2>
</header>
<section class="nav-menu">
<a href="#" class="interfejs"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfaces</a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
<hr>
<a href="#" class="procesor">Processors<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
<hr>
<a href="#" class="dane">Data Storage<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
<hr>
<a href="#" class="grafika">Graphics<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
<hr>
<a href="#" class="linux">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
<hr>
<a href="#" class="sieci">Computer Networks<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>one</li>
<li>two</li>
<li>one</li>
<li>two</li>
</ul>
</section>
<!-- <button class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button> -->
</nav>