Question

我正在尝试完成本大学的Web开发入门课程的网页。现在，在更改屏幕尺寸时，尝试显示我的slicknav菜单以及将我的side 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>

在我的身体标签结尾之前

    <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";
    }

}

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

1 个答案: