9

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

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

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

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

4

6 回答 6

5

对于没有 java 脚本的多级下拉菜单，我在这里创建了一个示例。

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;
}
​
于 2012-10-03T09:53:53.703 回答
3

You only have one option for a pure-CSS dropdown menu that works with iOS devices: use anchor tags and toggle 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;
}

I have tested this on an iPhone 4 iOS6 and it works fine. Also tested on a Kindle Fire. I don't have access to an android phone for testing, so you want to check those devices.

JS Fiddle: http://jsfiddle.net/aGYnU/2/

Making it responsive:

Play with the styles a bit. Change the positioning. Use em or percentage% values for the dimensions. You may need to use em values for the font-sizes within the menu as well (or media queries to set font-size based on viewport size).

Functionality should continue to work.

于 2012-10-06T07:55:23.067 回答
3

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

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

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

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

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

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

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

于 2012-10-02T13:58:05.533 回答
2

我也试图解决这个问题。而且我认为根本不可能找到满足我所有需求的解决方案。但这对大多数人来说可能已经足够了：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 中，点击菜单触发器后整个页面会重新加载，但之后菜单会正常显示。
于 2012-10-08T12:02:14.193 回答
1

移动浏览器通常会在点击时显示/隐藏任何 :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/

于 2012-10-02T13:57:32.853 回答
0

用 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>

​</p>

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;
}
于 2012-10-09T09:43:51.440 回答