CODEWITHSUNDEEP
javascripthtmlcss
forkingwithbill
forkingwithbill

Reputation: 75

Applying Drop Down Animation to Mobile Nav

My onClick function is working just fine, but I am trying to apply some css animation so the menu has a soft transition as it displays onClick. I've applied the animation to multiple elements, but none of them will apply the transition. 

<div id="mobileNav" class="mobileNav mobileNavHidden">
    <div class="row hdrIcons">
        <div>
            <ul class="mobileIcons">
                <li>
                    <a href="#">
                        <i></i>
                    </a>
                </li>
                <li>
                     <a href="#">
                        <i></i>
                     </a>
                </li>
                <li>
                      <a href="#">
                         <i></i>
                      </a>
                </li>
            </ul>
        </div>
    </div>
    <ul>
        <li><a href="#">about</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>

.mobileNavHidden {
    display: none;
}

 .mobileNav {
    z-index: 100000;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition:all .26s ease-in-out;
    -moz-transition:all .26s ease-in-out;
    -ms-transition:all .26s ease-in-out;
    -o-transition:all .26s ease-in-out;
    transition:all .26s ease-in-out;
}

var nav = document.querySelector('#mobileNav')

document.querySelector('.hambugerMenu').addEventListener('click', ()=> {
    hideShowNav()
})
function hideShowNav() {
    if (nav.classList.contains('mobileNavHidden')) {
        nav.classList.remove("mobileNavHidden")
    }
    else {
        nav.classList.add("mobileNavHidden")
    } 
}

Upvotes: 0

Views: 66

Answers (1)

Tibix
Tibix

Reputation: 390

i have made a JS Fiddle Example on how this can be achived.

JS Example:

$('#button').click(function () {
        $("#myDiv").fadeToggle("slow", "linear")
    });

You can also add a .slide Function if you wish. => Example

Please check the JS Fiddle Link. I made it as simple as possible. If you got any further Questions just ask in a comment.

Upvotes: 1

Related Questions