Toggle Fehler wenn Bootstrap verlinkt

html.de-Forum JavaScript
1

Hallo,

ich habe ein Problem mit dem Mobile-Menu. Wenn ich Bootstrap verlinke, geht mein toggle nicht. Der Z-Index scheint mit -1 zu sein, da der Text über der Navigation ist?

[HTML]

[/HTML]


.navigation {
  height: 70px;
  background: #333;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
}
#nav-main nav {
  float: left;
}
#nav-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav-main ul li {
  float: left;
  position: relative;
}
#nav-main ul li a,
#nav-main ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #333;
  color: #ffffff;
  font-size: 130%;
  text-decoration: none;
  border-right: 1px dotted #535353;
}
#nav-main ul li a:hover,
#nav-main ul li a:visited:hover {
  background: #2581DC;
  color: #ffffff;
  transition : all 0.4s ease-in-out;
}
#nav-main ul li a:not(:only-child):after,
#nav-main ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
#nav-main ul li ul li {
  min-width: 190px;
}
#nav-main ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1001;
  font-size: 80%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 800px) {
  .nav-mobile {
    display: block;
  }
  #nav-main {
    width: 100%;
    padding: 70px 0 15px;
  }
  #nav-main ul {
    display: none;
  }
  #nav-main ul li {
    float: none;
  }
  #nav-main ul li a {
    padding: 15px;
    line-height: 20px;
  }
  #nav-main ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

@media screen and (min-width: 800px) {
  .nav-list {
    display: block !important;
  }
}

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

habe schon geschaut ob ich eine bootstap klasse verwende, aber nichts gefunden.

2

Heißt jetzt Verlinkung der Bootstrap Styles und/oder Scripts?

Die Bootstrap Navi bringt ihr eigenes Script mit, welches mit deinem kollidieren könnte. Außerdem braucht es dort keine eine doppelt gekapselte Funktion, und das hier sieht auch nicht richtig aus:

$('#nav-toggle').on('click', function() { this.classList.toggle('active'); });

3

Bootstrap.css.

Aber der toggle-effekt geht auch nicht mit bootstrap, nur mit der bootstrap.css ist die eben eben verzogen und die navigation ist hinter dem text. Wir würde es denn richtig aussehen?

4

Hallo

Wenn Bootstrap nicht funktionieren würde wäre es kaum so beliebt.

Wenn jemand Bootstrapkomponenten bemängelt hat er in der Regel durch eigene Änderungen die Probleme selbst bewirkt.

Ohne Link zu der Seite können wir die Ursache aber nicht finden.

Gruss

MrMurphy

5

Warum gehst Du überhaupt diesen Umweg, und erfindest das Rad in punkto Scripting neu, wenn Bootstrap solch ein Menü schon bereitstellt?

Deinem gezeigten Quellcode-Ausschnitt zufolge, fehlt zudem das Bootstrap-Script bootstrap.min.js, was möglicherweise ein weiterer Fehleraspekt in Deinem Konzept sein könnte.

6

ich habe die seite nicht online, ist eine übungsaufgabe für mich selbst.

naja ich wollte jetzt einfach mal eine seite ohne bootstrap machen bzw. nur das grid davon benutzen um da mehr code-übersicht zu haben, da ich bei bootstrap, selbst wenn man es beim download anpasst, meist nur 10-40% code nutzt und das aussortieren am ende mehr arbeit machen würde.

ich brauche die bootstrap.js nicht, da ich ja ein eigenes js dafür habe.

ich dachte jemand mit mehr jquery erfahrung sieht erkennt dort einen fehlerim script direkt, oder auch im css. ich experimentier einfach noch etwas herum. ich denke es liegt irgendwie an doppelten klassen oder einer id.

trotzdem danke an alle antworten.

7

Übungsaufgabe hin oder her. Entweder nutze ich ein Framework wie Bootstrap in vollem Umfang, oder lass’ es komplett sein. Wohin es ansonsten führt, siehst Du an der mißlungenen Übungsaufgabe.

Denn wie es eingangs klang, funktioniert Dein Toggle-Script ohne Bootstrap-Implementierung.

8

Um das alles zu verstehen ist es finde ich gerade wichtig sowas dann auch zu wissen.
Wenn man nur vorgefertigte Klassen benutzt kann man ja nie an Erfahrung gewinnen. Du weist ja auch nicht an was dass liegen kann, sonst würdest du ja dazu was schreiben. Am Script kannst nicht liegen, da ich ja auch die IDs und Klassen kontrolliert habe bzw. ein eigenes JS im HTML habe … wozu brauche ich die Bootstrap.js?

Misslungen ist die Aufgabe sicher nicht, weil es mal ein Problem gibt. :wink: U.a. hat Bootstrap bei den Fontangaben noch Pixel, ich will rem usw. Das alles umzubauen dauert eben auch - daher nur das Grid.

Es funktioniert mittlerweile auch. Nur im Mobile kann ich komischerweise nur den ersten Link benutzen, die anderen sind nicht wählbar. Mal schauen was dahinter steckt.

p.s. ich wollte eigentlich keinen Trash-Talk - bitte nur schreiben, wenn man zum Thema direkt was hat und keine Belehrungen ohne Erklärung <3 Danke

EDIT:

Das Problem hat was mit der position der col`s zu tun.

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }

Ohne position:relative; gehen die Links im Mobile alle. Komisch, habe beim Testen keine einzige col-class verwendet und trotzdem ist dass das Problem. Hm.

9

Auf Fehler im Script hatte ich bereits hingewiesen, und auf IDs solltest du im CSS grundsätzlich verzichten.

Außerdem lassen sich bei Bootstrap auch Dinge ausklammern, in dem man die SCSS Variante verwendet und sein eigenes Stylesheet kompiliert. Frage ist nur, ob dein Wissensstand ausreicht, dir eine eigene Toolchain zu bauen. In dem Fall wäre das hier der richtige Einstiegspunkt.
http://gulpjs.com

10

So trashig ist der Talk gar nicht. Manchmal bedarf es auch kritischer Kommentare von außen / Dritten, um die Augen geöffnet zu bekommen.

Aber selbstverständlich steht es Dir offen, Bootstrap nicht in vollem Umfang zu nutzen, um das eine oder andere zu üben, und am Ende daraus was zu lernen.

Viel Erfolg!

11

Danke für beide Antworten.

So, habe die Fehler gefunden:

@media only screen and (max-width: 800px) { .nav-mobile { display: block; } nav ul li { float: none; z-index: 899; } .nav-dropdown { position: relative; } }

Musste die position: static; ändern und komischerweise der nav ul li einen z-index geben. (Wieso weis ich nicht, aber das war das Problem).

Wieso sollte man auf IDs verzichten? Gibt es da einen Grund den du nennen kannst?
Ja, den Fehler im Script hats du angesprochen, allerdings erkenne ich ihn selbst nicht. :frowning:

12

Nicht rausschneiden, sondern per SCSS zusammenbauen.

CSS Specifities. Eine ID wiegt 10 Klassen auf. Bei Verwendung von IDs müssen Selektoren tief ausdifferenziert werden, um Attribute zu überschreiben. Deswegen verwendet Bootstrap für das Styling auch keine.
https://www.w3.org/TR/selectors/#specificity

Die Methode heißt toggleClass() und das HTML-Element sollte als jQuery Objekt gecastet werden. $(this) statt this.

13

Ah, also wegen der Performance also? Danke, gut zu wissen. Wenn ich Toggle zu jQuery „caste?“ geht der hamburger zu x effekt nicht mehr.