jquery - Responsive Navbar with Sub Navbar -
good day,
forgive me nav vocabulary not best. if question confusing apologize.
i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page.
i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well.
however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav.
here's code:
$(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#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 ids or classes var toggler = '.navbar-toggle'; var pagewrapper = '#page-content'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // menu inside slide menu 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'); } }); }); .containerfluid { width: 1280px; margin: 0 auto; } @media (max-width:767px) { .submenudiv { position: realtive; } } body.slide-active { overflow-x: hidden } /*first child of #page-content doesn't shift around*/ .no-margin-top { margin-top: 0px!important } #slide-nav .navbar-toggle .icon-bar { background: white; } /*wrap entire page content not nav inside div if not fixed top, don't add top padding */ #page-content { position: relative; padding-top: 70px; left: 0; } #page-content.slide-active { padding-top: 0 } /* put toggle bars on left :: not using button */ #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: left; margin: 0; width: 30px; height: 40px; padding: 10px 0 0 0; border: 0; background: transparent; } /* icon bar prettyup - optional */ #slide-nav .navbar-toggle > .icon-bar { width: 100%; display: block; height: 3px; margin: 5px 0 0 0; } #slide-nav .navbar-toggle.slide-active .icon-bar { background: orange } .navbar-header { position: relative } #page-content { width: 1280px; margin: 0 auto; } /* un fix navbar when active menu items accessible */ .navbar.navbar-fixed-top.slide-active { position: relative } @media (max-width:767px) { #slide-nav .container { margin: 0!important; padding: 0!important; height: 100%; } #slide-nav .navbar-header { margin: 0 auto; padding: 0 15px; } #slide-nav .navbar.slide-active { position: absolute; width: 80%; top: -1px; z-index: 1000; } #slide-nav #slidemenu { background: #f7f7f7; left: -100%; width: 80%; min-width: 0; position: absolute; padding-left: 0; z-index: 2; top: -8px; margin: 0; } #slide-nav #slidemenu .navbar-nav { min-width: 0; width: 100%; margin: 0; } #slide-nav #slidemenu .navbar-nav .dropdown-menu li { min-width: 0; width: 80%; white-space: normal; } #slide-nav { border-top: 0 } #slide-nav.navbar-inverse #slidemenu { background: #333 } /* behind navigation navigation not inside navigation accessible , scrolls*/ #navbar-height-col { position: fixed; top: 0; height: 100%; bottom: 0; width: 80%; left: -80%; background: #f7f7f7; } #navbar-height-col.inverse { background: #333; z-index: 1; border: 0; } #slide-nav .navbar-form { width: 100%; margin: 8px 0; text-align: center; overflow: hidden; /*fast clearfixer*/ } #slide-nav .navbar-form .form-control { text-align: center } #slide-nav .navbar-form .btn { width: 100% } } @media (min-width:768px) { #page-content { left: 0!important } .navbar.navbar-fixed-top.slide-active { position: fixed } .navbar-header { left: 0!important } }<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>here's fiddle https://jsfiddle.net/8j600vmd/4/ style elements missing brevity.
here's method of doing it: move submenudiv out under <li>'s , put submenus in div. way appear under menu, without having use position:absolute. xnay of floats , text-align center, , viola! did not add in js make others close though.
Comments
Post a Comment