2
我使用twitter bootstrap和我的导航栏与折叠功能正常工作。subnav栏与twitter引导折叠
这是我的html代码:
<div class="subnav">
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Buttons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#buttonGroups">Button groups</a></li>
<li class=""><a href="#buttonDropdowns">Button dropdowns</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Navigation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#navs">Nav, tabs, pills</a></li>
<li class=""><a href="#navbar">Navbar</a></li>
<li class=""><a href="#breadcrumbs">Breadcrumbs</a></li>
<li class=""><a href="#pagination">Pagination</a></li>
</ul>
</li>
<li class=""><a href="#labels">Labels</a></li>
<li class=""><a href="#badges">Badges</a></li>
<li class=""><a href="#typography">Typography</a></li>
<li class=""><a href="#thumbnails">Thumbnails</a></li>
<li class=""><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
</div>
这是我bootstrap_and_overrides.css.scss
$iconSpritePath: asset-url('glyphicons-halflings.png', image);
$iconWhiteSpritePath: asset-url('glyphicons-halflings-white.png', image);
@import "bootstrap";
body { padding-top: 40px;
.navbar .brand {padding: 10px 20px; }
background: url("background.png") repeat scroll 0 0 #EEEEEE;
.subnav {
background-color: #EEEEEE;
background-repeat: repeat-x;
border: 1px solid #E5E5E5;
border-radius: 4px 4px 4px 4px;
height: 36px;
.nav > li > a {
border-left: 1px solid #F5F5F5;
border-radius: 0 0 0 0;
border-right: 1px solid #E5E5E5;
margin: 0;
padding-bottom: 11px;
padding-top: 11px;
}
}
.subnav-fixed {
/*important part*/
left: 0;
position: fixed;
right: 0;
top: 40px;
z-index: 1020;
/*design stuff*/
border-color: #D5D5D5;
border-radius: 0 0 0 0;
border-width: 0 0 1px;
box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
}
}
@import "bootstrap-responsive";
,这是我的js代码:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
此外,我使用subnav栏,我的问题是,我的subnav栏未折叠。
正确subnav栏版本Twitter的引导:
它不我的坏版本工作正常:/
我怎么能解决这个问题?
谢谢!
你能提供一些代码吗?现场演示将是最好的,但至少为您的菜单提供html和css。没有看到任何代码,你只会得到狂野的猜测。 – Jrod 2012-04-25 14:51:41
谢谢Jrod,我已经添加了代码html,css和js:D – hyperrjas 2012-04-25 14:58:25
@Jrod我在答案中为此问题添加了一个修复程序。问候! – hyperrjas 2012-05-02 10:53:05