Question

我正在练习如何制作响应式汉堡菜单，但是我想使用两个功能使我感到困扰。

我在汉堡菜单中使用了一个字体惊人的图标，并且当屏幕大于480px时，它不希望消失。我得到的唯一方法是在图标类上应用内联样式“ 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>

Answer 1

您可以像使用菜单一样使用字体超赞图标作为背景图像：

from sklearn.ensemble.partial_dependence import partial_dependence, plot_partial_dependence
import pandas as pd
from pandas import read_csv, DataFrame
from sklearn.ensemble import GradientBoostingRegressor
import numpy as np

my_model = GradientBoostingRegressor()
my_model.fit(X, y)

my_plots = plot_partial_dependence(my_model,       
                        features=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
                        X=X,        
                        feature_names=['core_self_evaluations', '1b_score', 'investigate','respect_for_people','social','mastery_orientation','realistic','conventional','astronaut_score','innovation','agreeableness','gradeClass_second_lower','AC_TeamPlayer','enterprising','AC_Problemsolving','AC_StartsConversation','verbal','leadership_score','Race_chinese','performance_orientation','self_monitoring','UniLoc_overseas','attention_to_detail'], # labels on graphs
                        grid_resolution=5)

这应该可以更轻松地添加显示：通过javascript或通过媒体查询都可以。

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

1 个答案: