Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

[HTML | Bootstrap] Dropdown funktioniert nicht?

Werbeanzeige

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

1

02.09.2016, 20:17

[HTML | Bootstrap] Dropdown funktioniert nicht?

Hallo,

aus gegebenen Anlass beschäftige ich mich gerade mit HTML und Bootstrap. In der Navigationsleiste sollen verschiedene Buttons zum Navigieren erstellt werden. Außerdem soll ein Dropbown-Menu implementiert sein. Hier der Code:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="utf-8">
    <title>ByteChangers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>

    <!-- THE NAVIGATION - FIXED -->
    <div class="container">

        <!-- The justified navigation menu is meant for single line per list item.
             Multiple lines will require custom code not provided by Bootstrap. -->
        <div class="masthead">
            <h2 class="text-muted">Bytechangers</h2>
            <nav>
                <ul class="nav nav-justified">
                    <li class="active"><a href="#">Startseite</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Impressum</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Über... <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Profil 1</a></li>
                            <li><a href="#">Profil 2</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        [...]

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
    
</body></html>

Nur leider kann man nicht auf das Dropbown-Menu klicken. Auch Code von der offiziellen Bootstrap-Website funktioniert nicht.
Was habe ich für einen Fehler gemacht?

Vielen Dank im Voraus :D

PS: Ich habe es mit Chrome, Opera und Edge probiert, aber leider kein Erfolg :(

Wirago

Alter Hase

Beiträge: 1 193

Wohnort: Stockerau

Beruf: CRM Application Manager

  • Private Nachricht senden

2

02.09.2016, 20:57

Ich habe mein Menü eigentlich in reinem HTML (und ein wenig PHP) gebaut. Kannst dir von mir aus den Code raus kopieren und schauen ob dir das an Funktionialität reicht.
kleincodiert.at

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

3

02.09.2016, 21:15

Zitat von »Wirago«

Ich habe mein Menü eigentlich in reinem HTML (und ein wenig PHP) gebaut. Kannst dir von mir aus den Code raus kopieren und schauen ob dir das an Funktionialität reicht.
kleincodiert.at

Schon mal danke, aber irgendwie funktioniert das noch nicht wirklich so wie es soll. Ich habe diesen Code implementiert:

Quellcode

 
1
2
3
4
5
6
7
8
9
10

                    <li class="">
                        <a href="grundlagen.php?selected=basics"><div>Grundlagen<span>Entscheidung</span></div></a>
                        <div>
                            <ul>
                                <li><a href="grundlagen.php?selected=basics">Erste Schritte</a></li>
                                <li><a href="differences.php?selected=basics">Sprachunterschiede</a></li>
                                <li><a href="goon.php?selected=basics">Wie geht es weiter?</a></li>
                            </ul>
                        </div>
                    </li>


Aber es kommt leider nur das heraus (Anhang). Habe ich etwas vergessen zu kopieren?
»cojo2015« hat folgendes Bild angehängt:
  • Unbenannt.PNG

Wirago

Alter Hase

Beiträge: 1 193

Wohnort: Stockerau

Beruf: CRM Application Manager

  • Private Nachricht senden

4

02.09.2016, 22:14

Ja, das stylesheet ;)
http://www.kleincodiert.at/style.css müsste es sein, wenn ich mich nicht irre.

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

5

03.09.2016, 13:37

Danke. Aber trotzdem wunder es mich, warum das mit Bootstrap nicht funktioniert...

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

  • Private Nachricht senden

6

03.09.2016, 13:47

Mal die Browser debugging Tools genommen und geguckt ob es irgendwelche JS Ausgaben gibt, irgendwelche Klassen nicht so vorhanden sind wie sie sollen und und und? Hast du eigene Stylesheets und überschreibst vielleicht irgendwas? Wie bist du allgemein vorgegangen. Hast du dir die Samples auf der Seite von Bootstrap angesehen?
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Tobiking

1x Rätselkönig

Beiträge: 1 231

  • Private Nachricht senden

7

03.09.2016, 13:52

Zumindest ist da schon mal doppelt das Bootstrap Script drin. Einmal in Version 3.3.7 oben und dann nochmal 3.3.6 unten. Das sorgt sicherlich für Fehler.

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

8

03.09.2016, 14:35

Zitat von »Schorsch«

Mal die Browser debugging Tools genommen und geguckt ob es irgendwelche JS Ausgaben gibt

Jap. Eine zu neue Version hatte ich eingebunden und deshalb hat es nicht funktioniert.

Zitat von »Tobiking«

Zumindest ist da schon mal doppelt das Bootstrap Script drin. Einmal in Version 3.3.7 oben und dann nochmal 3.3.6 unten. Das sorgt sicherlich für Fehler.

Ja habe es auch behoben.

Danke euch allen :D :thumbsup:

Werbeanzeige

Ähnliche Themen