2
私はtwitterブートストラップを使用しています。ナビゲーションバーは折りたたみ機能でうまく動作します。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');
});
また、私はサブナブバーを使用しています、私の問題は私のサブナブバーが崩壊していないことです。
Twitterのブートストラップで正しいsubnavバーバージョン：
それが正常に動作しません私の悪いバージョン：/
どのようにすることができますこの問題を解決しますか？
ありがとうございました！
コードを入力できますか？ライブ作業のデモが最高ですが、少なくともあなたのメニューにHTMLとCSSを提供してください。コードを見ることなく、あなたは野生の推測しか得られません。 – Jrod
ありがとうJrod、コードhtml、css、jsを追加しました：D – hyperrjas
@Jrod答えでこの問題の修正を追加しました。よろしく！ – hyperrjas