没有 JS 依赖的基于 CSS 的响应式多级下拉菜单的解决方案？

Question

我一直在查看可用的响应式下拉菜单/导航栏，但似乎没有任何工作正常。我主要需要一个不依赖于 JavaScript hack 的基于 CSS 的菜单。

为什么不使用 JS？基于 JS 的解决方案无法在 Opera Mini 等代理浏览器上运行，我们的大多数观众都在使用它，而黑莓浏览器在 JS 上表现不佳。

很多人提倡使用选择菜单进行移动导航。一个有趣的解决方案，但这又依赖于 JS，并且对于嵌套的多级菜单非常繁琐。

那么，您遇到过哪些可能适合您的导航系统？

Answer 1

对于没有 java 脚本的多级下拉菜单，我创建了一个 sample here。

HTML：

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>​

CSS：

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}
​

Answer 2

我要直接说这个解决方案/模式不是一个下拉解决方案。但是，这是重新考虑响应式设计导航的一种非常酷的方式。我也不知道您的导航需求的全部范围，所以这对您来说可能不够复杂。

查看内容杂志网站：http://contentsmagazine.com/

注意徽标下的主导航。在较小的视口中查看（调整浏览器大小）时，您将看到“探索”链接。点击该链接后，您将进入导航。

事情是这样的：只是一个简单的锚链接。

模式是这样的：就页面源顺序而言，您的导航实际上是朝向页面的底部。 （而且，就语义而言，这很有意义。）页面顶部有一个简单的锚链接，可以跳转到导航（这也是可访问性的最佳实践）。

因此，考虑到移动优先，页面在页面底部加载导航，但用户可以单击锚链接来访问它。因为它是一个锚链接，所以跳跃是瞬间的，实际上几乎感觉就像一个下拉。

然后，随着视口变大，仅使用 CSS，导航将移动（无论如何）到页面顶部，并位于徽标下方。这是通过简单的绝对定位来实现的。

Answer 3

对于适用于 iOS 设备的纯 CSS 下拉菜单，您只有一个选项：使用锚标记并切换 display: none/block (short article on iOS Safari hover behavior)。

HTML：

<ul>
    <li><a href="#">Menu Item 1</a>
         <ul>
             <li>SubLink1.1</li>
             <li>SubLink1.2</li>
             <li>SubLink1.3</li>
             <li>SubLink1.4</li>
         </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
         <ul>
             <li>SubLink2.1</li>
             <li>SubLink2.2</li>
             <li><a href="#">SubMenu3 &gt;&gt;</a>
                 <ul>
                     <li><a href="#">Nested Link 2.3.1 &gt;&gt;</a>
                     <ul>
                         <li>Nested Link 2.3.1.1</li>
                         <li>Nested Link 2.3.1.2</li>
                     </ul>
                     </li>
                     <li>Nested Link 2.3.2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
         <ul>
             <li><a href="#">SubMenu3.1 &gt;&gt;</a>
                 <ul>
                     <li>Nested Link 3.1.1</li>
                     <li>Nested Link 3.1.2</li>
                     <li>Nested Link 3.1.3</li>
                     <li>Nested Link 3.1.4</li>
                     <li>Nested Link 3.1.5</li>
                     <li>Nested Link 3.1.6</li>
                 </ul>
             </li>
             <li>SubMenu3.2</li>
         </ul>
    </li>
</ul>

CSS：

li>ul { display: none; }
li:hover>ul{
    display: block;
}

我在 iPhone 4 iOS6 上对此进行了测试，它运行良好。还在 Kindle Fire 上进行了测试。我无法使用 Android 手机进行测试，因此您想检查这些设备。

JS 小提琴：http://jsfiddle.net/aGYnU/2/

使其具有响应性：

稍微调整一下样式。改变定位。使用 em 或 percentage% 值作为尺寸。您可能还需要为菜单中的字体大小使用 em 值（或媒体查询以根据视口大小设置字体大小）。

功能应该继续工作。

Answer 4

我也尝试过解决这个问题。而且我认为根本不可能找到满足我所有需求的解决方案。但这对大多数人来说可能已经足够了：http://jsfiddle.net/selfthinker/T7dDm/

HTML：

<ul>
  <li class="dropdown" onclick=""><span>Menu</span>
    <ul>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Another menu item</a></li>
    </ul>
  </li>
</ul>

CSS：

li.dropdown > span {
    cursor: pointer;
    /* style the "Menu" to make it appear clickable (e.g. replace it with a house icon?) */
    font-size: 2em;
    font-weight: bold;
    color: #00c;
}
li.dropdown {
    position: relative;
}
li.dropdown:hover > ul,
li.dropdown:active > ul,
li.dropdown:focus > ul {
    display: block;
}
li.dropdown > ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0;
    /* and style away: */
    background-color: #ccc;
    font-size: 1.5em;
}

我已经在新 iPad 上的 Safari 和 Opera Mini、Android（2.2.2，HTC Desire）的股票浏览器和 Opera Mini 以及一些桌面浏览器上测试了这个。它基本上适用于任何地方。这些是剩余的问题：

1. 它不能通过键盘访问，也就是说，您不能在菜单项之间切换。您可以使菜单下拉菜单本身出现在选项卡上，但是我不知道（没有 JavaScript）可以让您访问其中的项目。这对我来说是最大的问题。
2. 在 iPad 和所有 Opera Mini 上的 Safari 中，菜单不会在您点击后立即关闭。您需要重新加载或单击链接。 （在 Android 浏览器中，您只需点击屏幕上的任何其他位置即可关闭菜单。）可能有解决方案吗？
3. 在 Opera Mini 中，点击菜单触发器后会重新加载整个页面，但之后菜单会正常显示。

Answer 5

移动浏览器通常会在点击时显示/隐藏任何 :hover 内容，如果不是链接的话。使用此代码：

HTML：

<ul>
<li id="showhide">I am visible, and can be tapped/hovered.
     <ul id="menu">
          <li>Menu item 1</li>
          <li>Menu item 2</li>
     </ul>
</li>
</ul>

CSS：（无样式）

#showhide{
     position:relative;
}
#menu{
     position: absolute;
     left: -999px
}
#showhide :hover #menu{
     left: 0px;
}

这是 JSFiddle：http://jsfiddle.net/VVqBU/

Answer 6

用 div 和锚点做了一个例子。希望对您有所帮助！

http://jsfiddle.net/UufP5/9/

html：

 <div class="mymenu">
<div class="menu">
    <div class="menu_title">
        menu 1
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
        <a href="#">submenu5</a>
        <a href="#">submenu6</a>
    </div>
</div>
<div class="menu">
    <div class="menu_title">
        menu 2
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
    </div>                
</div>
<div class="menu">
    <div class="menu_title">
        menu 3
    </div>
    <div>
        <a href="#">submenu1</a>
    </div>           
</div>

​

css:

 .mymenu{
font-size: 18px;
position:absolute;
z-index:1;
}
.menu{
    background: #222;
    color: #f9f9f9;
    height: 1em;
    overflow:hidden;
    display:inline-block;
    float:left;
    padding: 0.3em;
}

.menu:hover{
    height: auto;
}

.menu a{
    display:block;
    color: #abc;
}