0
Guten Tag,Responsive Navbar mit Sub Navbar
Verzeihen Sie mir, wie meine Nav Vokabular ist nicht die beste. Wenn diese Frage verwirrend ist, entschuldige ich mich.
Ich arbeite an einer Navigationsleiste, die auf der Seite bei 768px und höher zentriert werden muss. Die Elemente im Nav öffnen (oder wechseln vielleicht) ein Subnav, das direkt darunter lebt. Dieses Nav sollte auch auf der Seite zentriert erscheinen.
Ich war in der Lage, durch den reaktionsschnellen Teil der Navigationsleiste zu arbeiten, die wichtigsten Elemente vertikal ausrichten und die Sub-Nav-Menü jedes Elements unten ausrollen, und ich gab ihnen einen Einzug für einige Trennung. Das funktioniert gut.
Allerdings ist mein Problem nicht die reagierende Seite, aber das Verhalten bei einer Breite größer als 768px. Was passiert, ist, dass das Umschalten der Unternavigation eines Menüs die anderen Hauptelemente auf die Seite unterhalb des Unternavs verschiebt.
Hier ist mein Code:
$(document).ready(function() {
//stick in the fixed 100% height behind the navbar but don't wrap it
$('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
$('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));
// Enter your ids or classes
var toggler = '.navbar-toggle';
var pagewrapper = '#page-content';
var navigationwrapper = '.navbar-header';
var menuwidth = '100%'; // the menu inside the slide menu itself
var slidewidth = '80%';
var menuneg = '-100%';
var slideneg = '-80%';
$("#slide-nav").on("click", toggler, function (e) {
var selected = $(this).hasClass('slide-active');
$('#slidemenu').stop().animate({
left: selected ? menuneg : '0px'
});
$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});
$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';
$(window).on("resize", function() {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});\t .containerFluid {
\t width: 1280px;
\t margin: 0 auto;
\t }
\t
\t @media (max-width:767px) {
\t .subMenuDiv {
\t position: realtive;
\t }
\t }
\t
\t body.slide-active {
\t overflow-x: hidden
\t }
\t /*first child of #page-content so it doesn't shift around*/
\t
\t .no-margin-top {
\t margin-top: 0px!important
\t }
\t
\t #slide-nav .navbar-toggle .icon-bar {
\t background: white;
\t }
\t /*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
\t
\t #page-content {
\t position: relative;
\t padding-top: 70px;
\t left: 0;
\t }
\t
\t #page-content.slide-active {
\t padding-top: 0
\t }
\t /* put toggle bars on the left :: not using button */
\t
\t #slide-nav .navbar-toggle {
\t cursor: pointer;
\t position: relative;
\t line-height: 0;
\t float: left;
\t margin: 0;
\t width: 30px;
\t height: 40px;
\t padding: 10px 0 0 0;
\t border: 0;
\t background: transparent;
\t }
\t /* icon bar prettyup - optional */
\t
\t #slide-nav .navbar-toggle > .icon-bar {
\t width: 100%;
\t display: block;
\t height: 3px;
\t margin: 5px 0 0 0;
\t }
\t
\t #slide-nav .navbar-toggle.slide-active .icon-bar {
\t background: orange
\t }
\t
\t .navbar-header {
\t position: relative
\t }
\t
\t #page-content {
\t width: 1280px;
\t margin: 0 auto;
\t }
\t /* un fix the navbar when active so that all the menu items are accessible */
\t
\t .navbar.navbar-fixed-top.slide-active {
\t position: relative
\t }
\t
\t @media (max-width:767px) {
\t #slide-nav .container {
\t margin: 0!important;
\t padding: 0!important;
\t height: 100%;
\t }
\t #slide-nav .navbar-header {
\t margin: 0 auto;
\t padding: 0 15px;
\t }
\t #slide-nav .navbar.slide-active {
\t position: absolute;
\t width: 80%;
\t top: -1px;
\t z-index: 1000;
\t }
\t #slide-nav #slidemenu {
\t background: #f7f7f7;
\t left: -100%;
\t width: 80%;
\t min-width: 0;
\t position: absolute;
\t padding-left: 0;
\t z-index: 2;
\t top: -8px;
\t margin: 0;
\t }
\t #slide-nav #slidemenu .navbar-nav {
\t min-width: 0;
\t width: 100%;
\t margin: 0;
\t }
\t #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
\t min-width: 0;
\t width: 80%;
\t white-space: normal;
\t }
\t #slide-nav {
\t border-top: 0
\t }
\t #slide-nav.navbar-inverse #slidemenu {
\t background: #333
\t }
\t /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
\t #navbar-height-col {
\t position: fixed;
\t top: 0;
\t height: 100%;
\t bottom: 0;
\t width: 80%;
\t left: -80%;
\t background: #f7f7f7;
\t }
\t #navbar-height-col.inverse {
\t background: #333;
\t z-index: 1;
\t border: 0;
\t }
\t #slide-nav .navbar-form {
\t width: 100%;
\t margin: 8px 0;
\t text-align: center;
\t overflow: hidden;
\t /*fast clearfixer*/
\t }
\t #slide-nav .navbar-form .form-control {
\t text-align: center
\t }
\t #slide-nav .navbar-form .btn {
\t width: 100%
\t }
\t }
\t
\t @media (min-width:768px) {
\t #page-content {
\t left: 0!important
\t }
\t .navbar.navbar-fixed-top.slide-active {
\t position: fixed
\t }
\t .navbar-header {
\t left: 0!important
\t }
\t }<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="containerFluid">
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div id="slidemenu">
<ul class="nav navbar-nav">
<li><a href="#" data-toggle="collapse" data-target="#sec1">Section 1</a>
<div class="subMenuDiv">
<ul class="nav nav-justified collapse" id="sec1">
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 1</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 2</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 3</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 4</span></a></li>
</ul>
</div>
</li>
<li><a href="#" data-toggle="collapse" data-target="#sec2">Section 2</a>
<div class="subMenuDiv">
<ul class="nav nav-justified collapse" id="sec2">
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 1</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 2</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 3</span></a></li>
<li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 3</span></a></li>
</ul>
</div>
</li>
<li><a href="#" data-toggle="collapse" data-target="#xbprom">Section 3</a>
<div class="subMenuDiv">
<ul class="nav nav-justified collapse" id="xbprom">
<li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 1</span></a></li>
<li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 2</span></a></li>
<li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 3</span></a></li>
</ul>
</div>
</li>
</ul>hier ein Fiddle https://jsfiddle.net/8j600vmd/4/ Einige Stilelemente der Kürze fehlen.
Ich mag diese Methode, aber im zusammengeklappten Zustand sind die Untermenüs erforderlich unterhalb ihrer jeweiligen Mutter erscheinen ... – RPM
also nicht die volle Breite oder inline, wie ein normales Dropdown-Menü? –
Ja ... Wenn Sie meine ursprüngliche Geige verdichten, werden Sie das gewünschte Verhalten sehen, wenn auch so gestaltet, dass die Unterabschnitte nach links und eingerückt ausgerichtet sind. – RPM