Drop2Menu

Biraz zor bir anlatım.Anlamaya çalışın lütfen.
Arkadaşlar şimdi sizlere resimin üzerine geldiğinde açılan yani drop resimli menü yapımını anlatacağız.
>>Önce 128x128 boyutlarında 7 tane resim yapın.Bu resimler arkaplanınıza uygun olsun veya transparent olsun.
Mesela arkaplanımız siyah olsun şöyle bi resimler yapalım:
http://img54.xooimage.com/files/4/f/e/anasayyfa-24f731b.gif
http://img50.xooimage.com/files/4/4/9/computer-24f730d.gif
http://img62.xooimage.com/files/7/3/b/eglencee-24f7337.gif
http://img62.xooimage.com/files/9/0/5/exctra-24f7377.gif
http://img63.xooimage.com/files/0/2/7/sciencekultur-24f73c8.gif
http://img53.xooimage.com/files/7/2/8/webbmaster-24f73da.gif
http://img64.xooimage.com/files/7/b/d/webdessign-24f73e0.gif


Önizleme: http://wwebw.clanteam.com/KodlarResimler/yapaymenu.htm

KOD ŞÖYLE:
<!--WwebW-->
<div align="left">
<table height="130" cellspacing="0" cellpadding="0" border="0" align="left" width="851" style="width: 851px; height: 130px;">
    <tbody>
        <tr>
            <td align="left" valign="top">
            <link href="http://img50.xooimage.com/files/d/1/2/drop-24f7a2c.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://www.roosle.com/files/download/93916/chromee.java"></script><style type="text/css">

<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
    font-size: 13px;
    color: #FFFF00;
}
-->
            </style>
            <div class="chromestyle" id="chromemenu">
            <div align="left"><center>
            <table cellspacing="1" cellpadding="1" border="0" width="851" style="width: 851px; height: 130px;">
                <tbody>
                    <tr>
                        <td align="left" valign="top"><a href="LİNK 1"><img height="128" border="0" width="128" class=" " alt="RESİM YAZISI" src="http://img54.xooimage.com/files/4/f/e/anasayyfa-24f731b.gif" /></a></td>
                        <td align="left" valign="top"><a target="_self" rel="dropmenu1" href="LİNK 2"><img height="128" border="0" width="128" alt="RESİM YAZISI" src="http://img50.xooimage.com/files/4/4/9/computer-24f730d.gif" /></a></td>
                        <td align="left" valign="top"><a rel="dropmenu2" href="LİNK 3"><img height="128" border="0" width="128" alt="RESİM YAZISI" src="http://img62.xooimage.com/files/7/3/b/eglencee-24f7337.gif" /></a></td>
                        <td align="left" valign="top"><a href="LİNK 4"><img height="128" border="0" width="128" alt="RESİM YAZISI" src="http://img62.xooimage.com/files/9/0/5/exctra-24f7377.gif" /></a></td>
                        <td align="left" valign="top"><a href="LİNK 5"><img height="128" border="0" width="128" alt="RESİM YAZISI" src="http://img63.xooimage.com/files/0/2/7/sciencekultur-24f73c8.gif" /></a></td>
                        <td align="left" valign="top"><a rel="dropmenu4" href="LİNK 6"><img height="128" border="0" width="128" alt="RESİM YAZISI" src="http://img53.xooimage.com/files/7/2/8/webbmaster-24f73da.gif" /></a></td>
                        <td align="left" valign="top"><a rel="dropmenu3" href="LİNK 7"><img height="128" border="0" width="128" class=" " alt="RESİM YAZISI" src="http://img64.xooimage.com/files/7/b/d/webdessign-24f73e0.gif" /></a></td>
                    </tr>
                </tbody>
            </table>
            </center></div>
            <ul class="style1 style2">
                <li>
                <div align="left">&nbsp;</div>
                </li>
            </ul>
            </div>
            <!--&#8212;WwebW -->   <!--1st drop down menu -->
            <div class="dropmenudiv" id="dropmenu1" style="left: 448px; visibility: hidden; clip: rect(0pt, auto, 185px, 0pt); top: 338px;"><a href="LİNK 1">LİNK ADI</a>  <a href=" LİNK 2">LİNK ADI </a> <a href=" LİNK 3">LİNK ADI</a> <a href=" LİNK 4">LİNK ADI</a>   <a href=" LİNK 5">LİNK ADI</a> <a href=" LİNK 6">LİNK ADI</a></div>
            <!--2nd drop down menu -->
            <div class="dropmenudiv" id="dropmenu2" style="left: 514px; visibility: hidden; clip: rect(0pt, auto, 185px, 0pt); top: 338px;"><a href=" LİNK 1">LİNK ADI</a>  <a href=" LİNK 2">LİNK ADI</a> <a href=" LİNK 3">LİNK ADI</a> <a href=" LİNK 4">LİNK ADI</a> <a href=" LİNK 5">LİNK ADI</a>  <a href=" LİNK 6">LİNK ADI</a> <a link="" href="">LİNK ADI</a></div>
            <!--3st drop down menu -->
            <div class="dropmenudiv" id="dropmenu4"><a href=" LİNK 1">LİNK ADI</a>   <a href=" LİNK 2">LİNK ADI</a>  <a href=" LİNK 3">LİNK ADI</a> <a href=" LİNK 4">LİNK ADI</a> <a href=" LİNK 5">LİNK ADI</a> <a href=" LİNK 6">LİNK ADI</a></div>
            <!--4st drohttp://www.bedava-sitem.com/editpage.php#topp down menu -->
            <div class="dropmenudiv" id="dropmenu3"><a href=" LİNK 1">LİNK ADI</a> <a href=" LİNK 2">LİNK ADI</a> <a href=" LİNK 3">LİNK ADI</a> <a href=" LİNK 4">LİNK ADI</a></div>
            <script type="text/javascript">
cssdropdown.startchrome("chromemenu", "chromemenu2")
</script></td>
        </tr>
    </tbody>
</table>
</div><!--WwebW-->
                       


Yukarıdaki css ve resim dosyalarını kendinize göre ayarlarsanız süper bir drop menüye sizde sahip olabilirsiniz.
Menünün arkaplan rengini sitenize göre uygulayınız.





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: Andre, 29.10.2012, 06:52 (UTC):
Deep thniikng - adds a new dimension to it all.

Yorumu gönderen::23.06.2011, 14:53 (UTC)
exporler
exporler
Kapalı

Hmm Güzel Hackerfriendin Kullandığı Menüye Benziyo

Yorumu gönderen::30.05.2011, 15:38 (UTC)
fr-transformice
fr-transformice
Kapalı

Süper ..

Yorumu gönderen: Honney, 25.05.2011, 14:40 (UTC):
AFAICT you've coveerd all the bases with this answer!

Yorumu gönderen::19.05.2011, 07:13 (UTC)
wwebw
wwebw
Kapalı

Teşekkürler.

Yorumu gönderen::11.02.2011, 16:56 (UTC)
cmpunkn
cmpunkn
Kapalı

Güzel...



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=