Scrollbares Menü mit Bootstrap - Menü, das den Container erweitert, wenn dies nicht der Fall sein sollte

138

Ich habe diese Methode ( ihre Geige ) versucht , um ein scrollbares Menü mit Bootstrap zu aktivieren, aber mit diesem Ansatz erweitert das scrollbare Menü seinen Container - Geige - das nicht scrollbare Menü tut dies korrekt nicht.

Wie kann ich das beheben? Vorschläge zu anderen mit Bootstrap kompatiblen Ansätzen sind ebenfalls willkommen!


Als Referenz ist hier der HTML-Code aus der Geige der ersten Methode:

<ul class="nav">
    <li class="dropdown">
        <a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
        "font-weight: bold"></a>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 1 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">User</a>
                            </li>

                            <li>
                                <a href="#">Administrators</a>
                            </li>

                            <li>
                                <a href="#">Some Other Group</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 2 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">Core Users</a>
                            </li>

                            <li>
                                <a href="#">Admin</a>
                            </li>

                            <li>
                                <a href="#">Some Other Role</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu footer -->
            </ul>
        </div>

        <ul class="dropdown-menu">
            <li class="disabled">
                <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
            </li>
        </ul>
    </li>
</ul>

Und das CSS:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
    position:relative;
    display:inherit!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    top:0!important;
    left:0!important;
    width:100%;
    height:auto;
    max-height:500px;
    margin:0;
    border-left:none;
    border-right:none;
    -webkit-border-radius:0!important;
    -moz-border-radius:0!important;
    -ms-border-radius:0!important;
    -o-border-radius:0!important;
    border-radius:0!important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none
}
eliashdezr
quelle
1
Es funktioniert auch für Bootstrap V4
Tes3awy

Antworten:

357

Ich denke, Sie können dies vereinfachen, indem Sie einfach die erforderlichen CSS-Eigenschaften zu Ihrer speziellen scrollbaren Menüklasse hinzufügen.

CSS:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

HTML

       <ul class="dropdown-menu scrollable-menu" role="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="#">Action</a></li>
            ..
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
       </ul>

Arbeitsbeispiel: https://www.bootply.com/86116

Bootstrap 4

Ein weiteres Beispiel für Bootstrap 4 mit Flexbox

Zim
quelle
6
Wenn man Plunker gegenüber Bootply bevorzugt, ist es hier: plnkr.co/edit/3VhYW1?p=preview
tanguy_k
Die Bildlaufleiste schneidet einen Teil des Textes ab. Ich frage mich, was der sauberste Weg ist, die Größe zu erhöhen, um den breitesten Gegenstand aufzunehmen.
Lintmouse
Was ist, wenn ich feste Kopf- und Fußzeilen im Dropdown-Menü haben möchte
Innovation
15
Ich habe maximale Höhe verwendet: 100vh, um eine 100% Höhe zu geben
Rob Sedgwick
Sehr elegante und super einfache Lösung. +1
Gianluca Ghettini
49

Sie können die integrierte CSS - Klasse verwenden pre-scrollbaren in Bootstrap - 3 innerhalb der Spanne Element der Drop - Down - und es funktioniert sofort ohne benutzerdefinierte CSS - Implementierung.

 <ul class="dropdown-menu pre-scrollable">
                <li>item 1 </li>
                <li>item 2 </li>

 </ul>
Adrian Hedley
quelle
13

Für CSS fand ich, dass die maximale Höhe von 180 für die Handy-Landschaft 320 besser ist, wenn Browser-Chrom angezeigt wird.

.scrollable-menu {
    height: auto;
    max-height: 180px;
    overflow-x: hidden;
}

Um sichtbare Bildlaufleisten hinzuzufügen, sollte dieses CSS den folgenden Trick ausführen:

.scrollable-menu::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;        
}    
.scrollable-menu::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: lightgray;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}

Die Änderungen werden hier wiedergegeben: https://www.bootply.com/BhkCKFEELL

blalond
quelle
1

Machen Sie alles in der Linie des UL-Tags

<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Action</a></li>
                ..
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
            </ul>
Rajeshwar Reddy
quelle
1

Ich behebe dieses Problem einfach in meinem Projekt.

CSS-Code

.scroll-menu{
   min-width: 220px;
   max-height: 90vh;
   overflow: auto;
 }

HTML Quelltext

<ul class="dropdown-menu scroll-menu" role="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="#">Action</a></li>
   ..
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
</ul>
Jilani A.
quelle
0

Ich hoffe, dieser Code funktioniert gut, versuchen Sie dies.

CSS-Datei hinzufügen.

.scrollbar {
    height: auto;
    max-height: 180px;
    overflow-x: hidden;
}

HTML Quelltext:

<div class="col-sm-2  scrollable-menu" role="menu">
    <div>
   <ul>
  <li><a class="active" href="#home">Tutorials</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

    </ul>
   </div>
   </div>
Darshak Malvi
quelle