无JS依赖的基于CSS的响应多级下拉菜单解决方案

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

为什么不使用JS？基于JS的解决方案无法在Opera Mini这样的代理浏览器上工作，我们的大多数受众都使用它，而黑莓浏览器在使用JS时表现得不太好。

许多人主张使用选择菜单进行移动导航。这是一个有趣的解决方案，但它再次依赖于JS，并且对于嵌套的多级菜单来说非常乏味。

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

对于没有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;
}

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

看看目录杂志网站：http://contentsmagazine.com/

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

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

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

因此，首先考虑移动，页面加载时会在页面底部进行导航，但用户可以单击锚链接来访问它。由于这是一个锚链接，所以跳转是即时的，实际上它几乎像是一个下拉。

然后，随着视口变得越来越大，只使用CSS，导航(无论如何，以表示方式)移动到页面顶部，并位于徽标下方。这是通过简单的绝对定位来实现的。

对于适用于iOS设备的纯CSS下拉菜单，您只有一个选项：使用锚标记和切换display: none/block(关于iOS Safari悬停行为的短文)。

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 Fiddle：http://jsfiddle.net/aGYnU/2/

使其具有响应能力：

玩一下这种风格。更改位置。对尺寸标注使用em或percentage%值。您可能还需要将em值用于菜单中的字体大小(或根据视口大小设置字体大小的媒体查询)。

功能应该继续发挥作用。

我也尝试过解决这个问题。我不认为一个能满足我所有需求的解决方案是可能的。但这对大多数人来说可能已经足够好了：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;
}

我已经在Safari和Opera Mini的新iPad上，在股票浏览器和Opera Mini的Android(2.2.2，HTC Desire)上，以及一些桌面浏览器上测试了这一点。它基本上在任何地方都有效。这些是剩余问题：

它不可通过键盘访问，也就是说，您无法在菜单项中进行制表。您可以使下拉菜单本身显示在选项卡上，但据我所知(如果没有JavaScript)，您无法访问其中的项目。这是我最大的问题
在iPad和所有Opera Minis上的Safari中，只要你点击菜单，菜单就不会再关闭。你要么需要重新加载，要么点击链接。(在安卓浏览器中，你只需点击屏幕上的任何其他地方就可以关闭菜单。)可能有解决方案吗
在Opera Mini中，点击菜单触发器后会重新加载整个页面，但之后菜单会正常显示

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

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/

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

相关内容

最新更新

热门标签：