Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript
hey, leider bin ich mit meinem Menü noch immer nicht dort, wo ich hin will.
Die Aktivierung/Klicken des Hamburger zum X klappt sehr schön, die Positionierung nicht ganz so.
kann mir bitte jemand sagen, wie man den Hamburger so verknüpft, dass der
Hamburger immer vor "home" sichtbar ist.
also das Menü auch bei bei großen viewports verschwinden lassen könnte und
bei kleinen viewports, das menü als inline-block nach unten aufgeht und die untermenüs durch weiteres klicken noch weiter runter gehen - sowie Basti1012 das in #8 schon super hingekriegt hat.
ich habs nicht geschafft, dass ich das ich mein menü mit dem hamburger verknüpfe. Sorry für die Umstände.
CSS/HTML Code siehe #18/19/20.
den hamburger im html-code hab ich in Kommentar gesetzt, weil das menü sonst wieder so blöd verrutscht. um zu sehen, wo es hingehört, bitte die kommentarzeichen entfernen.
du sagst ja das du die navigation nicht in deiner webseite mit rein bekommen tust. Hast du mal den Code deiner Seite ohne Navigation ? Oder nee skizze wie es aussehen soll. Wenn ich deinen Code so kopieren komtda nicht wirklich ein schönes Ergebniss raus. Wenn ich den ganzen Inhalt da weg lasse bis auf die Navigation dann sind wir wieder bei den code aus Post #8.
Soll die Navigation den so bleiben ( bis aufs aussehen )?
Wenn du dann schon eine fertige Seite hast brauch man die Navigation ja nur noch rein kopieren und etwas Css anpassen
Oje, ich glaub dann ist mein "design" wohl noch nicht ganz ausgereift. das ist meine Seite - habs jetzt etwas aufgeräumt - vielleicht ist es jetzt etwas besser zum durchsehen.
das nav ist noch drinnen - wenn du also den code ohne navigation sehen willst, nimm bitte im Html alles zwischen <nav> und </nav> und im css zwischen NAV A und NAV E raus . hoffe der rest ist nicht ganz zum schmeißen.
das aufräumen hat ja schon mal was gebracht, der erste Blick sieht schon mal 100% besser aus.
Dann kucke ich mal was mit der nav los ist oder wieman es anders machen kann
Wie meinst du das ?
Normale ist es ja das der Hamburger erst sichtbar ist wenn man einen kleinen Bildschirm hat. Dann kann man durch klicken das Menü anzeigen.
Du sagst aber das der Hamburger immer sichtbar ist . Soll der immer da sein egal welche größe ?, und somit auch immer anklickbar ,so das man das Menü verschwinden lassen kann ?
ja das habe ich gemeint, aber, wenn ich so überlege, muss das nicht sein, das war eine spielerische idee. :)
ein hamburger der auftaucht, wenn kleiner bildschirm, reicht vollkommen. dafür aber immer links platziert.
WOW! - das ist ja echt cool geworden, du hast sogar die "banner" repariert und viel stylischer gemacht! Vielen Dank!!
Mir ist aufgefallen, das dass aufgeklappte hamburger-menü immer zuklappt, wenn man zu einem unterem Item scrollt (auf dem Laptop). Ist das, weil kein javascript integriert ist? Wäre es doch besser, wenn man hier js verwendet, so dass es auf klick offen bleibt?
und wie geht das nochmal, dass es sich über den content im main legt, und der content nicht nach unten "wegspringt"?
Das Design ist, glaub ich, noch nicht ideal?? es hebt sich im horizontalen nicht sehr übersichtlich ab.
vielleicht ist es doch besser wenn man die subitems pro item vertikal anstatt horizontal organisiert.
Was ließe sich daran verbessern/ändern/austauschen, dass es ein stylisches und vor allem ordentliches Menü wird, ausgehend von der Version in #30.
ansonsten hätte ich da noch zwei Theorie-Fragen:
1) ich hab mal gelesen, dass man pro html-unterseite jeweils nur eine id vergeben sollte, die restlichen zuweisungen sollten immer über class geführt werden? ist da was dran?
2) px sind für exakte, feste Größen; rem sind zwar auch feste Größen - sind aber "flexibler", weil skalierbar und sozusagen browserübergreifend. welche einheit sollte nun verwendet werden? soll man rem nur spezifisch hier und dort verwenden, oder im ganzen css durchgehend?
Mir ist aufgefallen, das dass aufgeklappte hamburger-menü immer zuklappt, wenn man zu einem unterem Item scrollt (auf dem Laptop). Ist das, weil kein javascript integriert ist?
Das verstehe ich gerade nicht, bei mir klappt nix zu wenn ich runter scrolle, aber mein Browser spinnt sowieso rum. Aber mit Javascript hat das eigentlich nix zu tun weil das Menü ohne JS läuft
Das Design ist, glaub ich, noch nicht ideal?? es hebt sich im horizontalen nicht sehr übersichtlich ab.
vielleicht ist es doch besser wenn man die subitems pro item vertikal anstatt horizontal organisiert.
Solange alle Wörter gleichlang sind sieht es ja ganz gut aus , nur wenn man da verschiedene lange Wörter hat sieht es wieder anders aus.mann könnte das vieleicht auch mit festen größen (px)anpassen doch dann wird das mit responsive auch nix mehr.
Ich persönlich finde die vertikalen Menüs einfacher . Die Horizontalen wie dieses hier hatte ich auch noch nicht gemacht , ein wunder das es überhaupt so gut geklappt hat.
1) ich hab mal gelesen, dass man pro html-unterseite jeweils nur eine id vergeben sollte, die restlichen zuweisungen sollten immer über class geführt werden? ist da was dran?
2) px sind für exakte, feste Größen; rem sind zwar auch feste Größen - sind aber "flexibler", weil skalierbar und sozusagen browserübergreifend. welche einheit sollte nun verwendet werden? soll man rem nur spezifisch hier und dort verwenden, oder im ganzen css durchgehend?
1 . Jo , eine ID muss einmalig sein je Seite. Wie du schon sagst machst du es mit Class oder du nimmst fortlaufende Id's zb ( menue1 , menue2 , menue3 usw ).
Hey, ich hab gestern versucht, dass menü in vertikal zu verwandeln- war dann aber hauptsächlich mit troubleshooting beschäftigt. Eine Zeile schaffe ich, aber die submenüs klappen wieder nicht.
Was ist besser, neu schreiben oder dieses menü umwandeln?
Ps: seid neuestem funktioniert codepen.io nicht mehr. Wenn ich die seite öffne, ist alles schwarz - wie kann man dagegen vorgehen?
Bei der Fehlersuche, spuckt es den Hinweis aus, im Javascript liegt einn Syntaxrror in Zeile 41 und 42 (kein Scherz) vor.
Wenn man weiß was man tut kann man das wohl auch einfach umschreiben.
Als Anfänger sollte man css löschen und wohl neu machen. Dadurch versteht man es wahrscheinlich schneller wenn man weiß wofür man was erstellt hat . Wenn man da einfach die Css auf gut glück ändert ist es auch nicht wirklich lernhaft. Du willst ja auch was lernen .
An besten erstellst du erst die eine ebene bis <nav><ul><li><li></ul></nav>
wenn du das angepasst hast gehst du einen tiefer bis <nav><ul><li><ul><li></li></ul><li></ul></nav>
Wenn du das hast sind die nächsen ebenen nicht mehr großartig anders . Der Css pfad (falscher ausdruck aber weiß den richtigen namen gerade nicht) wird halt nur länger,doch im großen und ganzen bleibt es dann gleich.
Ist bei Codepen alles schwarz oder nur der Linnk zum Menü ?
Lösch mal deine Cache , meistens hilft das schon bei solchen Fehlern
ich werds so probieren wie du sagst und mich wieder melden wenns recht ist.
- mir scheint, als würde sich, wenns um "pfade zu ebenen" geht, ein denkfehler einschleichen - so wie beim rechnen, da hab ich meine fehler in die nächsten Rechenschritte mitgeschleppt - ausmerzen konnte ich diese "Gabe" bis heute nicht so richtig. vielleicht und hoffentlich krieg ich wenigstens beim css den dreh noch raus.
wenn ich codepen direkt aufrufe ist alles schwarz, wenn ich zb deine links aufrufe sind nur die drei boxen html/css/js schwarz, das ergebnis kann ich unten sehen.
es liegt wahrscheinlich an meiner chrome-browser-version (hab auf meinem macbook air von mitte 2011 noch 10.7.5 oben, und bin mir nicht sicher, ob ich auf high sierra (oder gar mojave) updaten soll bzw. kann - falls dazu jemand was sagen kann - auch wenn hier etwas offthread).
einzig was doch wieder dagegen spricht, es hat auf anderen browsern früher normal funktioniert.
www.youtube.com/watch?v=mCSy9z3H3Ow&t=213s - bei 0:47 sieht man was ich gemeint habe, ,man ist dann mit dem Cursor unterhalb des Menüs, obwohl in diesem Beispiel eigentlich das Portfolio käme. Daher würde ich die Klickversion bevorzugen wie im 1. Video.
ich hab versucht zu kombinieren ich komme aber nur soweit wie im Code unten:
1) es klappt nicht, dass mein Menü im kleinen viewport auf hamburger und column umspringt und
2) Ich kriege das Hamburger-Toggle nicht eingebunden - würde mich noch immer nicht stören, wenn der auch im großen Viewport vor der ersten Menüzeile sichtbar bleibt. auch weil ich gerne einen fixed-shrinking header hätte.
3) in weiterer Folge komm ich gar nicht dazu, die toggle/Klickversion wie im video a) einzubauen.
4) wenn das mit javascript einfacher/besser geht, wie wäre das dann umzusetzen??
(Ich weiß es ist dazu die falsche Abteilung aber Doppelposting vermeide ich jetzt mal. Auf meine erste JS-Anfrage werd ich später noch zurückkommen.)
hey. ich hab Punkt 1 selbst geschafft. hier der aktualisierte Code.
in Kombi mit Frage 3, versteh ich noch nicht, wie es funktioniert , dass im kleinen Viewport - wenn man auf Services - web dev geht, abgesehen davon dass es nicht erst auf klick aufgeht, FAQ und About unterhalb sichtbar bleiben.
wäre es nicht einfacher wenn du was fertiges nehmen tust ?
Wenn ich das alles richtig verstehen tue willst du ein Menü das bei kleinen view auf Hamburger umspringen tut.
Dann soll das hover weg und mit Click ausgetauscht werden .
Zusätzlich soll dein Menü über 3 Ebenen gehen.
Es wäre einfacher wenn du was fertiges nimmst und dir das anpassen tust.
Deinen Jetzigen Code immer wieder neu anpassen zu müßen ist ja auch nicht gerade toll. Für dich zum lernen ist es vieleicht gut dann lernst du gleich was wofür ist.
Wenn zb ich dir da den Hamburger einbaue oder die click Variante , mußt du ersmal wieder schecken was ich gemacht habe . Dann änderst du wieder was und ich muß kucken.
Das geht alles , nur solltest du wissen was du machen willst ?.
Gerade die 3 Ebenen ist für Anfänger auch nicht leicht. Wie du in dein Code merken tust kommst du an download , faqs, und about gar nicht dran.
Auf den ersten blick ist das einer meinung auch der falsche weg. Du setzt die <li> auf display none und beim hovern auf block. das solltest du mal auf die <ul> Elemente anwenden , das sollte bessere Ergebnisse bringen
ich glaube, ich bin mit dem Menü schon ein Stück weitergekommen.
ich habe jetzt nur mit deiner Vorlage aus #30 gearbeitet und nur von horizontal in vertikal umgewandelt und farbe und größe verändert, ohne strukturelle Veränderungen vorzunehmen.
bevor ich das Endprodukt hier reinstell (jetzt sind noch ganz viele /**/ drinnen, damit ich meine eigenen Veränderungen vom Ursprung her nachvollziehen kann) gibt es noch ein paar Hürden zu nehmen. daher mal 3 theoretische Fragen.
mir ist nicht klar, wie ich das im CSS ansprechen und entsprechend stylen soll, wenn ich schon label und input habe. und wie der Pfeil ohne sonderzeichen zustande kommt ist mir auch nicht klar.
und wenn ich jetzt eben verschiedene menüpunkte habe, muss ich dann nur das check01, check02, check03 pro Menüpunkt bezeichnen?
die Recherche im Netz hat leider nicht sehr geholfen.
die 2. Frage - sofern die sich theoretisch ohne Code beantworten lässt-
müsste ich da nicht die ul-elemente zu den submenus mit position: absolute ansprechen, damit die nach untenhin dableiben und nicht "wegspringen" also um es bildlich zu beschreiben eine schachtel in der schachtel aber die dritte schachtel beibt unten dran.
3.Frage
der letzte Menü-Punkt in der Horizontalen geht 2 Ebenen tief. einmal runter und dann left: 100%. Leider liegt die 2. Ebene außerhalb des Browserfenster. Gibt es einen Trick wie ich das begrenzen kann?
Kannst du mal deinen Code bei Codepen posten ?.
Das ist einfacher wenn man das sieht wie du es bis hetzt gemacht hast .
zu frage 3.
Ja zur andere Seite einblenden.
Wo kommt der Pfeil her ohne Sonderzeichen ?.
Ja , das habe ich zwar so auch noch nicht gesehen , aber ist nee coole Idee.
Der Pfeil wird durch den Border erstellt
Diese Seite verwendet Cookies, um Inhalte zu personalisieren und dich nach der Registrierung angemeldet zu halten. Durch die Nutzung unserer Webseite erklärst du dich damit einverstanden.
