Simple sub-menu with transition (ul-li-ul) - CSS & JS

Show a sub-menu with fade-in transition. Uses JS function to add/remove classes, CSS transition and opacity to show/hide.

by andioak

HTML

<nav id="nav-bar-mobile">
    <ul>
        <li><i class="nav_icon icn_more"></i>first item</li>
		
		<li onClick="showMenu();" class="pointer"><i class="nav_icon icn_hamburger"></i>second item (sub-menu)

            <ul class="sub-menu-ul" id="sub-menu-mobile">
                <li><a href="#" class="nav-link">contact</a></li>
                <li><a href="#" class="nav-link">support</a></li>
            </ul>

        </li>

    </ul>
</nav>

CSS

.pointer { cursor: pointer; }

li { line-height: 24px; margin-bottom: 5px; }

#sub-menu-mobile {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
#sub-menu-mobile.show {
    transition: opacity 1s ease-out;
    opacity: 1;
    height: auto;
}

JavaScript

function showMenu() {

    var menu = document.getElementById('sub-menu-mobile');
    var classes = menu.classList;

    if (classes.contains('show')) {
        classes.remove("show"); // hide if was shown and vice versa.
    } else {
        classes.add("show");
    }

}