在响应式 css 菜单上使用多个级别时遇到问题，这是我遵循的菜单的基础 this tutorial on tuts.com
我的网站在这个菜单上需要超过 2 个子级别，但是当我将额外的添加到 html 时，额外的级别无法正常工作，我确信可以添加一个额外的级别到原始菜单，但我不知道我需要什么额外的 css，我曾尝试为 li li li li 添加额外的 css 代码，但那对我不起作用。
额外级别显示 wwith 第二个子级别，它应该只在第二个子菜单的悬停时显示。
我在这里创建了一个 jsfiddle(我的第一个):http://jsfiddle.net/DizzyHigh/Bpubu/4/
html:
<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test"> <a href="#">HOME</a>
</li>
<li> <a href="#">LOCATIONS</a>
<ul class="nav">
<li> <a href="#">Boroughs</a>
<ul class="nav">
<li> <a href="#">Enfield</a>
<ul>
<li><a href="#">E-Locations</a>
</li>
<li><a href="#">E-Unit Bases</a>
</li>
<li><a href="#">E-Parking</a>
</li>
</ul>
</li>
<li> <a href="#">Barnet</a>
<ul>
<li><a href="#">B-Locations</a>
</li>
<li><a href="#">B-Unit Bases</a>
</li>
<li><a href="#">B-Parking</a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Maps</a>
<ul class="nav">
<li> <a href="#">Enfield map</a>
<ul>
<li><a href="#">ME-Locations</a>
</li>
<li><a href="#">ME-Unit Bases</a>
</li>
<li><a href="#">ME-Parking</a>
</li>
</ul>
</li>
<li> <a href="#">Barnet Map</a>
<ul>
<li><a href="#">MB-Locations</a>
</li>
<li><a href="#">MB-Unit Bases</a>
</li>
<li><a href="#">MB-Parking</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">CONTACT</a>
</li>
<li> <a href="#">LINKS</a>
</li>
</ul>
</div>
<div id="right_container"> </div>
CSS:
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
JS:
$(document).ready(function() {
var ww = document.body.clientWidth;
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
})
任何 CSS 专家都可以为我指明正确的方向吗？
最佳答案
Bryn 试试下面的代码:
我将“NormalMenu”类用于普通菜单上的 css 悬停事件
Java 脚本
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$('.nav').removeClass('NormalMenu').find('ul').hide();
$(".nav li a").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
var _sub = $(this).siblings('ul')
if($(_sub).is(':visible')){
$(_sub).hide();
$(_sub).find('ul').hide();
}else{
$(_sub).show();
}
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav li a").unbind('click');
$(".nav").show().addClass('NormalMenu').find('ul').removeAttr('style');
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
/* background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: right;
}
ul.NormalMenu ul{
width: 100%;
display:none;
position: absolute;
}
ul.NormalMenu li{
line-height:40px;
}
ul.NormalMenu li:hover > ul{
width: 100%;
display:block;
left:0;
}
ul.nav ul li{
background: #1d7a62;
}
ul.NormalMenu li li:hover> ul{
width: 100%;
display:block;
top:0;
left:100%;
}
ul.nav ul li li{
background: #1d7a00;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
/*background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.nav ul{
margin-left:5%;
width: 95%;
}
ul.nav li{
line-height:30px;
}
关于css - 具有多个级别的响应式 CSS 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14811290/