如果我重复了一个问题,对不起……我保证我已经到处寻找答案了。
我想在响应式菜单中添加一个子菜单。我正在努力找到一种以响应方式显示子项和主项的方法。
这是我的代码片段……CSS还有点粗糙,我会尽快解决这个问题,只需使用一个slideTooggle()即可显示所有菜单项。
我应该提到我正在Joomla上工作……但我已经检查过我的模块配置和模板,我很确定问题不在那里。但也许你有什么建议?
好的,这是我的代码片段。感谢您的帮助!:)
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
<nav id="menu" class="clearfix">
<ul class="clearfix">
<li><a class="current first-item" href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<ul>
<li><a href="#">Subitem 3.1</a></li>
<li><a href="#">Subitem 3.2</a></li>
<li><a href="#">Subitem 3.3</a></li>
</ul>
<li><a href="#">Item4</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
这是我目前针对小屏幕的CSS:
nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;}
nav ul { width: 100%; display: block; height: auto;}
nav li{ width: 50%; float: left; position: relative; z-index:10;}
nav ul li a {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;}
nav li a { border-bottom: 1px solid #cccccc;}
nav a { text-align: left; width: 100%; text-indent: 15px; }
nav ul { display: none; height: auto; }
nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;}
nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;}
#nav a {background: #8c1b23; color: #000; display: inline-block; font-family: 'Lato', sans-serif; font-size: 11px; line-height: 35px; padding: 0 10px; text-decoration: none; }
#nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none}
#nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;}
#nav ul li a {color: #2d2a2a;display: block;font-family: 'Lato', sans-serif;font-size: 10px;font-weight: normal;padding: 0;text-align: left;border-right:none;}
#nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;}
#nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; }
#nav ul li.active > a { background: #2d2a2a; color: #ebebeb; }
#nav ul li:hover > a { background: #ececec; }
#nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; }
#nav ul li ul:hover {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; }
#nav ul li:hover ul {left:0;}
#nav ul ul ul{display:none;}
#nav ul li ul li:hover ul {left:100%; top:0; display: block;}
#nav ul li:hover ul {left:100%; top:0; display:none;}
#nav ul li:hover ul li a { border:none;}
#nav ul li:hover ul li ul li a { display:none;}
#nav ul li ul li:hover ul li a { display:block;}