CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Eduard Valentin
Eduard Valentin

Reputation: 179

CSS Dropdown menu onclick

I try to do a dropdown menu on click. I tried to toggle two classes when i click on the "Menu" and transition between 0 max-height and 20 em max-height on my navbar. But as I see when i have 0 max-height it's taking a white space like a placeholder. i dont want that because it messes my aspect of the website . I was thinking at display:block and display:none but i know you can't transitione between these two . Is there any way to create a dropdown menu on click when i click on a specified place ? EDIT :

i have this code:

html :

<header>
<nav>
<div class="handle">Menu</div>
<ul>
<li><a id="active" href="index.html">HOME</a></li>
<li><a href="collection.html">PRODUCTS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="info.html">CONTACT</a></li>
</ul>
</nav>
</header>

and css:

.handle{
    width: 100%;
    background:#333333;
    text-align: left;
    box-sizing: border-box;
    padding:15px 10px;
    cursor: pointer;
    display: none;
    color: white;
    box-sizing: border-box;
}

@media (max-width:980px){

    .showing{
        max-height:20em ;
    } 
 nav ul{
        max-height: 0;

    }
}

and the JS :

$(document).ready(function () {
$('.handle').on('click', function () {
 $('nav ul').toggleClass('showing')
});
});

There is some more styling to the header but i think is not important.Sorry if i was unclear .

Upvotes: 0

Views: 4938

Answers (1)

Hasan Tareque
Hasan Tareque

Reputation: 1741

this code works for me. hope will help ...

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>On click Menu</title>
        <style>
            .handle{
                width: 100%;
                background:#333333;
                text-align: left;
                box-sizing: border-box;
                padding:15px 10px;
                cursor: pointer;
                color: white;
                box-sizing: border-box;
            }

            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <div class="handle">Menu</div>
            <ul class="hide">
                <li><a id="active" href="index.html">HOME</a></li>
                <li><a href="collection.html">PRODUCTS</a></li>
                <li><a href="events.html">EVENTS</a></li>
                <li><a href="info.html">CONTACT</a></li>
            </ul>
        </nav>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>

            $(document).ready(function() {
                $('.handle').on('click', function() {
                    $('nav ul').slideToggle();
                });
            });

        </script>
    </body>
</html>

Upvotes: 1

Related Questions