Why is my responsive menu not shown?

by user173480   Last Updated August 14, 2019 07:08 AM

I have created the hamburger menu with responsive way, but it doesn't show. Any suggestions? Thank you so much!

HTML:

    <div class="overlay" id="overlay">
        <nav class="overlay-menu">
            <ul>
                <li><a href="#constellation">Home</a></li>
                <li><a href="#what is constellations?">About</a></li>
                <li><a href="#12 constellations">12 Constellations</a></li>
                <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li>
            </ul>
        </nav>
    </div>

CSS: .button-container{ position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity .25s ease; opacity: 1; content: ""; } .button-container:hover{ opacity: .7; } .top:active{ transform: translate(11px) translateX(0) rotate(45deg); } .middle:active{ opacity: 0; } .bottom:active{ transform: translateY(-11px) translateX(0) rotate(-45deg); } span{ background: rgba(0,0,0,0.6); border: none; height: 5px; width: 5%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; }

.overlay{ position: fixed; background: rgba(0,0,0,0.6); top: 0; left: 0; width: 5%; height: 0%; opacity: .6; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; }

li{ animation: fadeInRight .5s ease forwards; animation-delay: .35s; } li:nth-of-type(2) { animation-delay: .4s; } li:nth-of-type(3) { animation-delay: .45s; } li:nth-of-type(4) { animation-delay: .50s; } nav { position: relative; height: 70%; top: 20%; transform: translateY(-50%); font-size: 0.8em; } ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } li { display: block; height: 25%; min-height: 50px; position: relative; opacity: 0; } a { display: block; position: relative; text-decoration: none; overflow: hidden; } a:hover{ transform: scale(1);

} a:hover:after, a:focus:after, a:active:after { width: 30%; }

    a:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0%;
      transform: translateX(-50%);
      height: 3px;
      background: rgba(0,0,0,0.6);
      transition: .35s;

}

@keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }

js:

$(document).ready(function)(){ $('#toggle').on("click",function()){ $("#overlay").toggleClass('active'); $ ('#overlay').toggleClass('open'); }0; }0;
Tags : menus


Related Questions


Updated March 28, 2015 06:02 AM

Updated March 27, 2015 05:02 AM

Updated March 28, 2015 11:02 AM

Updated March 29, 2015 06:02 AM

Updated April 24, 2015 23:03 PM