我们的导航菜单具有三个级别,如下所示:
在移动设备上查看该网站时,菜单会折叠成一个汉堡包按钮。当单击/触摸时,它将显示顶级菜单项,但是触摸其中的任何一项只会隐藏菜单。我已经用Google搜索,并没有找到太多帮助我的方法,这是2012年的一些旧帖子,当时的建议是黑客js,而在SO上则是这样的,其中海报的标签没有闭合并且带有引号('“)类型的错误。我检查了我的代码,但我认为没有任何问题。我正在使用Liquid构建菜单,但我认为这与它无关。这是原始代码:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% for item in site.data.dropdowns %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{{ item.sectionName }}
<span class="caret" />
</a>
<ul id="prebidDropDown" class="dropdown-menu">
{% for submenu in item.submenus %}
<li class="dropdown dropdown-submenu">
<a href="{{submenu.link}}">{{ submenu.title }}
{% if submenu.hasBubblePopOut == 1 %}
<span class="caret" />
{% endif %}
</a>
{% if submenu.hasBubblePopOut == 1 %}
<ul class="dropdown-menu">
{% for bubblePopOut in submenu.bubble %}
<li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
<!-- end loop through top level nav-->
</ul>
<!--end top level menu items-->
</div>
<!--end navbar-->
</div>
<!--end container-->
我可以发布输出html(相当长)。
还有我的导航栏CSS:
/* NavBar */
.navbar {
z-index:100
font-family: 'Dosis', sans-serif;
}
.navbar-default {
background-color: #FFFFFF;
border-color: transparent;
padding-top: 15px;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-nav>li>a {
color: #3498db;
font-weight: 500;
font-size: 24px;
}
.navbar-toggle {
background: #fff;
}
.navbar-brand img {
max-width: 200px;
max-height: 35px;
}
.navbar-brand{
float:left;
height:50px;
padding:10px 15px;
font-size:18px;
line-height:20px}
/* DropDown*/
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
我可能丢失了一些东西,将不胜感激。