个人中心
gpt4 book ai didi

javascript - 尝试使响应式导航在每个页面中默认隐藏选项

转载 作者：行者123 更新时间：2023-11-28 09:29:56 24 4
gpt4 key购买 nike

我做了一个响应式导航，它隐藏了移动设备 View 的所有页面。当用户单击菜单导航时，它会被切换并出现。事情是当你去另一个页面然后导航保持打开状态。我希望导航在访问任何页面时保持关闭状态。

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 上。

关于javascript - 尝试使响应式导航在每个页面中默认隐藏选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25755437/

24 4 0
文章推荐： javascript - Prototype.js 1.6.x toJSON 行为不当
文章推荐： javascript - 如何插入页面跳转并在同一页面内打开选项卡
文章推荐： javascript - 克隆时如何通过单选按钮动态控制复选框
文章推荐： swift - iAd Interstitial 触摸激活场景按钮。 swift
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com