我正在使用bootstrap开发一个网站,但有一个问题:
在我的网站上,我有一个使用yamm3的超级菜单,我的超级菜单中有选项卡,就像cisco网站一样:cisco.com - >菜单 - >产品和服务。
一切都很完美,但有一件事:我设计我的大型菜单,在滚动时修复,我的问题恰好在此时发生。单击选项卡时,单击选项卡的状态变为“活动”,但内容不显示。
这是我的代码:
<!-- Menu -->
<div class="row">
<div id="nav">
<nav class="navbar yamm navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">menubar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu item 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="row tab-pane fade in active" id="home">
some data
</div>
<div role="tabpanel" class="row tab-pane fade" id="profile">
example data
</div>
<div role="tabpanel" class="row tab-pane fade" id="messages">
something goes here
</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs main-menu" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">something</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">data</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">اitem</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div><!-- End of menu -->
以及使用“STICKY ANYTHING - JQUERY PLUGIN”滚动修复菜单的代码:
$('#nav').stickThis({
minscreenwidth:768
});
提前谢谢。
答案 0 :(得分:0)
将此添加到您想要加贴的元素,并将data-offset-top
更改为您的身高要求。
data-spy="affix" data-offset-top="100"
将此添加到CSS并将其调整为您将上述代码放入其中的元素。
nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
如果仅希望将Affix应用于移动视口,则CSS如下所示。
此规则可以防止桌面视图被粘贴。
nav.affix {
position: static;
}
此规则会根据您应用的媒体规则来固定导航栏。
@media (max-width : 768px) {
nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
}