Question

我想在此菜单的“案例研究”部分添加一个下拉列表，但仍然可以在移动设备中保持响应。

这是我的代码：

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2e2e2e;
}
/* Float the list items side by side */

ul.topnav li {
    float: left;
    height: 40px;
}
/* Style the links inside the list items */

ul.topnav li a {
    display: inline-block;
    color: #e2e2e2;
    text-align: center;
    padding: 0px 10px 0px 0px;
    text-decoration: none;
    transition: 0.3s;
    font-family: 'Droid Serif', serif;
    font-weight: bold;
    font-size: 22px;
    color: #e2e2e2;
}
/* Change background color of links on hover */

ul.topnav li a:hover {
    background-color: #3b3b3b;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
    display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width: 680px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

@media screen and (max-width: 680px) {
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

<ul class="topnav" id="myTopnav">
    <li><a href="http://scott.ewarena.com/blog">Home</a></li>
    <li><a href="http://scott.ewarena.com/blog/blog.php">Case Studies</a></li>
    <li><a href="http://scott.ewarena.com/blog/about.php">About</a></li>
    <li><a href="http://scott.ewarena.com/blog/blog.php">Blog</a></li>
    <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
</ul>

对不起，这里有一个愚蠢的问题，我无法理解它。我想我最近学到了很多东西，现在我已经有一段时间了。我很疲惫！洛尔。

任何可以提供帮助的人？

谢谢！斯科特

在此菜单中添加子菜单？

0 个答案: