html - 响应式导航菜单水平下拉

Question

我想设计一个导航菜单，通过将水平菜单更改为单个按钮来响应页面的宽度，该按钮在单击时会下拉菜单。

我见过的所有示例似乎都使用 Javascript 或 JQuery。是否只有一种 CSS 方法可以做到这一点？

我的想法是创建两个不同的 <ul></ul>元素。一个用于水平下拉菜单，一个用于垂直下拉菜单。并使用媒体查询根据屏幕大小隐藏一个。这可以使用单个 <ul></ul> 来完成吗？元素代替？

Answer 1

这是使用 CSS 实现 Bootstrapish 功能的一种方法。也可以使用 CSS 添加一些流畅的动画，我会把它留给你来解决，并在必要时优化代码。 (调整预览窗口大小以查看效果)。

fiddle :http://jsfiddle.net/875v00ge/ .

HTML:

<nav>
    <span tabindex = "1"></span>
    <span></span>
    <div class = "menuWrapper">
        <ul>
            <li><a href = "">About</a></li>
            <li><a href = "">Company</a></li>
            <li><a href = "">FAQ</a></li>
            <li><a href = "">Contact</a></li>
            <li><a href = "">Help</a></li>
        </ul>
    </div>
</nav>

CSS:

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

a {
    color: rgb(50, 50, 50);
    text-decoration: none;
}

nav {
    background-color: rgb(240, 240, 240);
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
    display: table;
    height: calc(14px * 3);
    width: 95%;
    margin: 25px auto;
    position: relative;
}

nav span {
    width: calc(14px * 1.5);
    height: 14px;
    display: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    outline: 0;
    cursor: pointer;
}

nav span:first-of-type {
    border: solid rgb(100, 100, 100);
    border-width: 2px 0;
    padding: 4px 0;
    height: 2px;
    background-color: rgb(100, 100, 100);
    background-clip: content-box;
    z-index: 2;
}

nav span:nth-of-type(2) {
    z-index: 1;
    background-color: transparent;
}

nav li {
    float: left;
    font: normal 14px/3 Sans-Serif;
}

nav li:first-of-type {
    margin-left: 10px;
}

nav li a {
    display: inline-block;
    padding: 0 10px;
}

nav li a:hover {
    background-color: rgb(220, 220, 220);
}

@media screen and (max-width: 360px) {
    nav .menuWrapper {
        position: absolute;
        top: 100%;
        width: 100%;
        left: -1px;
        overflow: hidden;
        border: 0px solid rgb(200, 200, 200);
    }

    nav ul {
        transform: translateY(-100%);
        background-color: rgb(235, 235, 235);
    }

    nav {
        border-radius: 0;
    }

    nav li {
        float: none;
    }

    nav li:first-of-type {
        margin-left: 0;
    }

    nav li a {
        display: block;
    }

    nav span {
        display: block;
    }

    nav span:first-of-type:focus {
        border-color: green;
        background-color: green;
        z-index: 0;
    }

    nav span:first-of-type:focus ~ .menuWrapper {
        border-width: 1px;
    }

    nav span:first-of-type:focus ~ .menuWrapper > ul,
    nav span:first-of-type:not(:focus) ~ .menuWrapper > ul:hover {
        transform: translateY(0%);
    }
}