Question

如何制作下拉式移动友好导航栏？我有一个导航栏，显示在网页的左侧，但我正在尝试制作一个适合移动设备的版本，当它是一个移动设备时，导航栏缩小到右上角的3行图标页面，用户必须单击它，然后可以选择他们想要去的页面。我已经拥有了“@media only screen and（max-device-width：1024px）{”在我的CSS中，我很确定我必须在那里添加CSS，但我似乎无法弄明白。

提前致谢。

以下是我对自己想到的内容的说明

HTML

<html>

    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
<nav>

    <a href="#" id="menu-icon"></a>

    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</nav>
</html>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #00008B;
    height: 80%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

li a {
    display: block;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #808080;
color: white;
}

@media only screen and (max-device-width: 1024px){

    ul:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    } 

    nav:hover ul {

        display: block;

    }
}

移动友好导航栏CSS

0 个答案: