SahraForumDizini

Genel Forum Sitesi
 
AnasayfaAnasayfa  SSSSSS  AramaArama  Kayıt OlKayıt Ol  Giriş yap  
Sayfayı FaceBook'ta Paylaş

Paylaş | 
 

 Css3, Xhtml ve jQuery ile Yatay Açılır Menü Yapımı

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
avatar

<b>Mesaj Sayısı</b> Mesaj Sayısı : 428
<b>Tecrübe</b> Tecrübe : 1091
<b>Rep Puanı</b> Rep Puanı : 29
<b>Kayıt Tarihi</b> Kayıt Tarihi : 07/07/11
<b>Yaş</b> Yaş : 25
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

MesajKonu: Css3, Xhtml ve jQuery ile Yatay Açılır Menü Yapımı    C.tesi 9 Tem. - 21:11:53

Uzun bir aradan sonra yeniden merhabalar. Bu makalemizde Css ve Xhtml
ile klasik bir yatay açılır menü yapacak daha sonra bu menümüzü jQuery
ile biraz dinamik hale getireceğiz.
Menümüzü oluştururken Css3′ün bir takım özelliklerinden de
yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda
kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.
[Linkleri görebilmek için üye olun veya giriş yapın.] [Linkleri görebilmek için üye olun veya giriş yapın.]



XHTML

Kod:

[list]
[*][url=http://sahra.forumdizini.com/#]Reşat Nuri Güntekin[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Çalıkuşu[/url]
[*][url=http://sahra.forumdizini.com/#]Yaprak Dökümü[/url]
[*][url=http://sahra.forumdizini.com/#]Son Sığınak[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Halide Edip Adıvar[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Sinekli Bakkal[/url]
[*][url=http://sahra.forumdizini.com/#]Ateşten Gömlek[/url]
[*][url=http://sahra.forumdizini.com/#]Vurun Kahpeye[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Namık Kemal[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]İntibah[/url]
[*][url=http://sahra.forumdizini.com/#]Vatan Yahut Silistre[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Peyami Safa[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Dokuzuncu Hariciye Koğuşu[/url]
[*][url=http://sahra.forumdizini.com/#]Fatih - Harbiye[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Ömer Seyfettin[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Kaşağı[/url]
[*][url=http://sahra.forumdizini.com/#]Başını vermeyen şehit[/url]
[/list]
</li>



[/list]


CSS
Kod:
#menu {
font:14px arial, verdana, sans-serif;
width:720px
}

#menu ul {
list-style:none;
margin:0;
background:#3ca0df url(menubg.gif) repeat-x bottom; /* menü arkaplan resmimiz tanımlanıyor. */
padding:5px;

/* Firefox, Chrome, Safari tarayıcılar için Border radius ve Shadow tanımları yapılıyor */

-moz-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-moz-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-khtml-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-khtml-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-webkit-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-webkit-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */
}

#menu li { /* menümüzün liste tanımı yapılıyor. */
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}

#menu a {
color:#fff;
text-decoration:none;
padding:4px;
display:block;
text-shadow:0px 1px 2px #000;
margin:0px 10px 0px 10px;
}

#menu a:hover {
color:#fff;
text-decoration:none;
padding:4px;
background:#333;
-moz-border-radius:3px; /* menü bağlantılarımıza küçük bir gölge efekti veriyoruz. */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

/* Alt menülerimizi gizliyor ve sonrasında alt menünün stil tanımlamalarına geçiyoruz. */

#menu li ul {
display:none; /* Alt menülerimizi gizliyoruz! */
position:absolute;
padding:0px;
margin:0px;
}

#menu li:hover > ul {
display:block; /* Alt menülerimiz #menu li üzerine fare ile gelinince görünecek şekilde hover ile gösterimini sağlıyoruz. */
position:absolute;
padding:0px 0px 0px 0px; /* margin ve padding değerlerini uygun şekilde ayarlıyoruz. */
margin:0px 10px 0px 10px;
width:150px;
left:0
}

/* Alt menü görünümünü değiştirecek olan stilleri yazıyoruz. */

#menu ul ul {
-moz-border-radius:4px; /* alt menümüzün köşelerini yuvarlıyoruz. */
-webkit-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
-khtml-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
width:150px;
margin:0px 10px 0px 10px;
border:1px solid #777;
}

#menu ul ul li {
display:block;
float:none;
}

#menu ul ul a { /* alt menü listemizin linklerini tanımlıyoruz. */
display:block;
font:14px/20px arial, verdana, sans-serif;
margin:0;
background:#888;
border-bottom:1px solid #777
}

#menu ul ul a:hover {
background:#f5cd14;
color:#fff;
}
Sayfa başına dön Aşağa gitmek
http://sahra.forumdizini.com
 
Css3, Xhtml ve jQuery ile Yatay Açılır Menü Yapımı
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SahraForumDizini :: Webmaster :: CSS-
Buraya geçin: