Lenyíló menü

Ha kis helyre szeretnél sok szöveget listaszerűen tenni pl kedvenc zenéidet stb. akkor ajánlom ezt, az alap HTML select elem megdobva egy kis CSS-el:


Kattints! első második harmadik negyedik ötödik hatodik hetedik



Ha szeretnél ilyen menüt itt a kód:


<select id="selectem" style="width: 300px; height: 42px; border: 1px solid #FF5500; background-color: #221111;">
<option style="color: #FF0000; background-color: #330000;" selected="selected">Kattints!</option>
<option style="color: #FF6600; background-color: #331900;">első</option>
<option style="color: #DDFF00; background-color: #2D3300;">második</option>
<option style="color: #44FF11; background-color: #183306;">harmadik</option>
<option style="color: #22DDAA; background-color: #0B2F22;">negyedik</option>
<option style="color: #0066FF; background-color: #001533;">ötödik</option>
<option style="color: #5500AA; background-color: #150022;">hatodik</option>
<option style="color: #AA0099; background-color: #22001F;">hetedik</option>
</select>
<style>
select#selectem option {background-color: #221111; font-family: Comic Sans MS; height: 30px; text-align: center; padding-top: 3px; font-size: 18px;}
select#selectem {color: #FF5500; font-family: Comic Sans MS; margin-top: 3px; margin-left: 7px; text-align: center; padding: 2px; font-size: 25px;}
select#selectem:hover {color: #DD0000; font-family: Comic Sans MS;}</style><!-- HTML & CSS by srmark -->




Nem írom le egyesével hogy mi mit jelent, mert elég hosszú lenne, szerintem körülbelül érthető, csak a színkódokat kell átírni benne meg a betűtípust és a szöveg méretet, próbálkozz és menni fog!

Hozzá lehet adni linket is ehhez a következőt tegyük a kódba:
onClick="window.open('link')"

Ahhoz az option tag-hez tegyük amelyiken akarjuk a linket, a végeredmény ilyen legyen:

<option onClick="window.open('ide_jön_a_link')">szöveg</option>

A linkelés profilon nem működik!

Lehet olyat is csinálni hogy ne lehessen kijelöli egy elemet akkor így nézzen ki:

<option disabled="disabled">szöveg</option>