jquery - 带有 slicknav 的媒体查询未显示并将我的其他菜单与网页底部的中心对齐

Question

我正在努力完成这个网页，以便在我的大学学习网络开发入门类(class)。现在，当我更改屏幕大小时，我在尝试显示 slicknav 菜单以及让我的侧 div 类中的底部菜单居中时遇到问题。理想情况下，当屏幕变小时，我会尝试让它在我的标题下方弹出。

我需要将侧边菜单放到页面底部，所以我切换到网格布局并将其称为包装器，但现在我的光滑导航菜单没有显示。我还尝试使用 .side 和 #side-menu 来引用我的底部菜单，但我无法通过自对齐或手动填充来使其变宽或居中。

下面是相关代码。如果您想查看所有内容，我也已将链接附加到我的虚拟主机。请帮我!我很沮丧:(

https://knemes.000webhostapp.com/halloween_starts_ch8/index.html

HTML

<div class="wrapper">
    <div class = "header">
        <header>
            <img src="images/pumpkin.gif" alt="pumpkin" width="85px"/>
            <h2>The Halloween Store</h2>
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; For the little Goblin in all of us!</h3>
        </header>
    </div>


<div class="menu">
    <nav id="mobile_menu"></nav>
    <nav>
        <ul id="menu">
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="#">Product List</a></li>
        <li><a href="#">Personal</a></li>
        <li><a href="#">Decorating Ideas</a>
            <ul>
                <li><a href="#">Outdoor</a></li>
                <li><a href="#">Indoor</a></li>
                <li><a href="#">Table</a></li>
                <li><a href="#">Treats</a></li>
            </ul>
        </li>
        <li><a href="#">Join Email</a></li>
        </ul>
        </nav>
</div>

<div class="side">
    <ul id ="side-menu">
        <li><a href="../public_html/halloween_starts/slides/products/props">Props</a></li>
        <li><a href="../public_html/halloween_starts/slides/products/costumes">Costumes</a></li>
        <li><a href="../public_html/halloween_starts/slides/products/special_effects">Special FX</a></li>
        <li><a href="../public_html/halloween_starts/slides/products/masks">Masks</a></li>
    </ul>      
</div>

以及在我的 body 标签结束之前

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="../js/jquery.slicknav.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) { 
    $('#menu').slicknav({
        prependTo:'#mobile_menu'
    });
});
</script>

CSS

.header {grid-area: header;}
.menu {grid-area: menu;}
.side {grid-area: side;}
.section {grid-area: section;}
.footer {grid-area: footer;}

/*side bar*/
.side {
    padding-top: 1.3em 0;
    width: 10.94em;
    float: left;
}

.side ul {
    list-style: none;
}

.side li {
    margin-bottom: .5em;
    margin-right: 2em;
    border: .13em solid black;
    background-color: orange;
}

.side li a {
    display: block;
    padding: .5em 0 .5em .5em;
    text-decoration: none;
    font-weight: bold;
    font-size: 85%;
    color: black;
}


#mobile_menu{
    display:none;
}

.slicknav_menu{
    display:none;
}


/*media queries*/
@media (max-width:800px) {

    html {
        background: none;
    }

    body {
        box-shadow: none;
        font-size: 90%;
    }
}

@media (max-width: 767px) {

    .wrapper{
        display: grid;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "menu"
            "section"
            "side"
            "footer";
    }

    .side{
        align-self: center;
    }

    html {
        background: none;  

    }

    header h2 {
        font-size: 200%;
        text-indent: 0;
    }

    header h3{
        text-indent: 0;
    }

    body {
        box-shadow: none;
        font-size: 90%;
        width: auto;
        margin: 0 auto;

    }

    section{
        width: auto;
        padding: 5%;
    }

    header img{
        float: left;
    }


    #menu {
        display: none;
    }

    #mobile_menu{
        display:block;
    }


}

@media (max-width: 479px) {

    header h2 {
        margin-top: .5em;
        text-indent: 10px;
        font-size: 1.7em;
    }

    header h3 {
        margin-top: 0;
        text-indent: 0;
        font-size: 1.1em;
    }

    main > h1 {
        font-size: 1.3em;
    }

    main > h1:first-child::first-letter {
        font-size: 2em;
    }
}

基本上，这就是我在屏幕变小时要实现的目标。如您所见，我快到了!我只需要一些帮助来完成。

goal

Answer 1

将媒体查询中的display:grid改为display:block如下图:

 @media (max-width: 767px){
    .wrapper {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas: "header"
     "menu"
     "section"
     "side"
     "footer";
    }