Menu – HTML / XHTML – Fórum – Programujte.com

Ahoj všem. Potřeboval bych poradit s jedním problémem. Chtěl bych vytvořit menu jako je to na obrázku níže ale aby to bylo poskládané s buttonů (tlačítek) a nastavit na nich aby se rozvítili při najetí. Ale nevím jak udělat buttony jako menu aby byl každý obrázek vzlášť a vždy se ukázal druhý rozsvícený. Aby to bylo třeba 6 obrázků které by byli těsně vedle sebe a fungovali by jako menu. Poradil by mi někdo prosím. Moc díky

Připojen obrázek.

To uděláš pomocí CSS. To tlačítko je odkaz, který má šířku a výšku. Pro najetí na odkaz stačí do CSS napsat a:hover
V tomto případě to vypadá jako blok s černým pozadím, v něm umístěné odkazy s výškou a šířkou + obrázkem na pozadí, ten se opakuje v ose X. Mezery mezi tlačítky se udělají pomocí marginu.

Doufám že to takhle stačí ;-)
 

#2 Kowalsky95
Ale já bych to chtěl jako obrázek už s textem ve vnitř jen jako odkaz. Trošku jsem to nepochopil ale to jak se to rozsvítí umím ale nevím jak to dát do kódu (např index.php). Pozici a to si nastavit umím ale neumim udělat menu jako 6 obrázků vedle sebe. Funguje to asi jenom jako obrázek na kterém je odkaz takže takhle né ?? 

 <a href="adresa např kontakt.html"><img src="misto kde je obrazek"/></a>

Pak už to jen nakódovat aby to bylo vedle sebe přes CSS ? A rozsvícen taky?

Píšu to správně ?? Jde to takhle jako menu ??

Pokud to jde i jinak než přes < img src.... tak prosím pište nebo prosím kde dělám chybu.

#3 KiRoS
Dá ale je to celkem neprofesionální. Uživatel bude muset zbytečně stahovat obrázky a máš tam potom větší objem dat. Nebo potom kdyžtak můžeš využít javascript a jen k img přihodit onClick událost.

#4 Kowalsky95

No ano je to neprofesionální tak mi poraď jak to udělat profesionálně.

#5 KiRoS
Máš to napsané výš. Pro odkaz aplikovat jen nějaký malý obrázek, dát mu repeat-x. Poté na a:hover tento obrázek změnit. často se taky dává obsah do nečíslovaného seznamu.

V dnešní době nabízí CSS spoustu krásných věcí. Takže jak psal Kowalsky: nedělej to menu obrázkově, ale textově (už jen kvůli použitelnosti, vyhledávačům a vůbec   ). Odkazy dej jen jako <a> vedle sebe nebo do toho nečíslovaného seznamu. V CSS jim pak nastav rozměry,  background (proužek, který se bude opakovat) a :hover efekt.

Pro příklad: 

<a href="">lorem</a>
<a href="">ipsum</a>
<a href="">dolor</a>

CSS:
a{width: 100px;height: 20px;display: inline-block;text-align: center;background: url(pozadi.png) left top repeat-x;}

#7 Flu
Ano udělám to tak ale pokud to dám jako <a> tak když to použiju někde jinde tak se to bude křížit. JInak díky za radu. 

#9 Kowalsky95
Moc díky za radu 

#8 KiRoS
Jasně, to byl narychlo splácanej příklad :) Dej si tam Idčko, třídu, cokoliv