javascript - 与响应式下拉（汉堡）菜单相关的 2 个问题

问题描述

我正在练习如何制作一个响应式汉堡菜单，但我对两个我想让它工作的功能感到麻烦。

我在汉堡菜单中使用了一个很棒的图标，当屏幕大于 480 像素时它不想消失。我得到这个工作的唯一方法是在图标类上应用“display：none”的内联样式，但是切换不起作用。只有当媒体查询条件“max-width:480px”满足时，如何才能显示汉堡图标？

编辑：好的，我设法通过在常规和媒体查询 css 上将“！important”应用于我的图标类来解决这个问题。它正在工作，但我听说使用这种方法是一种不好的做法？

我试图通过添加过渡动画使下拉菜单向下和向上滑动。我也可以得到有关如何做到这一点的提示吗？

谢谢你。

$(document).ready(function(){
  
  $(".fas").on("click",function(){
    $("header nav ul").toggleClass("open");
  });
});

body{
    font-family: Georgia;
    margin: 0;
}

.wrapper{
    max-width:100%;
    max-width: 1180px;
    padding: 0 10px;
    margin: 0 auto;
}

header nav{
    float: right;
}

header nav h2{
    text-indent: -10000px;
    height: 0;
    margin: 0;
}

header nav li{
    float: left;
    list-style-type: none;
    margin: 10px 20px;
}

header nav li a{
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

// MEDIA QUERIES //

@media screen and (max-width:768px) {

    header nav{
        float:none;
        clear:left;
        width:100%;
    }

    header nav ul {
        margin:0;
        padding:0;
    }

    h1.logo {
        margin:10px auto 0;
        float:none;
    }

    header nav ul li {
        margin:10px 0;
        width:20%;
        padding:0;
        text-align:center;
    }

}

@media screen and (max-width:480px) {

    .fa-bars {
        margin-top:10px;
        text-align: center;
        font-size:1.5rem;
        color:#333;
        height:40px;
        width:100%;
        cursor:pointer;
    }

    header .wrapper {
        padding:0;
    }

    header nav ul {
        overflow:hidden;
        background:#505050;
        height:0;
    }

    header nav ul.open {
        height:auto;
    }

    header nav ul li {
        float:none;
        text-align:left;
        width:100%;
        margin:0;
    }

    header nav ul li a {
        color:#fff;
        padding:10px;
        border-bottom:1px solid #404040;
        display:block;
        margin:0;
    }

    #home-menu li {
        float:none;
        width:96%;
        margin:30px 2%;
    }

}

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Resto</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
    
        <header>
            <div class="wrapper">
                <h1 class="logo">Resto</h1>
                <nav>
                    <i class="fas fa-bars"></i>
                    <h2>Main Navigation</h2>
                    <ul>
                        <li><a href="">Our Story</a></li>
                        <li><a href="">Menu</a></li>
                        <li><a href="">Reservations</a></li>
                        <li><a href="">News</a></li>
                        <li><a href="">Reviews</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        
      </body>
      
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    </html>

标签： javascriptjqueryhtmlcssresponsive

javascript - 与响应式下拉（汉堡）菜单相关的 2 个问题

问题描述

解决方案

推荐阅读