javascript - Add scroll in the responsive menu -
i trying customize responsive menu "bootstrap" , stuck on 1 final point.
i content menu id "menunavbar" scrollable, can surely not because of positions "absolute"?
#slide-nav #slidemenu { background: #f7f7f7; right: -100%; width: 300px; min-width: 0; position: absolute; padding: 0 10px; z-index: 2; top: -8px; margin: 0; box-shadow: 1px 1px 12px #555; border-radius: 0 0 0 10px; } #slide-nav.navbar { height: auto; border-bottom: 2px solid #c0b0aa; } #slide-nav #menunavbar { padding-top: 80px; }
$(document).ready(function () { // scroll minim header $(window).scroll(function() { if($(document).scrolltop() > 50) $('#slide-nav').addclass('shrink'); else $('#slide-nav').removeclass('shrink'); }); // open modal connexion $('.btn-register').on('click', function() { whichtab = $(this).data('opentab'); $('#modalconnexionlabel').modal('show'); $('.nav-tabs li:eq('+whichtab+') a').tab('show'); }); // annimation burger bootstrap $(".navbar-toggle").on("click", function() { $(this).toggleclass("active"); }); // menu responsive //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'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // menu inside slide menu var slidewidth = '0%'; var menuneg = '-100%'; var slideneg = '-80%'; $("#slide-nav").on("click", toggler, function(e) { var selected = $(this).hasclass('slide-active'); $('#slidemenu').stop().animate({ right: selected ? menuneg : '0px' }); $('#navbar-height-col').stop().animate({ right: selected ? slideneg : '0px' }); $(pagewrapper).stop().animate({ right: selected ? '0px' : slidewidth }); $(navigationwrapper).stop().animate({ right: selected ? '0px' : slidewidth }); $(this).toggleclass('slide-active', !selected); $('#slidemenu').toggleclass('slide-active'); $(pagewrapper+', .navbar, body, '+navigationwrapper).toggleclass('slide-active'); }); var selected = '#slidemenu, '+pagewrapper+', body, .navbar, '+navigationwrapper; $(window).on("resize", function() { if($(window).width() > 1032 && $(toggler).is(':hidden')) { $(selected).removeclass('slide-active'); } }); });/* put toggle bars on left :: not using button */ #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: right; margin: 0; width: 30px; height: 40px; padding: 10px 0 0 0; border: 0; background: transparent; z-index: 999; } /* icon bar prettyup - optional */ #slide-nav .navbar-header { position: relative } /* un fix navbar when active menu items accessible */ .navbar.navbar-fixed-top.slide-active { position: relative } #slide-nav.navbar { background-color: #fff; } /* start scroll resize */ nav.navbar.shrink { min-height: 35px; } nav.shrink .navbar-brand { font-size: 25px; } nav.shrink .navbar-toggle { padding: 4px 5px; margin: 8px 15px 8px 0; } nav.shrink .navbar-brand img { height: 46px; } #slide-nav .navbar-brand { height: auto; } /* end scroll resize */ /* screw writing importants , shit, stick in max width since these classes not shared between sizes */ @media (max-width:1032px) { /*wrap entire page content not nav inside div if not fixed top, don't add top padding */ #page { position: relative; margin-top: 80px; left: 0; } #slide-nav { position: fixed; border-top: 0; } #slide-nav #menu-aide { visibility: hidden; display: none !important; } #slide-nav #menu-global .dropdown-toggle { visibility: hidden; display: none !important; } #slide-nav .navbar-brand img { height: 46px; } #slide-nav #slidemenu .avatar-navbar-xs { height: 50px; width: 50px; } #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: 300px; top: -1px; z-index: 1000; } #slide-nav #slidemenu { background: #f7f7f7 none repeat scroll 1 1; border-radius: 0 0 0 10px; box-shadow: 1px 1px 12px #555; margin: 0; min-width: 0; padding: 0 10px; position: absolute; right: -100%; top: -8px; width: 300px; z-index: 2; overflow: auto; height: 300px; } #slide-nav.navbar { height: auto; border-bottom: 2px solid #c0b0aa; } #slide-nav #menunavbar { padding-top: 80px; } #slide-nav #slidemenu .navbar-nav { min-width: 0; width: 100%; margin: 0; } #slide-nav #slidemenu .navbar-nav .dropdown-menu li { min-width: 0; width: 100%; white-space: normal; } #slide-nav.navbar-inverse #slidemenu { background: #333; } /* behind navigation navigation not inside navigation accessible , scrolls */ #slide-nav #navbar-height-col { position: fixed; top: 0; height: 100%; bottom:0; width: 80%; right: -80%; background: #f7f7f7; } #slide-nav #navbar-height-col.inverse { background: #333; z-index: 1; border: 0; } #slide-nav .btn { margin: 0 15%; width: 70%; } #slide-nav .navbar-toggle .icon-bar { background-color: #e8412a; z-index: 999; } #slide-nav .picto-margin-right { width: 45px; line-height: 40px; } #slide-nav .btn-middle { margin-bottom: 10px; } #slide-nav .avatar-navbar-xs { position: absolute; top: 20px; left: 15px; } #slide-nav .navbar-cart { position: absolute; top:20px; right: 60px; } #slide-nav .navbar-cart { color: #e8412a; } #slide-nav .nabvar-cart-nb { position: absolute; top:-8px; right: 15px; width: 20px; height: 20px; background-color: #23527c; border-radius: 20px; text-align: center; color: #fff; font-weight: bold; } #slide-nav .navbar-nav > li > a.navbar-btn { padding-top: 4px; padding-bottom: 4px; width: 70%; } #slide-nav .bloc-no-visibility-sm { visibility: hidden; display: none !important; } /* show menu when open navbar */ #slide-nav #menu-global .dropdown-menu { border:0; border-top: 1px solid #eee; display: block; position: static; float: none; width: auto; margin-top: 20px; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } /* effect icon burger */ #slide-nav .navbar-toggle .icon-bar:nth-of-type(2) { top: 1px; } #slide-nav .navbar-toggle .icon-bar:nth-of-type(3) { top: 2px; } #slide-nav .navbar-toggle .icon-bar { position: relative; transition: 500ms ease-in-out; } #slide-nav .navbar-toggle.active .icon-bar:nth-of-type(1) { top: 6px; transform: rotate(45deg); } #slide-nav .navbar-toggle.active .icon-bar:nth-of-type(2) { background-color: transparent; } #slide-nav .navbar-toggle.active .icon-bar:nth-of-type(3) { top: -6px; transform: rotate(-45deg); } } @media (min-width:768px) , (max-width:1032px) { /* put toggle bars on left :: not using button */ #slide-nav .navbar-header { float: none; } #slide-nav .navbar-toggle { display: block; float: right; } } @media (min-width:1033px) { #page { left: 0!important } nav.shrink .btn-middle { padding-top: 10px; } nav.shrink .link-middle { padding-top: 20px; } #slide-nav .bloc-no-visibility-md { visibility: hidden; display: none !important; } #slide-nav .navbar-toggle { display: none; } /*wrap entire page content not nav inside div if not fixed top, don't add top padding */ #page { position: relative; margin-top: 130px; left: 0; } #slide-nav #navbar-header-detail { visibility: hidden; display: none !important; } #slide-nav.navbar { height: auto; border-bottom: 2px solid #c0b0aa; } #slide-nav .btn-margin-right { margin-right: 10px; } #slide-nav .navbar-nav > li > { padding-top: 4px; padding-bottom: 4px; border-radius: 4px; } #slide-nav .btn-middle .navbar-btn { padding: 6px 8px 26px 8px; } .link-middle { padding-top: 40px; } .btn-middle { padding-top: 30px; } #slide-nav .btn { height: 20px; } #slide-nav .avatar { margin-right: 5px; } #slide-nav.navbar.navbar-fixed-top.slide-active { position: fixed } #slide-nav .navbar-header { left: 0!important } #slide-nav ul.nav li:hover > ul.dropdown-menu { display: block; } #slide-nav .navbar-right { margin-right: 0; } #slide-nav .nabvar-cart-nb { position: absolute; top:-8px; right: 5px; width: 18px; height: 18px; background-color: #23527c; border-radius: 20px; text-align: center; color: #fff; font-weight: bold; } #slide-nav .navbar-cart { color: #e8412a; } #slide-nav .nav > li > .no-background:hover, #slide-nav .nav > li > .no-background:focus { background: none; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <nav id="slide-nav" class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="https://thestartupexpert.net/wp-content/uploads/2016/04/sample-logo.png" width="350" height="83" alt=""></a> </div> <div id="slidemenu"> <div class="navbar-right text-center"> <div id="navbar-header-detail"> <img src="https://thestartupexpert.net/wp-content/uploads/2016/04/sample-logo.png" class="img-responsive img-circle avatar-navbar-xs"> <span class="navbar-cart"><a href="#"><i class="fa fa-shopping-basket fa-2x"></i><span class="sr-only"> panier</span><span class="nabvar-cart-nb">1</span></a></span> </div> <ul id="menunavbar" class="nav navbar-nav navbar-right"> <li class="bloc-no-visibility-md btn-margin-right btn-middle"><a href="#" class="btn btn-danger navbar-btn">un premier bouton</a></li> <li class="bloc-no-visibility-md btn-middle"><a href="#" class="btn btn-primary navbar-btn">un deuxième bouton</a></li> <li class="link-middle bloc-no-visibility-sm navbar-cart"><a href="#" class="no-background"><i class="fa fa-shopping-basket"></i><span class="sr-only"> panier</span><span class="nabvar-cart-nb">1</span></a></li> <li id="menu-global" class="dropdown link-middle btn-margin-right"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://www.brillianthospitality.com/wp-content/uploads/2016/02/default-avatar_0.png" height="23" width="23" class="img-circle avatar">alain <i class="fa fa-chevron-down"></i></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-user fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> mon profil</a></li> <li><a href="#"><i class="fa fa-question-circle fa-2x picto-margin-right bloc-no-visibility-md" aria-hidden="true"></i> aide</a></li> </ul> </li> <li id="menu-aide" class="dropdown link-middle btn-margin-right"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">aide <i class="fa fa-chevron-down"></i></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link test long title goes here</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> <li class="btn-margin-right btn-middle bloc-no-visibility-sm"><a href="#" class="btn btn-danger navbar-btn">un premier bouton</a></li> <li class="btn-middle bloc-no-visibility-sm"><a href="#" class="btn btn-primary navbar-btn">un deuxième bouton</a></li> </ul> </div> </div> </div> </nav> <div id="page"> <div id="page-content" class="container"> <h1>bootstrap starter template</h1> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> <p class="lead">use document way start new project. text , barebones html a a a f.</p> </div> </div>
Comments
Post a Comment