导航

CSS06-响应式导航栏实验

Posted on 2020-01-04 11:03  C_BJ  阅读(220)  评论(0)    收藏  举报

把菜鸟里响应式导航栏和下拉菜单的示例加在了一起，但是没有出现预期的效果，出现的问题有两个：1.设置两个媒体查询时，只有一个生效，和代码顺序无关，而且单个测试时都能生效。2.水平导航栏添加的下拉菜单会出现溢出，如果将overflow设置为hidden下拉菜单不会显示。代码如下：

Nav02.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式边栏导航+下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="Nav02.css">
</head>
<body>
    <ul id="Nav">
        <li><a class="active" href="#">主页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系</a></li>
        <li class="dropdown">
            <a class="dropbtn" href="#">关于</a>

            <div class="DC">
                <a href="#">关于我们</a>
                <a href="#">赞助商</a>
                <a href="#">指导</a>
            </div>
        </li>
    </ul>
    <div class="content">
        <h4>响应式边栏导航</h4>
        <p>
            当窗口小于700px,变为水平导航栏;
            当窗口大于700px,变为左侧固定导航栏。
        </p>
        <p>
            当窗口小于600px,变为左侧固定导航栏;
            当窗口大于600px,变为水平导航栏。
        </p>
        <h4>问题1.可以实现在700px的转变，但窗口大小小于600时没有转为垂直导航栏。</h4>
        单个测试时都可以实现；
        <br>与顺序无关；
        <br>与使用class或id无关；
        <h4>问题2.水平导航栏的下拉菜单会出现溢出的现象，如果overflow设置为hidden，菜单不会出现。</h4>
    </div>

</body>
</html>

　　Nav02.css:

body{
    margin: 0;
}
#Nav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: #555555;
    position: fixed;
    height: 100%;
    overflow: auto;
}
#Nav li>a{
    display: block;
    text-decoration: none;
    color: white;
    padding: 14px 16px;
}
#Nav li>a:hover:not(.active){
    color: #555555;
    background-color: #f1f1f1;
}
#Nav li>a.active{
    background-color: lightgrey;
}
div.content{
    margin-left: 20%;
    padding: 1px 16px;
    height: 1000px;
}
.DC{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    //min-width: 160px;
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
}
.DC a{
    color: darkgray;
    padding: 10px 14px;
    text-decoration: none;
    text-align: center;
    display: block;
}
.DC a:hover{
    color: white;
    background-color: darkgray;
}
.dropdown:hover .DC{
    display: block;
}

@media screen and (max-width: 700px){
    #Nav{
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #555555;
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
    }
    #Nav li{
        float: left;
    }
    div.content{
        margin-left: 0;
    }
}
@media screen and (max-width: 600px){
    #Nav a{
        text-align: center;
        float: none;
    }
}

　　如有大佬路过，能告诉我怎么解决就好了（想屁吃）。