JSFiddle - React, Tailwind, and code Playground
by envira
HTML
<nav class="nav-container group" id="nav-topbar">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container transition" style="height: 0px;"><ul id="menu-main-menu" class="nav container-inner group"><li id="menu-item-4110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4110"><a href="http://www.freebiesgallery.com/">Home</a></li>
<li id="menu-item-2012" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-2012"><a href="http://www.freebiesgallery.com/psd/">PSD</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-2016" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2016"><a href="http://www.freebiesgallery.com/buttons/">Buttons</a></li>
<li id="menu-item-1338" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1338"><a href="http://www.freebiesgallery.com/forms/">Forms</a></li>
<li id="menu-item-2014" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2014"><a href="http://www.freebiesgallery.com/gui/">GUI</a></li>
<li id="menu-item-1738" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1738"><a href="http://www.freebiesgallery.com/mobile/">Mobile</a></li>
<li id="menu-item-2017" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2017"><a href="http://www.freebiesgallery.com/navigation/">Navigation</a></li>
<li id="menu-item-1450" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1450"><a title="Objects" href="http://www.freebiesgallery.com/objects/">Objects</a></li>
</ul>
</li>
<li id="menu-item-2018" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2018"><a href="http://www.freebiesgallery.com/vector/">Vector</a></li>
<li id="menu-item-2022" class="menu-item...CSS
/* header : nav topbar
/* ------------------------------------ */
#nav-topbar.nav-container { background: #26272b;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #fff; color: rgba(255,255,255,0.7); }
@media only screen and (min-width: 1025px) {
/* fixed nav */
.full-width.topbar-enabled #header { padding-top: 50px; }
.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
.full-width.admin-bar #nav-topbar.nav-container { top: 32px; }
}
@media only screen and (min-width: 720px) {
/* common */
#nav-topbar .nav { }
#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
/* level 1 */
#nav-topbar .nav > li { border-right: none; }
#nav-topbar .nav > li > a:hover,
#nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
#nav-topbar .nav li > a:hover,
#nav-topbar .nav li:hover > a,
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-menu-ancestor > a,
#nav-topbar .nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
#nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; }
#nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
#nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
}
@media only screen and (max-width: 719px) {
/* common */
#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
/* level 1 */
#nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
#nav-topbar .nav...JavaScript
$('.nav-toggle').on('click', function() {
slide($('.nav-wrap .nav', $(this).parent()));
});
function slide(content) {
var wrapper = content.parent();
var contentHeight = content.outerHeight(true);
var wrapperHeight = wrapper.height();
wrapper.toggleClass('expand');
if (wrapper.hasClass('expand')) {
setTimeout(function() {
wrapper.addClass('transition').css('height', contentHeight);
}, 10);
}
else {
setTimeout(function() {
wrapper.css('height', wrapperHeight);
setTimeout(function() {
wrapper.addClass('transition').css('height', 0);
}, 10);
}, 10);
}
wrapper.one('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function() {
if(wrapper.hasClass('open')) {
wrapper.removeClass('transition').css('height', 'auto');
}
});
}
});