响应式导航栏切换菜单 jQuery

Question

After a user clicks anywhere on the page in a screen size > 600px the navigation list items disappear.

Also the backgrounds for the 9 panels in the body are set with a width of 100%, however the background is still not covering the page fully with space still showing on the left and right.

Any help on finding the fix for these issues is appreciated! :-)

 /*navigation icon animation*/ var trigger='X'; jQuery(document).ready(function () { $('#toggle-menu').click(function () { trigger='X'; $(this).toggleClass('menu-is-active') }); /* click outside of nav to trigger navigation icon animation*/ $(document).click(function () { if (trigger=='X') { $("#toggle-menu").toggleClass(); trigger='ham'; } }); $("nav").click(function (e) { e.stopPropagation(); return false; }); /*----/----navigation icon animation*/ /*toggle menu*/ jQuery("#toggle-menu").click(function () { jQuery(".nav").slideToggle(); }); /* click outside of nav to close toggle*/ $(document).click(function () { $(".nav").hide(); }); $("#toggle-menu").click(function (e) { e.stopPropagation(); return false; }); /*----/----toggle menu*/ });

 /****Landscape****/ /*global styles*/ .body { width: 100%; margin: 0; list-style: none; text-decoration: none; } a { color: #000000 } a:focus, a:hover { color: #484747; } a:active { color: #484747; } /*----/----global styles*/ /*Nav Bar*/ .header { background: #d3d3d3; width: 100%; position: fixed; top: 0; left: 0; z-index: 99999; } .nav { float: right; text-align: right; background-color: #d3d3d3; } .nav > li { display: inline-block; padding: 2px; padding-right: 30px; } /*----/----Nav Bar*/ /*Panels*/ .panel { width: 100%; height: 100%; background: #000000; text-align: center; } .panel .inner { padding-top: 10%; color: #df } .panel { color: #ffffff; } .panel.panel-blank { background: #ffffff; color: #000000; } /*----/----Panels*/ /*logo*/ .logo { float:left; display: inline-block; width: 15px; height: 15px; padding: 18px; cursor: pointer; } /*----/----logo*/ /****Portrait****/ @media (max-width: 600px) { /*global styles*/ .body { width: 100%; margin: 0; list-style: none; text-decoration: none; } .header { background: #d3d3d3; width: 100%; position: fixed; top: 0; left: 0; } .nav { position: fixed; width: 100%; text-align: center; display: none; background-color: #d3d3d3; left: 0; top: 39px; } .nav > li { display: block; float: center; border-bottom: 0.05em solid #000000; } .nav > li:last-child { border-bottom: none; } /*----/----global styles*/ /*logo*/ .logo { float:left; display: block; width: 15px; height: 15px; padding: 18px; cursor: pointer; } /*----/----logo*/ /*navigation icon*/ #toggle-menu { float:right; display: block; width: 15px; height: 15px; padding: 20px; cursor: pointer; } #toggle-menu div { width: 15px; height: 15px; position: relative; } #toggle-menu span { display: block; width: 15px; height: 3px; background: black; position: absolute; -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; -webkit-transform-origin: center; -moz-transform-origin: center; transform-origin: center; } #toggle-menu span.top { top: 0px; } #toggle-menu span.middle { top: 6px; } #toggle-menu span.bottom { top: 12px; } /*----/----navigation icon*/ /*navigation icon animation*/ #toggle-menu.menu-is-active span { -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; } #toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle { top: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } #toggle-menu.menu-is-active span.middle { opacity: 0; } #toggle-menu.menu-is-active span.bottom { top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /*----/----navigation icon animation*/ } /*----/----Portrait*/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="header"> <div class="navbar"> <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a> <a id="toggle-menu"> <div> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> </a> <ul class="nav"> <li><a href="" style="display: inline-block; width:100%;">Home</a></li> <li><a href="#panel8" style="display: inline-block; width:100%;">About</a></li> <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li> <li><a href="#panel7" style="display: inline-block; width:100%;">Contact</a></li> </ul> </div> </div> <div class="panel" id="panel1"> <div class="inner"> 1 </div> </div> <div class="panel panel-blank" id="panel2"> <div class="inner"> 2 </div> </div> <div class="panel" id="panel3"> <div class="inner"> 3 </div> </div> <div class="panel panel-blank" id="panel4"> <div class="inner"> 4 </div> </div> <div class="panel" id="panel5"> <div class="inner"> 5 </div> </div> <div class="panel panel-blank" id="panel6"> <div class="inner"> 6 </div> </div> <div class="panel" id="panel7"> <div class="inner"> <P>contact</P> </div> </div> <div class="panel panel-blank" id="panel8"> <div class="inner"> <p>Social</p> </div> </div> <footer> <div class="panel " id="panel9"> <div class="inner"> Footer </div> </div> </footer>

Answer 1

I don't see any problem with the width of the 9th panel.

Here is the what you want based on your words of-course.

After a user clicks anywhere on the page in a screen size > 600px the navigation list items disappear

Fiddle example ( UPDATED based on your comment) : https://jsfiddle.net/wexd3spp/19/

jQuery(document).ready(function () {
    $(window).resize(function(){
         if ($(window).width() >=600) {
            $(".nav").show();
        }
        else{ $(".nav").hide();}
    });
    $('#toggle-menu').click(function () {

        $(this).toggleClass('menu-is-active')

    });

    /* click outside of nav to trigger navigation icon animation*/
    $(document).click(function () {
        $("#toggle-menu").removeClass();
    });
    $("nav").click(function (e) {
        e.stopPropagation();
        return false;
    });

    /*----/----navigation icon animation*/

    /*toggle menu*/
    jQuery("#toggle-menu").click(function () {
        jQuery(".nav").slideToggle();
    });
    /* click outside of nav to close toggle*/
    $(document).click(function () {

        if ($(window).width() < 600) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
    });
    $("#toggle-menu").click(function (e) {
        e.stopPropagation();
        return false;
    });
    /*----/----toggle menu*/

});

Answer 2

Okay so I have made a copy of this project myself and looked at all of the problems you have got and tried to find the simplest solution to them I can.

The problem with the spacing either side of the page is because you need to add the following in the css:

body {
    margin: 0;
}

For the nav not toggling open and close I did the following:

Add this to your css:

.show {
    display: block!important;
}

And then I wrote some simple JQuery to toggle the nav:

  $('#toggle-menu').click(function(){
        $('.nav').toggleClass('show');
    });