Spezielles Dropdown-Menü für meine Homepage - Bräuchte Hilfe beim "portieren"!

[RazerGaming]

Hallo,

ich bin gerade dabei an einer neuen Homepage zu basteln. Allerdings fehlt mir noch ein Menü. Nun bin ich zufällig auf "Xbox.de" auf solch ein Menü gestoßen, was mich sehr sehr anspricht. Ich habe schon lange im Internet gesucht - aber dieses Menü passt einfach am Besten.

Vorweg müsst ihr wissen, dass ich noch nicht ganz so erfahren in HTML etc. bin und daher manchmal ein paar Erläuterungen brauche.

Das Menü ist das, welches unter "XBOX LIVE MARKETPLACE" ist, das Menü, wo "Mein Konto" steht. Wenn man mit der Maus auf dieses Menü klickt, fährt es mit einem schönen Effekt aus...

Xbox LIVE Marketplace | Willkommen auf dem Xbox LIVE-Marktplatz


Also: Könntet Ihr mir helfen, dieses schöne Menü auf meine Homepage zu bekommen? Das wäre sehr nett!

Wenn man den Quellcode betrachtet, steht der Code für das Menü ca. um die Zeile 220.


LG, Lennart W.

 

[Efchen]

Das sieht aus wie ein stinknormales CSS-Popup-Menü, wie Du sie im Netz zuhauf finden kannst, inkl. Anleitungen/Tutorials, wie man die erstellt. Mit JavaScript hat das nichts zu tun, sieht man mal von einer JS-Alternative für ältere IEs ab, die mit den CSS-Menüs oft genug nicht zurecht kommen.

Und wenn Du das Menü schon im Code gefunden hast, kannst Du Dir ja den relevanten Teil kopieren und das Aussehen anhand des Stylesheets anpassen.

 

[neuroleptika]

Das Besondere an dem Menü ist die leichte Verzögerung beim Einklappen.
Das geht nicht ohne Script.

Sie mal hier:
Barrierefreies und benutzerfreundliches Suckerfish Dropdown / Flyout-Menue - pfirsich-melba

 

[RazerGaming]

Das Besondere an dem Menü ist die leichte Verzögerung beim Einklappen.
Das geht nicht ohne Script.

Sie mal hier:
Barrierefreies und benutzerfreundliches Suckerfish Dropdown / Flyout-Menue - pfirsich-melba

Danke! So etwas habe ich auch schon gefunden. Aber so etwas, kann man das denn auch in CSS verändern, also das Design? Und bei dem Link, da gibt es nur Menüs, die zur Seite auf gehen, meines sollte (wie auf xbox.com) nach unten aufgehen...

Das sieht aus wie ein stinknormales CSS-Popup-Menü, wie Du sie im Netz zuhauf finden kannst, inkl. Anleitungen/Tutorials, wie man die erstellt. Mit JavaScript hat das nichts zu tun, sieht man mal von einer JS-Alternative für ältere IEs ab, die mit den CSS-Menüs oft genug nicht zurecht kommen.

Und wenn Du das Menü schon im Code gefunden hast, kannst Du Dir ja den relevanten Teil kopieren und das Aussehen anhand des Stylesheets anpassen.

Ja, den Code habe ich, aber welche Stylesheeds werden benutzt? Und welche <div id=....." ...> muss man alle haben?




Ich habe auf jeden Fall einmal folgendes probiert:
Ich habe den Quellcode der kompletten Seite einmal in ein neues HTML Dokument eingefügt und dann überall, wo "/xweb/....css" steht, http://marketplace.xbox.com/xweb/....css" geschrieben. Nun sieht die Seite zwar genau so aus wie original, aber das Menü geht nicht aufzuklappen...

Danach bin ich auf folgende Idee gestoßen, auf die ich eigetnlich schon am Anfang stoßen könnte ;-):
Also, ich habe einfach mal die komplette Seite gespeichert (Datei/Seite speichern...) und - naja, alles sieht ganz normal aus, außer, dass das Menü nun keinen Hintergrund hat, wenn man es ausklappt, also man sieht die Schrift (Mein Konto etc.), aber keine Umrandung und keinen Hintergrund, wenn man es ausklappt... Geht ja ganz schnell, könnt ihr auch einmal ausprobieren.


Das ganze habe ich gemacht, um dannach, wenn es funktioniert, den Menücode herauszuarbeiten mit den dazugehörigen <div>'s etc.


Trozdem, ich weiß nicht weiter....

 

[Efchen]

Aber so etwas, kann man das denn auch in CSS verändern, also das Design?

Es gibt in der Web-Entwicklung nur eine Sprache, die für Design zuständig ist - CSS.
Also kann man natürlich alles an einer Webseite mit CSS formatieren.

Und bei dem Link, da gibt es nur Menüs, die zur Seite auf gehen, meines sollte (wie auf xbox.com) nach unten aufgehen...

Ohne nachzugucken, aber was man durch Verschiebung der x-Koordinate positionieren kann, kann man auch durch Veränderung der y-Koordinate positionieren.

Ja, den Code habe ich, aber welche Stylesheeds werden benutzt?

Wenn Du einen Code für ein CSS-Aufklappmenü hast, dann hast Du zwangsläufig einen HTML-Teil und einen CSS-Teil.

Und welche <div id=....." ...> muss man alle haben?

Gar keine. Ein Menü ist keine Gruppe. <div> bedeutet "Gruppe mehrerer Elemente". Ein Menü ist eine Liste von Links, wird daher mit <ul> ausgezeichnet. <div> ist da fehl am Platze. Bitte nicht dem <div> eine Super-Duper-Sonder-Bedeutung zumessen, die es nicht hat. Alle anderen Tags sind genauso wichtig.

Also, ich habe einfach mal die komplette Seite gespeichert (Datei/Seite speichern...) und - naja, alles sieht ganz normal aus, außer, dass das Menü nun keinen Hintergrund hat

Dateien, die über das Stylesheet referenziert werden, also Hintergrundbilder, werden bei der Aktion nicht mit abgespeichert.

Das ganze habe ich gemacht, um dannach, wenn es funktioniert, den Menücode herauszuarbeiten mit den dazugehörigen <div>'s etc.

Wie gesagt, ein Menü hat nichts mit <div> zu tun! <div> dient nur zum Gruppieren mehrerer (also mindestens 2!) Elemente.

 

[RazerGaming]

Also, noch einmal vielen Dank für die sehr schnelle und informative Antwort!

Nun, ich habe bis jetzt schon sehr viel aus dem Quellcode nehmen können, ohne, dass das Menü kaputt geht (außer der Hintergrund etc.). Nun komme ich aber einfach nicht weiter, denn immer, wenn ich etwas verändere, geht z.B. das Menü nicht mehr auf oder wird mit "<li>-Aufzählungspunkten" angezeigt.

Daher bitte ich einen von euch, mir das nur Menü einmal herauszuarbeiten. Meine Vorarbeit ist im Anhang, ich denke mit der sollte das relativ fix gehen für einen, der sich gut auskennt.

Die Datein findet ihr im RAR Format hier:
http://www.razergaming.wmw.cc/Projekt-Xbox-Menue.rar
Archivgröße: 75 KB

 

[neuroleptika]

Dein Archiv habe ich mir nicht runtergeladen.

Der Autor hätte keine ausführliche Anleitung geschrieben, wenn es für jeden selbsterklärend wäre.
Du mußt das Beispiel erst verstehen ehe du es verändern kannst.
Vielleicht fängst du besser mit etwas einfacherem an.

 

[RazerGaming]

Dein Archiv habe ich mir nicht runtergeladen.

Der Autor hätte keine ausführliche Anleitung geschrieben, wenn es für jeden selbsterklärend wäre.
Du mußt das Beispiel erst verstehen ehe du es verändern kannst.
Vielleicht fängst du besser mit etwas einfacherem an.

Ich glaube du hast mich missverstanden. Ich habe hier das Menü von Xbox.com und nicht das, was du vorher gepostet hast...

Noch einmal:
Die Datein (vom Xbox Menü) findet ihr im RAR Format hier:
http://www.razergaming.wmw.cc/Projekt-Xbox-Menue.rar
Archivgröße: 75 KB

Wie gesagt (Post #6), es wäre sehr nett, wenn sich jemand das mal kurz ansieht und nur das Menü herausarbeitet.
Danke.

 

[RazerGaming]

Nun habe ich es übrigens geshafft (ging leicht, musste nur im CSS Dokument ein paar URL's verändern), das Menü mit Hintergrund zu gestalten.

Ich habe das RAR Archiv online aktualisiert und hoffe, dass jemand so nett ist, dass er sich kurz Zeit nimmt, um, wie gesagt (Post #6), nur das Menü herauszuarbeiten.


Edit:
Außerdem habe ich es nun geschafft, nur das Menü herauszuarbeiten. Allerdings habe ich noch einge Fragen, wie z.B., ob man überall diese id="..." benötigt und aus welchem CSS Dokument o.Ä. diese genommen werden.
Aktualisiert:
http://www.razergaming.wmw.cc/Projekt-Xbox-Menue.rar

 

[RazerGaming]

Geschafft!

Also, ich habe es geschafft, keiner brauch sich mehr 'drum zu kümmern :-)