form { background: url(http://img16.imageshack.us/img16/894/yorumkis.gif) no-repeat ; padding: 1px; border: 1px dashed red; margin-right: 1px} //-->
ѕιтємιzιη ν2 тαѕαяıмı ιçιη ¢ѕѕнσѕт α тєşєккüяℓєя...

Css|Html|iceblue|red|butterfly|fblm|kod|dersleri|oyunlar|

yataymenuyapimiders


Şimdiki dersimizde CSS ile yatay açılır menü yapımını anlatmaya çalışacağım. Umarım başarılı olabilirim. Dersin sıkıcı olmaması için biraz da görsellik katacağım. Hep anlatırken, hem de görsel olarak Dreamweaver 8'i yardımcım olarak görevlendiriyorum

Öncelikle normal bir şekilde menümüzü oluşturalım.

<ul id="menu">
 <li><a href="#">Anasayfa</a></li>
 <li><a href="#">Hakkımızda</a>
 <ul>
 <li><a href="#">Şirketimizin Tarihi</a></li>
 <li><a href="#">Yöneticilerimiz</a></li>
 <li><a href="#">Çalışanlarımız</a></li>
 <li><a href="#">Faaliyetlerimiz</a></li>
 </ul>
 </li>
 <li><a href="#">Referanslarımız</a>
 <ul> 
 <li><a href="#">Deneyimlerimiz</a></li>
 <li><a href="#">Ne dediler?</a></li>
 </ul>
 <li><a href="#">Hizmetlerimiz</a></li>
 <ul> 
 <li><a href="#">Web Tasarım</a></li>
 <li><a href="#">Hosting</a></li>
 <li><a href="#">Logo Tasarım</a></li>
 <li><a href="#">Danışmanlık Hizmetimiz</a></li>
 <li><a href="#">Diğer Hizmetler</a></li>
 </ul>
 </ul>


http://resim.sanalkurs.net/uploads/1_454.jpg

Gördüğünüz gibi 4 tane ana menü ve akabinde alt menülerini oluşturduk. Şimdi Css ile bunu açılır menü hâline getireceğiz.

Ben bu anlatımda css'i ayrı bir dosya ile sayfaya çağıydım. Ama siz sayfaının head'ine de yerleştirebilirsiniz css'i.

Css'imize aşağıdaki kodu yazıyoruz.

ul#menu li {
 float:left;
 position:relative;
 width:150px;
 }



http://resim.sanalkurs.net/uploads/2_386.jpg

Bu kod id'si "menu" olarak verilen yazıların maddeleri hakkında düzeltmedir.

Float ile menümüzün durumunu belirliyoruz. Left yaptık ve anasayfa sol tarafta yerini aldı. Right yapsaydık anasayfa en sağda olacaktı ve devamındakiler sağdan sola doğru hizalanacaktı. Position ile menünün durumunu belirliyoruz ve bildiğiniz gibi width ile de menümüzün genişliğini belirliyoruz.

Menümüzü ilk oluşturduğumuz zaman oluşan menülerin başında işaretleri kaldıralım.


ul#menu, ul#menu ul {
 list-style:none;
 margin:0;
 padding:0;
 }


http://resim.sanalkurs.net/uploads/3_325.jpg

Bu şekilde menülerimizin başındaki işaretleri de kaldırmış olduk.


ul#menu li ul {
 display:none;
 position:absolute;
 top: 19px; 
 left: 0;
 }


Display ve position sayesinde açılır olan menümüzü gizlemiş oluyoruz. Bu koddan itibaren alt menüleri göremez hâlde olursunuz.

ul#menu li:hover ul { 
 display:block;
 }


Bu kodu da eklediğimiz zaman mouse'u hangi menünün üzerine getirirsek o menü açılacaktır. Yani işlemimiz bitti.

ul#menu li a {
 font: bold 11px Verdana, Helvetica, sans-serif;
 display: block;
 border-width:1px;
 border-style:double;
 border-color:#000000;
 margin:0;
 padding:2px;
 color:#FFFFFF;
 background:#666666;
 text-decoration:none;
 }


Son olarak menümüzün arkaplanını, altında çizgi olmaması gibi bazı özelliklerimizi ayarladıktan sonra menümüz tamamlanmıştır. İstediğimiz sayfaya yerleştirebiliriz.

http://resim.sanalkurs.net/uploads/4_270.jpg

http://resim.sanalkurs.net/uploads/5_226.jpg

http://resim.sanalkurs.net/uploads/6_177.jpg

http://resim.sanalkurs.net/uploads/7_133.jpg

Kolay gelsin...




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::30.08.2010, 16:42 (UTC)
muzikkutun
muzikkutun
Kapalı

anlatım süperdi xd



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

ßugün Galiba 10626 ziyaretçi (18840 klik) kişi burdaydı!
Copyright © 2010 Design By KaoS
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=