使响应式菜单更加用户友好

Question

我有一个超级菜单，在响应模式下对我来说很好用，但我想在响应时让它更加用户友好，因为它在下降时需要很大的空间。

以下是我正在使用的代码：

HTML：

<div id="menu-wrapper">
    <ul class="nav">
        <li>
            <a href='#'>Brands</a>
            <div>
                <div class="nav-column">
                    <ul>
                        <li><a href="index.php?brands=1">Siemens</a></li>
                        <li><a href="index.php?brands=2">KSB</a></li>
                        <li><a href="index.php?brands=3">Dadex</a></li>
                        <li><a href="index.php?brands=4">Hyundai</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href='#'>Products</a>
            <div>
                <div class="nav-column">
                    <h3>Automation</h3>
                    <ul>
                        <li><a href="index.php?stypes=1">Logo!</a></li>
                        <li><a href="index.php?stypes=2">Simatic-S7-200</a></li>
                        <li><a href="index.php?stypes=3">Simatic-S7-400</a></li>
                        <li><a href="index.php?stypes=4">Simatic-S7-1200</a></li>
                        <li><a href="index.php?stypes=5">HMI</a></li>
                    </ul>
                </div>
                <div class="nav-column">
                    <h3>Pumps</h3>
                    <ul>
                        <li><a href="index.php?products=7">Etanorm</a></li>
                        <li><a href="index.php?products=8">KWP</a></li>
                        <li><a href="index.php?products=9">ZORO</a></li>
                        <li><a href="index.php?products=10">DWT</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">About ME</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>

CSS：

/* Reset */
.nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.nav a {
    text-decoration: none;
}
.nav li {
    list-style: none;
}
/* Menu Container */
#menu-wrapper {
    border: 0 solid #000;
    width: 870px;
    margin: 10px 0 0 380px;
}
.nav {
    display: inline-block;
    position: relative;
    margin: 30px 0 0 0;
    cursor: default;
    z-index: 500;
    border: 0;
}
/* Menu List */
.nav > li {
    display: block;
    float: left;
}
/* Menu Links */
.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: #434343;
    background: #d8d8d8;
    background-image: -moz-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afafaf), to(#d8d8d8));
    background-image: -ms-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -o-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: linear-gradient(top, #afafaf, #d8d8d8);
    border-left: 1px dotted #c8c8c8;
    border-right: 1px dotted #c8c8c8;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li:hover > a {
    background: #c8c8c8;
}
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}
/* Search Form */
.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #c8c8c8;
}
.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #434343;
    background: #d8d8d8;
    background-image: -moz-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afafaf), to(#d8d8d8));
    background-image: -ms-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -o-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: linear-gradient(top, #afafaf, #d8d8d8);
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
.nav > li.nav-search input[type="text"]:focus {
    color: #434343;
}
.nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"] {
    width: 50px;
    padding: 15px 20px;
    border: 0 solid #000;
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}
.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 10px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
    background: #d8d8d8 url(../images/header/search1.png) no-repeat center center;
    border-radius: 0 3px 3px 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li.nav-search input[type="submit"]:hover {
    background-color: #d8d8d8;
}
/* Menu Dropdown */
.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #d8d8d8;
    background-image: -moz-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afafaf), to(#d8d8d8));
    background-image: -ms-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -o-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: linear-gradient(top, #afafaf, #d8d8d8);
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}
/* Menu Content Styles */
.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
    border-right: 1px dotted #c8c8c8;
}
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
.nav .nav-column li a {
    display: block;
    line-height: 26px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
.nav .nav-column li a:hover {
    color: #666666;
}

@media screen and (max-width: 480px) {
    #menu-wrapper {
        float: none;
        margin: 0 0 0 0;
        width: 100%;
    }
    .nav {
        display: block;
        margin: 0 0 0 0;
        cursor: default;
        border: 0 solid #000;
        padding: 0 0 0 0;
    }
    .nav>li {
        background: #efefef;
        display: block;
        margin: 0 0 0 0;
        float: none;
        width: 100%;
        padding: 0 0 0 0;
    }
    .nav >li>a {
        display: block;
        padding: 0 0 0 0;
        text-align: center;
        margin: 0 0 0 0;
    }
    .nav >li:hover > div {
        display: block;
        z-index: 999;
        position: static;
    }
    .nav .nav-column {
        float: none;
        width: 100%
    }
}

我想要实现的是当用户点击产品<li>时，产品<h3>下的所有<li>只会显示<h3>他们然后，当用户点击<h3>标记时，只会显示其对应的ul。

这是一个小提示，显示我到目前为止所尝试的内容：

http://jsfiddle.net/yH39r/4/

Answer 1

我创建了一个简单的jQuery代码来解决你的问题。

脚本：

 $('#menu-wrapper div.nav-column h3').hover(
    function(){
        $(this).parent().siblings().find('ul').css("display","none");
    },
    function(){
        $(this).parent().siblings().find('ul').css("display","");
    }
 );

这是工作fiddle

**更新：**

根据不同的要求更新了答案..

请查看更新的fiddle2

仅限Pure CSS，

我刚刚修改了原始层次结构。 （在课程中转换h3，并用div class="h3"替换标签

那就做到了！

**更新：**

消除响应能力..

如果屏幕尺寸小于480像素，请检查fiddle3哪个不会改变