Frage Unerklärliches Verhalten eines Nav-Menus, es liegt irgendwie nur im Body ... und nicht im Rest

[Tim231]

Hi,

sorry, ich weiß nicht wie ich mich anders formulieren soll.

Ich habe versucht mir dieses responsiv Menu zu eigen zu machen:

http://w3bits.com/css-responsive-nav-menu/ und wenn man sich die demo http://w3bits.com/labs/css-responsive-nav/ ansieht, klappts ja auch super... nur wenn man den code kopiert, dann hat man so was... seltsames... für mich unerklärliches.

das Gefällt mir eigentlich ganz gut, bis darauf, dass man bei kleinen screens die Pfeile anklicken muss um auf und zu zuklappen, da wär mir lieber wenn es mit dem ganzen List item ginge (wenn jemand nen Tipp hat wäre toll, ist aber nicht DAS PROBLEM)

DAS PROBLEM ist, dass das Menü irgendie für mich unerklärlich "zwischen allem" liegt.

Zum einen ist es Transparent und lässt sich nur dann mit einer Hintergrundfarbe versehen, wenn man den "Body" mit einer anderen Hintergrundfarbe versieht... im NAV oder im div selbst, also bei "#menu" kann man reinschreiben was man will... es bleibt transparent...

Außerdem liegt optisch die eine Hälfte des Menu im Header, die andere im Main, so als würde es irgendwie "drüberprojeziert"....

Ich hab aber auch den "originalcode" von der Website: http://w3bits.com/css-responsive-nav-menu/ nochmal in ein leeres html und css kopiert... das verhalten ist das gleiche... transparent und lässt sich außer durch den "body" von nichts beeinflussen....

Wie gesagt.... schön wäre, wenn die ganzen list-items als auslösend funktionieren würden und nicht nur die Pfeile (in der screenansicht unter 1000px) was ich aber überhaupt nicht auf die reihe bekomme ist das Verhalten bei über 1.000 px...

es wird nicht so wie es soll... so garnicht.... es bleibt transparent und ist nicht im header... und nicht im main... und nicht im eigentlich nav... es hängt so "dazwischen...."

ich hab da inzwischen bald 10 stunden drin versenkt nur dieses eine Problem zu lösen... ohne auch nur einen Schritt weiter zu sein... wäre toll, wenn mir jemand auf die sprünge helfen könnte. :)

Leider ist der Beitrag auf 10.000 Zeichen beschränkt, daher kann ich den code hier nicht posten... ebenso kann man keine .html oder .css dateien hochladen.... daher der code in txt-dateien im Anhang.

Vielen lieben Dank schon mal im Voraus :)

Gruß

Tim

 

[Tim231]

Es wirkt irgendwie, als wäre die Navigationsleiste "außerhalb der Seite" aber innerhalb des Body.

Er setzt die Navi "obendrauf" statt sie in die Seite zu integrieren....

ich finde ums verrecken nicht raus warum... ich hab schon einzelne codezeilen gelöscht um zu gucken was passiert... alles ohne dass sich an dem Verhalt irgendwas getan hätte....

 

[MrMurphy]

Hallo

Es wirkt irgendwie, als wäre die Navigationsleiste "außerhalb der Seite" aber innerhalb des Body.

Ein typisches Problem wenn float oder position: absolute falsch benutzt werden.

Lass beides weg und verwende Flexbox.

Gleichzeitig sollte der HTML-Quelltext im body-Bereich den aktuellen HTML-Regeln angepasst werden, um überhaupt eine vernünftige Grundlage zu haben.

bis darauf, dass man bei kleinen screens die Pfeile anklicken muss um auf und zu zuklappen

Das ist auch so gedacht und sinnvoll. Touchscreengeräte kennen keinen hover-Effekt und wenn die "Überschrift" (zum Beispiel "Leistungen") bereits verlinkt ist müssen deshalb die "Überschrift" und der aufklappbare Inhalt getrennt ausgewählt werden können.

Insgesamt ist deine Vorlage aber kein gutes Beispiel, da die Navigation über die Tastatur nicht funktioniert. So was ist bei aktuellen Webseiten ein NoGo.

Gruss

MrMurphy

 

[Tim231]

Hi,

vielen lieben Dank für die Antwort. :)

Ich "betreue" nur eine Webseite... meine eigene. D.h. Ich hab relativ wenig Ahnung, leider. Im Wesentlichen sehe ich zu, dass ich Vorlagen finde und anpasse und implementiere.

Ist nicht gut, aber besser kann ichs nicht. Aktuell will ich meine Seite moderner machen, dazu hab ich auf mobile first umgebaut usw. Das Design passt noch nicht, aber so nach und nach wirds.

Leider weiß ich nicht, was Du mit "body den aktuellen html-regeln anpassen" meinst...
Bei Validator ist alles ok und bei qualidator.com hatte ich 90,6% bevor ich mich über das Menü gemacht habe... ich bastel ohne Programm nur mit synwrite als editor und test dann mit tools obs passt und bemühe mich die Fehler zu entfernen... aber wirklich auskennen tu ich mich leider nicht.

Das mit den Links bei mobilgeräten ist klar. Die Seiten die bislang in der Topnav waren und verlinkt waren werden dann entfallen, so dass diese Links nicht mehr benötigt werden.

Wenn meine Vorlage eine schlechte ist... kannst Du mir ne gute nennen? Von java oder jquery hab ich keine Ahnung... also gar keine meine ich... da kenn ich nur den Namen... daher suche ich nach Möglichkeit nach css-basierten Menüs. Nicht, dass ich behaupten könnte mich in css auszukennen, aber damit hab ich zumindest nun schon ne weile "gebastelt". Anders lässt sichs nicht formulieren.

Ich "brauche" Multilvl mit 2 Ebenen, bei screen über 1.000px will ich die listitems links und rechts am Rand anzeigen lassen, jeweils die linken und rechten in einheitlicher breite und bei unter 1.000 dann als schönes "Aufklappmenü". Ne Flexbox mit Dropdown hab sogar schon hingebracht, aber ich bekomms dann einfach nicht "hübsch" weil mir zu viel wissen fehlt wie es geht und häufig auch was überhaupt geht und was nicht...

Wenn Du oder irgend jemand andere zufällig eine schöne Vorlage dazu kennt wär das wirklich toll! :)

Danke schon jetzt für alles und nochmal danke für das Bisherige. :)

Gruß

Tim

 

[Tim231]

Es funktioniert, allerdings muss man ein bisschen code eingeben

.clearfix {
  *zoom: 1;
}
.clearfix:before, 
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}

und mit clearfix arbeiten.

Gruß

Tim

p.s. würds gern auf erledigt setzen... aber weiß nicht wie...