Bootstrap 3 Dropdown Menü funktioniert nicht?

Massacre · 07.07.2015

Hallo Ihr lieben,

ich bin gerade dabei mir ein wenig Bootstrap draufzuschaffen.
Nun stehe ich aber irgendwie vor einem kleinen Problem und habe probiert und probiert, komme aber in diesem Punkt irgendwie nicht weiter...

Es geht um das Dropdown Menü aus der Bootstrap Bibliothek. Ich habe auch auf der Getbootstrap Page die Components durchgeschaut und habe mich auch daran gehalten.
Nun ist das Problem, dass Dropdown Menü geht einfach nicht auf :/ Nun habe ich aber genug geschwafelt und Poste nun einfach mal meinen Code und ich würde mich über Eure Hilfe sehr freuen, danke im vorraus

HTML:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
        
    
            <!-- Eigenes CSS -->
            <link href="css/own.css" rel="stylesheet" media="screen">
        
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
        
        </head>
        <body>
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <div class="navbar-brand">SBL MULTIMEDIA <span class="glyphicon glyphicon-th-large icon-brand"></span> DE</div>
                    </div>                
                        <div>
                            <ul class="nav navbar-nav">                    
                                <li class="active"><a href="#">Home</a></li>
                                <!-- dropdown Menu -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produkte <span class="caret"></span></a>                         
                                    <ul class="dropdown-menu">
                                        <li><a href="#">SBL Multimedia Tutorials</a></li>
                                        <li><a href="#">SBLLetsPlay</a></li>
                                    </ul>
                                </li><!-- dropdown End-->
                                <li><a href="#">Kontakt</a></li>
                            </ul>
                        </div>
                </div>
            </nav>
    
        </body>
    </html>

HTML Code formatiert - Dobi78

Squeendot · 07.07.2015

Servus,

so müsste dein Code stimmen:

HTML:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
          
      
            <!-- Eigenes CSS -->
            <link href="css/own.css" rel="stylesheet" media="screen">
          
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
          
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
          
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>     
          
        </head>
        <body>
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <div class="navbar-brand">SBL MULTIMEDIA <span class="glyphicon glyphicon-th-large icon-brand"></span> DE</div>
                    </div>                 
                            <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav">                     
                                <li class="active"><a href="#">Home</a></li>
                                <!-- dropdown Menu -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Produkte <span class="caret"></span></a>                         
                                    <ul class="dropdown-menu">
                                        <li><a href="#">SBL Multimedia Tutorials</a></li>
                                        <li><a href="#">SBL LetsPlay</a></li>
                                    </ul>
                                </li><!-- dropdown End-->
                                <li><a href="#">Kontakt</a></li>
                            </ul>
                        </div>
                </div>
            </nav>
      
        </body>
    </html>

Wenn nicht, dann einfach mal auf der GetBootstrap Seite die Beispiele anschauen und stur rauskopieren, dann klappts auf jeden Fall.
Achte aber darauf, dass deine Links zu JavaScript- und CSS-Dateien stimmen und du möglicherweise noch ein JS-Snippet reinschreiben musst. Bei deinem Beispiel allerdings nicht...

Lieber Gruß,

Julian

Massacre · 07.07.2015

Also ich habe es jetzt einmal getestet, gleiches Problem wie vorher, ich habe gesehen, dass du

Code:

<div class="collapse nav-collapse"></div>

eingefügt hast.

Das habe ich auch schon gedacht und hatte es auch schon drin, dies dient ja dazu wenn ich auf Smartphones die Seite ansehe die Navpunkte nicht untereinander stehen sondern weg sind und durch einen Button sichtbar gemacht werden, was ich aber jetzt gemerkt habe, ist wenn ich drauf klicke bleibt der Text Weiß, wird aber kein Dropdown Menü angezeigt.

Die müsste doch heißen das dort trotzdem etwas funktionier, warum aber kein Menü aufploppt ist mir schleierhaft :/

EDIT

Okay ich habe den Fehler gefunden. Scheinbar hat JQuery gefehlt ^^

Also für jeden der das selbe Problem hat

Code:

<!-- Die 2 Links zwischen den BodyTag -->
<body>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

patrick_l · 07.07.2015

Nur so als Hinweis: Wenn du mit der englischsprachigen Dokumentation nicht zurecht kommst, kannst du auch die Übersetzung nutzen. Bis auf den Customizer wurde alles ins deutsche übersetzt. Von der deutschen Website wird man dafür auf die "Hauptseite" weitergeleitet.

Englisch: getbootstrap.com
Deutsch: holdirbootstrap.de

Zudem würde ich um unnötige HTTP-Request's zu sparen, alle benötigten Stylesheets in einem zusammen fassen. Wenn ich mit Bootstrap oder Foundation arbeite, in der Regel die Framework eigenen Stylesheets über LESS/Sass und später alles compiliere. Es reicht jedoch schon, wenn du alles kopierst, komprimierst, vor deinen Anweisungen einfügst und lediglich mit einem Kommentar versiehst.

Der Performance wegen sollte man Bootstrap und Co auch an die eigene Website anpassen. Dafür nicht benötigte Scripte streichen. Beispielsweise das Karussell, Buttons und sonstiges. Bootstrap, Foundation und Co ist für vieles auch mehr "wie mit Kanonen auf Spatzen schießen". Ich selber habe meinen Workflow jetzt weites gehend umgekrempelt und überwiegend Jade mit Sass nutze. Dennoch keine Abneigung zum Gebrauch solcher Frameworks habe.

Liebe Grüße, Patrick