在響應式菜單中添加滾動

Question

我試圖自定義響應菜單“ Bootstrap”，但我堅持了最后一點。

我希望id為“ menuNavBar”的內容菜單可滾動，但是我肯定不能因為位置“ 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;
    }

CODEPEN

Answer 1

您需要指定height並添加overflow:hidden以添加滾動。

使用以下內容更新CSS：

#slide-nav #slidemenu {
  background: #f7f7f7 none repeat scroll 0 0;
  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;
  /* add the following CSS */
  overflow: auto; 
  height: 300px;
 }

更新：

使用jQuery向div添加高度

function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.divClassName').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
    setHeight();
});

在這里更新了Codepen

Answer 2

 $(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 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'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // the menu inside the slide menu itself 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 the 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 the navbar when active so that all the menu items are 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 and shit, just stick it in max width since these classes are not shared between sizes */ @media (max-width:1032px) { /*wrap the entire page content but not nav inside this div if not a fixed top, don't add any 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 a { min-width: 0; width: 100%; white-space: normal; } #slide-nav.navbar-inverse #slidemenu { background: #333; } /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and 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 i { 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: all 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) and (max-width:1032px) { /* put toggle bars on the 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 the entire page content but not nav inside this div if not a fixed top, don't add any 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 > a { 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 i { 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 this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML aaaaaaa f.</p> </div> </div>