Forrás: http://www.hotdog.hu/magazin/magazin_article.hot?m_id=28583&a_id=465305&h_id=89288
| 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 --> 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> Lehet olyat is csinálni hogy ne lehessen kijelöli egy elemet akkor így nézzen ki: <option disabled="disabled">szöveg</option> |
Amit ebben a cikkben találsz az egy doboz ami egérrávitelre lenyílik:
A kód nem működik IE-ben! |
| A kód működése röviden: van egy div doboz aminek adott magassága van és a :hover pszeudo osztállyal egérrávitelre a magasság megváltozik. Nos a kód: <div id="lenyilo_doboz" style="overflow: hidden; position: absolute; border: 1px solid #FF5500; background: #220000 url(); color: #FF4400; font-family: Comic Sans MS; cursor: default;"><!-- HTML & CSS by srmark --> <div style="font-size: 18px; padding-left: 3px;">Lenyíló doboz fejléce<span style="font-size: 18px !important; position: absolute; top: 0px; right: 2px;">▼</span></div> <div style="font-size: 16px; position: absolute; top: 30px; padding-left: 3px;">Lenyíló doboz tartalma<br>Lenyíló doboz tartalma<br>Lenyíló doboz tartalma<br></div></div><!-- HTML & CSS by srmark --> <style type="text/css" rel="stylesheet"> #lenyilo_doboz {height: 25px; width: 300px;} #lenyilo_doboz:hover {height: 200px; width: 300px;} </style> <!--[if IE]><style type="text/css" rel="stylesheet"> #lenyilo_doboz {display: none;} </style><![endif]--> Ennek a kódnak az eredménye felül látható! A magyarázást a kód tetejétől kezdem: border: 1px solid #FF5500; Keret background: #220000 url(); Háttér szín és ha kell kép color: #FF4400; Szövegszín font-family: Comic Sans MS; Betűtípus Bordó színű rész: fejlécének tulajdonságai: font-size: 18px; Betűméret padding-left: 3px; A szöveg távolsága a bal oldaltól Sötétkék rész: a doboz tartalmának tulajdonságai, ugyanazok mint a fejlécnél. Zöld rész tulajdonságai: az egész dobozra vonatkozó tulajdonságok: #lenyilo_doboz {height: 25px; width: 300px;} a doboz szélessége és magassága #lenyilo_doboz:hover {height: 200px; width: 300px;} a doboz szélessége és magassága amikor rajta van az egér Mégegy változatot írtam amiben marquee-s futó szöveg van, ehhez az eredeti kód sötétkék részében lévő szöveget kell cserélni erre a kódra: <marquee style="margin: 3px; border: 0px; background: transaprent none; font-size: 16px; font-family: Comic Sans MS; width: 100%; height: 100%;" direction="left" scrolldelay="1" scrollamount="4">Lenyíló doboz tartalma<br>Lenyíló doboz tartalma<br>Lenyíló doboz tartalma<br></marquee> Ennek az eredménye ez lesz: |
Utolsó kommentek