Forrás: http://www.hotdog.hu/magazin/magazin_article.hot?m_id=28583&a_id=467152&h_id=89288
Nagyon szép hatást lehet elérni csak a <div> HTML tag és egy kis CSS kód elegyével, demo is van, bal oldalt fent van a menü, annak az elkészítési módját fogom bemutatni, van két doboz és ha az 1ikre ráviszed az egeret akkor kinyílik a másik.
A dobozok nem működnek Internet Explorerben!
A működési elv az hogy a kódban az egyik doboz a másikban van és CSS kóddal van kipozícionálva, de ebbe inkább nem megyek bele, nem az a lényeg hogyan működik, hanem mit írj át a kódban:
<div id="menu_box1" class="menu_box" style="position: fixed; top: 184px; left: 3px; overflow: hidden;"><!-- HTML & CSS by srmark -->
<div class="menu_box" style="height: 30px; width: 130px; position: fixed; top: 131px; left: 3px; font-size: 30px; text-align: center; font-family: Courier New;">MENÜ</div>
<div style="padding: 3px; font-size: 16px; font-family: Courier New !important; text-align: center;">Ide jön a szöveg vagy a tartalom kódja, lehet kép vagy akármi más</div></div><!-- HTML & CSS by srmark -->
<style>
div.menu_box {border: 1px solid #AAAAAA; background-color: #F5F5F5; position: fixed;}
div.menu_box:hover {border: 1px solid #000000; background-color: #EEEEEE; z-index: 1 !important;}
#menu_box1 {height: 10px; width: 130px;}
#menu_box1:hover {width: 130px !important; height: 350px !important;}
</style>
Magyarázat részenként:
Piros: a tartalom doboz pozíciója pixelben, a pozícionálás úgy van beállítva hogy az oldal görgetése közben nem mozdul el a menü
Kék: a Menü felirat dobozának szélessége(width) és magassága(height), pozíciónálása (ugyanúgy mint az előzőnél), illetve a Menü szöveg taulajdonságai (betűméret betűtípus és középre igazítás)
Zöld: a tartalom dobozban lévő szövegek tulajdonságai
Narancssárga: A menü és tartalom doboz keret és háttérszíne alaphelyzetben, tehát amikor nincs rajta az egér
Lila: a menü és tartalom doboz keret és háttérszíne amikor rajta van az egér
Bordó: A tartalom doboz szélessége és magassága alaphelyzetben, tehát amikor nincs rajta az egér
Világoszöld: A tartalom doboz szélessége és magassága amikor rajta van az egér
Utolsó kommentek