Animated, permanent dropdown from navigation like example. How to accomplish? - css

Question

I really like the result of clicking the plus button at the end of the navigation on this page. http://demo.dinevthemes.com/planum/
I wanted to incorporate something similar into a site, but can't get it to work. From what I can tell, this is the code they're using, but when I test it out, the item stays visible and doesn't hide.
Any tips on why I am doing it wrong?
You can see the site I am incorporating it to here - http://dismantledesign.com/testsite/
.toggle-top::before {
content: none;
display: inline-block;
font-family: "FontAwesome";
font-size: 18px;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toggle-top:before {
content: '\f067';
}
.menu-toggle::before, .toggle-top::before {
color: #1CCCA0;
}
.toggle-top {
display: block;
position: absolute;
right: 72px;
top: 44px;
}
.toggle-top.top-display:before {
padding-left: 5px;
padding-top: 0;
content: '\f068';
}
.top-left {
width: 35%;
}
.top-left,.top-right {
float: left;
}
.top-right {
text-align: right;
width: 65%;
padding-right: 40px;
padding-top: 15px;
}
.top-wrapper {
display: none;
background: #DEDEDE;
padding: 24px 72px;
}
.top-wrapper form {
margin: 0;
}
.top-wrapper ul.menu li {
display: inline-block;
padding-left: 10px;
}
.top-wrapper ul.menu,.navigation-main ul {
padding-left: 0;
list-style: none;
margin: 0;
}
<div class="top-wrapper clearfix" style="display: block;">
<div class="top-left">
<form method="get" id="searchform" class="searchform" action="http://demo.dinevthemes.com/planum/" role="search">
<label for="s" class="screen-reader-text">Search</label>
<input type="search" class="field" name="s" value="" id="s" placeholder="Search">
<input type="submit" class="submit" id="searchsubmit" value="Search">
</form>
</div>
<div class="top-right">
<div class="menu-topic-container"><ul id="menu-topic" class="top-menu"><li id="menu-item-3084" class="menu-item menu-item-type-custom menu-item- object-custom menu-item-3084">[phone]</li>
<li id="menu-item-2967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2967">current location</li>
</ul></div> </div>
</div>

Answer 1

The site you are referring to is using jQuery for toggleClass and the slideDown effect. I created a small jsFiddle example that shows you how you can build it on your own.
Rather then adding a lot of animation with javascript, I implemented only one function for the toggle of classes .active for the plus-icon and .open for the subnav. The animation is done with css. In the beginning the subnav has top: 0 and is not visible because it is below the main-nav. But when we toggle the class open it will move below the main-nav and is visible.
If you have any remaining questions, use the comment section.
$(".subnav-toggle").click(function() {
$(this).toggleClass("active");
$(".subnav").toggleClass("open");
});
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style-type: none;
}
.nav {
background: #fff;
position: relative;
z-index: 2;
}
.subnav {
position: absolute;
top: 0;
background: #ccc;
width: 100%;
z-index: 1;
transition: .25s all;
}
.subnav.open {
top: 58px;
}
.fa::before {
content: none;
display: inline-block;
font-family: "FontAwesome";
font-size: 18px;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav--item a {
display: block;
padding: 20px;
text-decoration: none;
}
.subnav-toggle.active {
background: #ccc;
}
.subnav-toggle:before {
content: '\f067';
}
.subnav-toggle.active:before {
content: '\f068';
}
.nav--item.last {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav>
<ul class="nav">
<li class="nav--item">Markup</li>
<li class="nav--item">Pages</li>
<li class="nav--item">Levels</li>
<li class="nav--item">Categories</li>
<li class="nav--item"></li>
</ul>
<div>
<ul class="subnav">
<li class="nav--item">Markup</li>
<li class="nav--item">Pages</li>
<li class="nav--item">Levels</li>
<li class="nav--item">Categories</li>
</ul>
</div>
</nav>