HTML Navigationsleiste wie auf dieser Seite erstellen

[Titan CCCCIↃↃↃↃ]

Hallo CB-Community,

ich bin gerade dabei eine eigene Webseite zu schreiben. Nach dem ganzen Rumprobieren möchte ich nun das Grundgerüst mit einer Navigationsleiste "bauen". Ich dachte dabei an eine Navigation wie auf pvp.net - sprich mit Untermenüs, sich verändernen Boxen etc.

Ich habe dazu grundlegende CSS- und HTML-Kentnisse.

MfG

 

[Crimvel]

für sowas brauchst du Javascript.

 

[Yuuri]

Wie viele Tutorials hast du schon durchwühlt? Hast du überhaupt schon nach etwas gesucht? Weißt du nicht nach was du suchen musst? Steckst du irgendwo fest? Wo liegt dein Problem? Was kannst du genau nicht?

Fragen über Fragen und nicht mal eine einzige wurde gestellt... -.-

 

[fz21z]

wenn du html und css kannst, dann verschachtel doch paar listen und blende die dann ggf. immer mit css ein

 

[Titan CCCCIↃↃↃↃ]

Das Problem ist, dass ich nicht verstehe, wie ich beginnen soll. Ich hab mich eben ein bisschen umgeschaut und z.B. gefunden, dass man eine Leiste mit Tabellenzellen machen kann. Das sieht dann aber nicht ansatzweise so aus wie auf der Seite.

Deshalb: Wie soll ich vorgehen (einzelne Boxen erstellen, Tabellenzellen verwenden oder oder...)?

 

[Yuuri]

Das Einfachste: Sieh dir den Quelltext an. Nutz Firebug oder irgendwelche anderen Entwicklertools und -Konsolen und sieh dir genau an, was wie gemacht wird.

Die Navigation auf der Seite besteht bspw. nur aus Listen. Halt mal im Quelltext nach der ID "lol-header-nav" Ausschau.

 

[longwalk]

Wenn du nicht weißt wie du anfangen sollst, denke ich dass es ein wenig kompliziert werden könnte. Auf der verlinkten Seite funktioniert das Navi bei mir auch ohne JavaScript, was schon mal toll ist, aber selbst nur mit CSS ist das schon aufwendig gemacht. Und ein noch größeres Problem wirst du dann wohl haben, wenn du das auch noch auf dem Internet-Explorer zum Laufen bringen willst - wenn du das willst.

Ansonsten, anfangen?

Eine ID für das Menü eine für den Inhalt darunter. Beide position: absolut; damit du über z-index: 2 bzw. 1; die Aufklappmenüs über den Inhalt bringen kannst.
Das Menü besteht aus Listen, die Aufklappmenüs sind verschachtelte Listen, die mit display:none; unsichtbar und display: block; im hover-Effekt sichtbar gemacht werden. Mit float: left; bringst du die Listenpunkte im Hauptnavi in die horizontale, aber das sollte man eigentlich wissen, bevor man sich an so etwas heran traut.

Probier mal ein bisschen damit herum, vielleicht bringt es dir ja was.

EDIT: fallst du noch Lernen willst kann ich dir z.B. die Seite hier http://www.peterkropff.de/ und diesen Youtube-Kanal empfehlen http://www.youtube.com/user/htmlworld

 

[NoXPhasma]

Du kannst das mit HTML und CSS machen, schau dir mal dieses Tutorial zu einem "Son of Suckerfish" Dropdown Menü an: http://www.htmldog.com/articles/suckerfish/dropdowns/

 

[Daaron]

für sowas brauchst du Javascript.

Eine Dropdown-Navigation mit JS zu bauen ist einfach nur dämlich. Man kann die Navigation mit JS etwas aufhübschen, man sollte aber immer davon ausgehen, dass der User kein JS aktiv hat. Ein Suckerfish-Menü mit Animationen kann man in reinem CSS erzeugen. Die Animationen gehen dann zwar nur in den wirklich modernen Browsern, aber grundsätzlich funktioniert es quasi überall.

Wenn du nicht weißt wie du anfangen sollst, denke ich dass es ein wenig kompliziert werden könnte. Auf der verlinkten Seite funktioniert das Navi bei mir auch ohne JavaScript, was schon mal toll ist, aber selbst nur mit CSS ist das schon aufwendig gemacht. Und ein noch größeres Problem wirst du dann wohl haben, wenn du das auch noch auf dem Internet-Explorer zum Laufen bringen willst - wenn du das willst.

Die Navi dort ist nicht aufwändig gemacht, sie ist übermäßig kompliziert strukturiert. Was da an völlig unnötigen Containern drin rumfährt geht auf keine Kuhhaut. Totale Verschwendung von Bandbreite und Renderzeit.
Und wo liegt das Problem im IE? Der einzige IE, der Probleme mit CSS Suckerfish Navigationen macht, ist der IE6... und wer jetzt noch für dieses Ding entwickelt hat dne letzten Schuss nicht gehört.

 

[longwalk]

Die Navi dort ist nicht aufwändig gemacht, sie ist übermäßig kompliziert strukturiert.

Ok, kann schon sein. Ich bin selbst noch am lernen und für mich hörte es sich so an, als wär der TE noch weniger geübt als ich. Darum kam ich wohl auf aufwendig. Aber im Grunde hast du Recht, wenn man einmal weiß wie, dann ist es eigentlich nicht schwer.

Und wo liegt das Problem im IE? Der einzige IE, der Probleme mit CSS Suckerfish Navigationen macht, ist der IE6... und wer jetzt noch für dieses Ding entwickelt hat dne letzten Schuss nicht gehört.

Viele Dinge die ich lerne funktionieren erst ab IE9 und wenn man wenigstens XP mit drin haben will, dann muss man auch den IE8 beachten. Aber auch da könntest du recht haben. Kann sein, dass ich die Probleme weniger bei den Dropdown-Menüs sondern nur bei Transparenzen und Sonstigem hatte. Kann ich jetzt auch nicht prüfen - oder hab keine Lust - weil ich Windows eigentlich nur noch anmache, wenn ich mal ein Spielchen spielen will

 

[Daaron]

Viele Dinge die ich lerne funktionieren erst ab IE9 und wenn man wenigstens XP mit drin haben will, dann muss man auch den IE8 beachten.

Von der tatsächlichen Verbreitung her sollte man sogar bis IE7 wenigstens eine grundsätzliche Kompatibilität anbieten.
Aber gerade bei Dropdown-Navigationen geht alles, was man wirklich dafür braucht, damit es funktioniert, bereits ab IE7, denn man benötigt ja nur:
- position:absolute
- display:none & display:block
- evtl. noch ne Angabe für top, left oder right
- li:hover
Das einzige davon, was im IE6 nicht geht, ist übrigens das li:hover. Der kann nur auf <a> das Hover Event zünden, aber selbst dafür gab es Bugfixes

Alles andere ist nur reine Schönheitskur. Der Funktionalität ist es egal, ob die Ecken jetzt rund sind oder nicht.
Was übrigens Transparenzen angeht (insbesondere das, was man in CSS3 mit rgba-Werten erreicht): Das kann jeder IE, wenn auch "eigenartig". lies dir mal die DirectX-basierten Filter-Methoden durch. Jeder IE bis einschließlich IE9 kann die filter-Deklarationen nutzen, um halbtransparente Hintergründe oder Verläufe zu erzeugen. Erst beim IE10 fliegen die -ms-filter endgültig raus zu Gunsten von CSS3.
Das einzige, was der IE9 so oder so gar nicht kann sind CSS3 Transitions & Transformations. Aber gerade bei den Transformationen (insbesondere 3D-Transformationen) mangelt es eh noch am Support. Können soweit ich weiß nur aktuelle Webkit-Browser anständig. Transitions hingegen klappen in FF, Webkit-Browsern und Opera.

 

[longwalk]

Ich würde am liebsten gar nicht über den IE nachdenken müssen aber so leicht kann man es sich dann wohl auch nicht machen.
Danke für die weiteren Erläuterungen. Das mit den Transformationen kannte ich sogar noch gar nicht, das muss ich mir mal anschauen. Danke.

 

[Daaron]

Mit 2D-Transformationen kann man schon heute lustige Effekte erzielen, z.B. Bildergalerien mit schief "eingeklebten" Fotos. Wenn 3D-Transformationen richtig spruchreif werden wird es auch nicht lange dauern, bis die ersten Webseiten mit Tiefgang kommen. Ich hab da schon ein paar Ideen zum Einsatz von perspektivischer Verzerrung.

 

[Titan CCCCIↃↃↃↃ]

So, danke erstmal. Ich habe euren vielen Tipps gefolgt und es (LINK) sieht bis jetzt auch ganz gut aus. Ich möchte aber noch ein paar Feinheiten in der Navigation anpassen:

- Doppelte Ränder entfernen (border-collapse: collapse hat irgendwie nicht funktioniert...).
- Dropdownlisten um einen Pixel nach links verschieben (sie passen nicht exakt...).

Es wäre super, wenn ihr mir noch diesbezüglich helfen könntet.

MfG

 

[Daaron]

border-collapse wirkt nur auf Tabellen... Du musst einfach deine Rahmen etwas cleverer deklarieren.

Übrigens: Sämtliche Größenangaben (außer Schriftgrößen & Zeilenhöhen) benötigen in CSS eine Einheit.

 

[fz21z]

border-collapse wirkt nur auf Tabellen... Du musst einfach deine Rahmen etwas cleverer deklarieren.

Übrigens: Sämtliche Größenangaben (außer Schriftgrößen & Zeilenhöhen) benötigen in CSS eine Einheit.

Dem stimme ich zu, wie in meinem vorherigen Post angemerkt bist du tatsächlich der Listen Idee gefolgt, funktioniert doch soweit ganz gut.
Vergess nicht, die HTML Version noch zu deklarieren aktuell hast du einfach nur <html> drin.

 

[Titan CCCCIↃↃↃↃ]

border-collapse wirkt nur auf Tabellen... Du musst einfach deine Rahmen etwas cleverer deklarieren.

Geht das ein bisschen genauer? :/

 

[Daaron]

Vergess nicht, die HTML Version noch zu deklarieren aktuell hast du einfach nur <html> drin.

Jap, da fehlt ein DOCTYPE.
<!DOCTYPE html> in die erste Zeile (vor <html>) und gut ist.

Geht das ein bisschen genauer? :/

Du könntest jedem <li> der Untermenüs einen Rahmen links, rechts und unten geben. Nur dem ersten <li> eines Untermenüs gibst du dann noch einen Rahmen oben.
Du könntest natürlich auch dem <ul> einen Rahmen geben und jedem <li> (bis auf das erste) einen Rahmen oben... oder jedem <li> bis auf dem letzten n Rahmen unten.

Da man sich auf den Pseudo-Selektor :first-child nur mäßig und auf :last-child sowie :nth-child quasi gar nicht verlassen kann geht bei solchen Menüs nix über eine gute Klassenstruktur (mit .first, .last, submenu, .level_1, .level_2, .odd, .even,...)

P.S.: Wenn du mal n CSS-Dropdown mit Animation sehen willst: http://playport-dresden.de/
Läuft natürlich nicht im IE, alle anderen modernen Browser solltens richtig machen.

 

[Titan CCCCIↃↃↃↃ]

Alles klar, jetzt passt's. Danke. Könnt ihr mir vllt. nochmal schnell sagen, wie ich jetzt am besten weitermachen sollte? Ich wollte erstmal eine Newsansicht implementieren. Sollte ich dazu unterschiedliche Frames nutzen?

 

[Daaron]

Na ja, hast du dir mal überlegt, was du alles benötigst? Hast du dir überlegt, wie gut deine PHP-Kenntnisse sind? Kennst du dich mit elementaren Sicherheitsproblemen aus?
Im Zweifel solltest du dir den Stress sparen, eine auch nur leidlich verwaltbare Webseite selbst zu schreiben. Schnapp dir lieber eines der vielen Open Source CMS.