| Autor | Zpráva | ||
|---|---|---|---|
| fijko Profil |
#1 · Zasláno: 13. 4. 2011, 22:13:34
Chcem spraviť horizontálne menu pomocou zoznamov. Chcem, aby bol v záhlaví obrázok, pri prejdení myši sa zmení a pri vybraní danej sekcie ostane. (teda tri obrázky mám pripravené)
Skúšal som to takto, ale nejde mi .selected :( CSS: /* CSS Dokument */ body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: white; background-color: black; } a:hover { text-decoration: none; } p { text-indent: 25px; margin: 0 0 14px 0; text-align: justify; } ul { display: table; margin: 0 auto; list-style-type: none; } li { float: left; list-style-type: none; } .menu ul li a { width: 135px; height: 25px; display: table; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: white; text-align: center; text-decoration: none; background: url(data/button_menu.png) no-repeat top; } .menu ul li a:hover { background: url(data/button_menu.png) no-repeat center; } .menu ul li a.selected { background: url(data/button_menu.png) no-repeat bottom; } HTML: <body> <div class="menu"> <ul> <li><a href="#" title="Domov">Menu1</a></li> <li><a href="#" title="Domov">Menu2</a></li> <li><a href="#" title="Domov">Menu3</a></li> <li><a href="#" title="Domov">Menu4</a></li> <li><a href="#" title="Domov">Menu5</a></li> <li><a href="#" title="Domov">Menu6</a></li> </ul> </div> </body> V čom je chyba? PS: Toto je moje prvé menu cez CSS, takže buďte zhovievaví prosím. :D |
||
| Bubák Profil |
#2 · Zasláno: 13. 4. 2011, 23:29:26
Nikde v HTML nevidím třídu "selected".
|
||
| fijko Profil |
#3 · Zasláno: 14. 4. 2011, 08:02:03
A ako by sa dalo spraviť, aby sa class="selected" pridával vždy po kliknutí na daný odkaz? Ak ho mám napríklad na Menu2 v <li> zapísaný a chcel by som po kliknutí na Menu3, aby sa z Menu2 odstránil a aby prešiel na Menu3.
Čím by sa to dalo spraviť a ako? Dá sa to cez CSS alebo treba použiť javascript nejaký či je aj iný spôsob? |
||
| Bubák Profil |
#4 · Zasláno: 14. 4. 2011, 12:57:28
fijko:
„Dá sa to cez CSS alebo treba použiť javascript nejaký či je aj iný spôsob?“ Přes CSS a ni pomocí CSS to nejde. Jde to ručně, při šesti položkách menu to není problém, ale je to komplikace u složitých menu. Jde to JavaScriptem (moc nedoporučuji), nebo v PHP. Dotaz se objevuje často, odpověď si zkus dohledat. „teda tri obrázky mám pripravené“ Chtěl jsem doporučit tři obrázky v jedmom, ale soudě podle tvého kódu takový obrázek už máš připravený. Tip: pro hover a selected nemusíš deklarovat "background", ale jenom změněnou "background-position" .menu ul li a:hover {
background-position: center;
}
.menu ul li a.selected {
background-position: bottom;
}Zápis je kratší a podle mne i přehlednější. Ale pozor, používej ten zápis, který tobě více vyhovuje, protože ty s tím CSS budeš pracovat. |
||
| fijko Profil |
#5 · Zasláno: 14. 4. 2011, 16:28:39
Vďaka za tvoj čas. Budem používať ten zápis. Príde mi lepší, máš pravdu. Btw, mohol by som sa ešte spýtať ako by som to spravil cez PHP, aby som nemusel na každom webe zapisovať nanovo CLASS?
Chcem to spraviť tak, aby to menu vlastne odkazovalo na IFRAME, takže to pôjde všetko cez jeden web vlastne a iframe sa bude len vkladať. Keby si mi tu dal aj príklad na PHP a aj na javascript, ak by som ťa o to ešte mohol požiadať. Vopred pekne ďakujem za pomoc. :) |
||
|
Časová prodleva: 13 let
|
|||
0