Я использую twitter bootstrap, и моя панель навигации отлично работает с функцией коллапса.subnav bar рухнул с twitter bootstrap
Это мой 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 bar, моя проблема в том, что мой subnav bar не рухнул.
Правильная версия subnav бар в Twitter Bootstrap:
Моя плохая версия, что он не работает нормально:/
Как я могу исправить эту проблему?
Спасибо!
Можете ли вы предоставить код? Живая рабочая демонстрация была бы лучшей, но по крайней мере предоставила html и css для вашего меню. Не видя никакого кода, вы получите только дикие догадки. – Jrod
Спасибо, Jrod, я добавил код html, css и js: D – hyperrjas
@Jrod Я добавил исправление для этой проблемы в ответ. С уважением! – hyperrjas