响应式导航菜单水平下拉答案

【问题标题】：Responsive navigation menu horizontal to drop down响应式导航菜单水平下拉
【发布时间】：2015-08-18 17:58:33
【问题描述】：

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

我见过的所有示例似乎都使用 Javascript 或 JQuery。有没有唯一的 CSS 方法来做到这一点？

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

【问题讨论】：

是的，只需调整您不同媒体查询中的样式，使其看起来像您想要的那样定位。
单击时下拉...这就够了...您无法使用 CSS 处理单击事件，因此您需要 javascript 或 jquery..否则您需要使其在悬停而不是单击哪个对手机没用..
最好的方法是使用引导程序，很好的内置 css 类。您可以通过几个步骤构建一个下拉菜单。

标签： html css drop-down-menu

【解决方案1】：

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

小提琴：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%);
    }
}

【讨论】：