写了一个拙劣的响应式导航条，遇到两个问题求前辈们解答一下。

Question

写了一个拙劣的响应式导航条，遇到两个问题求前辈们解答一下。

发布于
2017-08-14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html,body{
            height: 100%;
        }

        #menu{
            border:1px solid #FF00B4;
            overflow: hidden;
        }

        #left{
            width: 80px;
            height: 50px;
            border:1px solid red;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            float: left;
        }

        #right{
            float: right;
        }

        #right ul{
            list-style: none;
        }

        #right ul li{
            display: inline-block;
            text-align: center;
        }

        #right ul li a{
            display: inline-block;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            margin-right:20px; 
        }

        .btn{
            width: 50px;
            height: 50px;
            background: aqua;
            float: right;
            display: none;
        }

        @media screen and (max-width:489px){
            #menu{
                position: relative;
            }

            #right ul{
                display: none;
            }
            .btn{
                display: block;
            }

            #right{
                width: 100%;
            }

            #right ul li{
                text-align: center;
                display: block;
            }

            #right ul li a{
                width: 100%;
                border-top:1px solid #F4EFEF;
            }

            #right ul li a:hover{
                background: #F5F5F5;
            }

            @media screen and (min-width:489px){
                #right ul{
                    display: block;
                }
            }

    }
    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    <script>
        $(function(){
            $(".btn").on("click",function(){
                $('ul').toggle();
            })
        })
    </script>
</head>
<body>
    <div id="menu">
        <div id="left">Hello</div>
        <button class="btn">
            
        </button>
        <div id="right">
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">nav</a></li>
                <li><a href="">head</a></li>
                <li><a href="">footer</a></li>
                <li><a href="">section</a></li>
                <li><a href="">about</a></li>
            </ul>
        </div>
    </div>

    122222<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
</body>
</html>

第一个问题：我缩小浏览器窗口，点击按钮出现ul之后，再次点击隐藏ul。然后扩大浏览器，大屏幕下的导航条ul不见了。。。

第二个问题：在小窗口下，如何使点击按钮下拉的内容，悬浮在下面数字内容之上。我用了定位试了，感觉对于哪个层设置relative和absolute不是太清晰了。。。

求大神帮小白解答一下。

javascript

阅读 1.5k

1 个回答

得票最新

yiiouo

71721829

发布于
2017-08-14