horizontale Navigation im iPhone Stil

[mactie]

Einen wundervollen guten Morgen,

ich benötige eine Navigation für eine Website, die in gewisser Art und Weise optisch an das Dock des iPhones angelehnt ist, bedeutet:

• abgerundes Icon (als Grafik vorhanden)
• Beschreibungstext darunter (zentriert unter der Grafik)

Das ganze soll am Ende so ähnlich wie in der angehängten Datei aussehen, zusätzlich natürlich noch zentriert. Wie viele einzelne Menüpunkte es geben wird weiss ich jetzt noch nicht.

Es wäre sicherlich noch nett, wenn die Icons im Hover-State ausgetauscht werden würden oder so was in der Richtung.

Ich bin mir eigentlich ziemlich sicher, dass sich das mit CSS relativ leicht realisieren lässt, finde aber gerade nicht den richtigen Einstieg. Denkanstösse jeglicher Art sind daher herzlich willkommen! Danke.

 

[doger]

Frag Google mal nach "jquery menu" dort wirst Du bestimmt ein Beispiel finden das Dir weiterhilft.

//doger

 

[teqqy]

Wieso zum Teufel mit Java-Script lösen, wenn es mit CSS auch geht?

Du hast im CSS einfach die a.hover bzw. a.link Eintragungen mit denen du die Hover Effekte realisieren kannst.

Das beide zusammen zentriert und entsprechend ausgerichtet sind, würde mir jetzt spontan nur einfallen für jeden Navi-Button eine eigene div Klasse zu erstellen. Geht sicherlich auch einfacher, aber zumindest ohne Java-Scipt!

 

[doger]

Natürlich geht es auch ohne Java-Script!

Sei mir nicht bös, aber die schönen "smoothen" slides wie sie das iPhone hat wird man mit einem rollover wohl nicht so einfach hinbekommen.

//doger

 

[mactie]

So bin dran, und zwar momentan nur per CSS. Sieht schon mal ganz gut aus. Meld mich später wieder...

 

[Rupp]

Bau den link– und den hover–Effekt in eine Bilddatei (direkt untereinander, also anstatt 30x30px einfach 30x60px) und re–positioniere beim hover nur das Bild (von top nach bottom). Damit sparst du dir sinnlose "preload"–Skripte. Wenn du nichts dergleichen hast wird das hover–Bild immer erst beim hovern nachgeladen.