javascript - 在响应式菜单中添加滚动条

Question

我正在尝试自定义响应式菜单“Bootstrap”，但我坚持了最后一点。

我希望 ID 为“menuNavBar”的内容菜单是可滚动的，但我肯定不能因为位置是“绝对”？

#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

$(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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a 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 a a a a a a a f.</p>
    </div>
 
</div>