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



Lenyíló menü

2009.05.23. 17:41 :: hkriszta

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:

 

Lenyíló doboz fejléce
Lenyíló doboz tartalma
Lenyíló doboz tartalma
Lenyíló doboz tartalma




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:

Lenyíló doboz fejléce
Lenyíló doboz tartalma
Lenyíló doboz tartalma
Lenyíló doboz tartalma



 

 

2 komment

Címkék: vegyes kódok

A bejegyzés trackback címe:

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

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.

Csimbi88 · http://csimbi88.blog.hu 2011.01.04. 20:11:15

Nekem a linkelés valamiért nem akar összejönni
süti beállítások módosítása