试图使响应导航在每个页面中默认隐藏选项

Trying to make a responsive nav hide the options by default in each page

本文关键字：默认 选项 隐藏 响应 导航      更新时间：2023-09-26

我制作了一个响应导航，它隐藏了移动视图的所有页面。当用户点击菜单导航时，它会被切换并显示。问题是当你转到另一个页面时，导航会一直打开。我希望导航在访问任何页面时保持关闭。

jsfiddle-http://jsfiddle.net/mw59vvcm/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Taffies Cupakes</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
    <header>
        <a href="index.html"><img src="images/header.png" alt="taffies logo"></a>
    </header> <!-- end of header -->
<aside class="sidebar">
    <nav>
        <div class="menu"></div>
        <ul class="main_nav">
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav> <!-- end of nav -->
        <div class="company_info">
            <p>Taffies cupcakes</p>
            <p>111 x drive road</p>
            <p>milton keynes</p>
            <p>l0002</p><br>
            <p>telephone: 078 878-8888</p>
        </div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
<section class="first_article">
    <article>
        <p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
        <p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
        <a href="orders.html"><img src="images/contact-button.png" alt="contact_button" class="contact_button"></a>
        <img src="images/cupcake.png" alt="cupcake" class="cupcake">
    </article>
</section> <!-- end of section -->
<footer>
    <p>Taffie's Cupcakes &copy; copyright 2014</p>
        <ul>
            <li><a href="contact.html">contact us</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="index.html">home</a></li>
        </ul>
</footer> <!-- end of footer -->
</div> <!-- end of container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(".menu").click(function(){
        $(".main_nav").toggle();
    });
</script>
</body> 
</html>

*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
header,nav,section,article,aside,footer{
    display:block;
}
.container{
    width:960px;
    margin:0 auto;
}
body{
    background-color:#e8d4cb;
}
header img{
    padding:43px;
    display:block;
    margin:0 auto;
    box-sizing:border-box;
}
.first_article{
    float:left;
    width:500px;
    margin:25px;
}
.first_main_paragraph{
    font-family:arial;
    font-size:20px;
    color:#846a5f;
    margin-bottom:50px;
}
.second_main_paragraph{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}
.first_article .contact_button{
    float:left;
    margin-top:165px;
}
.first_article .cupcake{
    float:left;
    margin-top:20px;
    margin-left:19px;
}
.sidebar{
    float:left;
    margin:30px;

}
nav ul li a{
    text-decoration:none;
    font-family:myriad pro;
    font-size:20px;
    color:#3d2316;
    display:inline-block;
    padding-left:85px;
    padding-right:29px;
    padding-top:26px;
    padding-bottom:26px;
    width:39%;  
}
nav ul li:hover a{
    color:#e8d5cc;
}
nav ul li{
    margin-bottom:3px;
    background-color: #CBAFA2;
}
nav ul li:hover{
    background-color: #3D2316;
}
.company_info{
    background-color:#cbafa2;
    padding:20px;
    text-align:right;
    margin-bottom:100px;
    font-size:14px;
    color:#3d2316;
    font-family:myriad pro;
}
.about_section{
    float:left;
    width:500px;
    margin:25px;
}
.about_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}
.about_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}
.orders_section{
    float:left;
    width:500px;
    margin:25px;
}
.orders_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}
.second_order{
    margin-top:50px;
}
.order_text{
    font-family:arial;
    font-size:11px;
    color:#846a5f;
}
.order_numbers{
    color:#3D2316;
}
.gallery_section{
    float:left;
    width:600px;
    margin:25px;
}
.gallery_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}
.contact_section{
    float:left;
    width:500px;
    margin:25px;
}
.contact_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}
.contact_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}
footer{
    clear:both;
    font-family:arial;
    border-top:1px solid #aa8573;
    height:100px;
}
footer p{
    color:#784f3d;
    margin:10px;
    float:left;
}
footer ul li a{
    text-decoration:none;
    font-size:13px;
    color:#784f3d;
    margin:10px;
    float:left;
}
footer ul li{
float:right;
}
footer ul li a:hover{
    color:#3d2316;
}
figure{
    float:left;
    margin:25px;
}
figcaption{
    text-align:center;
    font-family:arial;
    font-size:13px;
    color:#846a5f;
    margin-top:15px;
}
span{
    font-family:arial;
    font-size:15px;
    color:#846a5f;
    font-weight:bold;
}

移动响应码：

@media screen and (max-width:640px){
    .container{
        width:100%;
    }
    .sidebar{
        width:100%;
        margin:0;
    }
    .main_nav{
        display:none;
    }
    .company_info{
        display:none;
    }
    .first_article{
        width:90%;
        margin-top:50px;
    }
    footer p{
        display:none;
    }
    .about_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }
    .orders_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }
    .contact_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }
    .gallery_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }
    .menu:before{
        content:"Menu";
    }
    .menu{
        font-family:myriad pro;
        font-size:20px;
        color:#3d2316;
        display:inline-block;
        padding-left:85px;
        padding-right:29px;
        padding-top:26px;
        padding-bottom:26px;
        background-color: #CBAFA2;
        margin-bottom:3px;
        cursor:pointer;
        width:100%;
    }

}

您必须用http://api.jquery.com/event.preventDefault/

如果还不够，请在DOM ready上隐藏元素。

相关文章：