Menu – HTML / XHTML – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
KiRoS
~ Redaktor
0
Newbie
23. 8. 2013   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 88.101.23.–
Reklama
Reklama
Kowalsky950
Stálý člen
23. 8. 2013   #2
-
0
-

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čí ;-)
 

Nahlásit jako SPAM
IP: 90.176.114.–
KiRoS
~ Redaktor
0
Newbie
23. 8. 2013   #3
-
0
-

#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.

Nahlásit jako SPAM
IP: 88.101.23.–
Kowalsky950
Stálý člen
23. 8. 2013   #4
-
0
-

#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.

Nahlásit jako SPAM
IP: 90.176.114.–
KiRoS
~ Redaktor
0
Newbie
23. 8. 2013   #5
-
0
-

#4 Kowalsky95

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


Nahlásit jako SPAM
IP: 88.101.23.–
Kowalsky950
Stálý člen
23. 8. 2013   #6
-
0
-

#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.

Nahlásit jako SPAM
IP: 90.176.114.–
Flu0
Návštěvník
23. 8. 2013   #7
-
0
-

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;}
Nahlásit jako SPAM
IP: 77.48.21.–
KiRoS
~ Redaktor
0
Newbie
23. 8. 2013   #8
-
0
-

#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. 

Nahlásit jako SPAM
IP: 88.101.23.–
Řešení
Kowalsky950
Stálý člen
23. 8. 2013   #9
-
0
-
Vyřešeno Nejlepší odpověď

#8 KiRoS
odkazy dáš např do divu kterému nastavíš id
 

<style>
#menu>a 
{ 
	background-color: black; 
}
</style>
<div id="menu">
	<a>Odkaz1</a>
	<a>Odkaz2</a>
</div>


popřípadě mě teď napadá tag nav. Potom si tam už jen narůbeš vlastnosti ;-)

Nahlásit jako SPAM
IP: 90.176.114.–
KiRoS
~ Redaktor
0
Newbie
23. 8. 2013   #10
-
0
-

#9 Kowalsky95
Moc díky za radu 

Nahlásit jako SPAM
IP: 88.101.23.–
Flu0
Návštěvník
23. 8. 2013   #11
-
0
-

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

Nahlásit jako SPAM
IP: 77.48.21.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

Podobná vlákna

Menu — založil dinkin

MENU — založil Anonymní uživatel

Menu — založil Eddie

Menu — založil Peťan

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý