Az oldalról

Kódok, leírások gyűjteménye, amelyeket magáncélra, saját oldalaim fejlesztéséhez összegyűjtöttem.

Kódok próbája

Utolsó kommentek

  • Járgányharcosok: Szent Korona Őrzői (Guardians Of The Korony) 2017.10.19. 19:32 A kapitánysági mocskok szimplán sz... (2017.11.06. 12:10) Menük, modulok háttere /GPORTAL
  • Járgányharcosok: Szent Blackopscel 2017.10.19. 12:27 Te aranyszobor fogdosó köcsög! Már megint te vagy a legutolsó... (2017.11.06. 12:10) Menük, modulok háttere /GPORTAL
  • Járgányharcosok: Arhitektúra Kritikúra 2017.09.22. 18:23:39 Azt a rendőrörsöt állítólag a híres zsidó meleg építés... (2017.11.06. 12:09) Menük, modulok háttere /GPORTAL
  • Járgányharcosok: Szent Korona Őrzői (Guardians Of The Korony) 2017.10.03. 11:12:33 Szerintem is eléggé háttérbe sz... (2017.11.06. 12:08) Menük, modulok háttere /GPORTAL
  • Járgányharcosok: Hahóka! Beláthattyátok ti gagyik, hogy vesztesek vagytok ellenünk! Ja, és a Mulnár görény amint tu... (2017.11.06. 12:07) Menük, modulok háttere /GPORTAL
  • Utolsó 20

Számlálók

free web counter



Egérrávitelre elmozduló dobozok

2009.05.23. 17:45 :: hkriszta

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

Szólj hozzá!

Címkék: vegyes kódok

A bejegyzés trackback címe:

https://kodok.blog.hu/api/trackback/id/tr601139429

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.