Forum'da ara:
Ara


Yazar Mesaj
Mesaj13.03.2010, 15:43 (UTC)    
Mesaj konusu: Css'de Dikey Açılır Menü Yapımı

Bu dersimizde sizlere CSS ile dikey açılır menü yapımını anlatmaya çalışacağım. Önceki dersimizde Dikey menü yapımını göstermiştik. Aynı menü üzerinden açılır olanını yapmaya çalışalım...

Öncelikle menülerimizi oluşturuyoruz normal bir şekilde. Alt menülerimizi de yapıyoruz. Açılır menümüzün olacağı ana menülerin sonununu </li> ile bitirmemeniz gerektiğini unutmayın!.. Aksi hâlde css'e geçtiğimiz zaman açılır menünüzü ana menü olarak görebilirsiniz.


Kod:
<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><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>
<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>




Kod:
ul {
padding:0;
margin:0;
list-style:none;
width:100px;
}




Açılır menümüzün özelliklerini verelim.

Kod:
li ul {
position: absolute;
left: 100px;
top: 0;
display: none;
}


Şimdi de gizlediğimiz menülerin pozisyonunu ve açılırlığını
sağlayalım...


Kod:
ul li {
position: relative;
}

li:hover ul {
display: block;
}




Şimdi de menümüzün rengi, kenarlıkları gibi ayarları yapalım:

Kod:
ul li a {
display:block;
text-decoration:none;
background-color:#FFFF00;
padding:3px;
border:solid 1px #000000;
border-bottom:0;
}




Son olarak da yazımızın rengini ayarlayalım.

Kod:
a {
color: #FFFFFF;
}







______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj13.03.2010, 16:05 (UTC)    
Mesaj konusu:

Çok Çok Teşekkür Ederim Gerçekten İşime Yaradı..
______________
Arrow Halen bir başlık açmadan evvel bölüm kurallarını okurum Smile
Arrow Sinirlenince çoooook güzel oluyorsun Türkiye!
Mesaj13.03.2010, 16:07 (UTC)    
Mesaj konusu:

Birde Bu Kodların Toparlanmış Halini Yazarsan İyi Olur.Yani Menünün Sol Halinin Kodunu..
______________
Arrow Halen bir başlık açmadan evvel bölüm kurallarını okurum Smile
Arrow Sinirlenince çoooook güzel oluyorsun Türkiye!
Mesaj13.03.2010, 16:10 (UTC)    
Mesaj konusu:

CSS Kodlarını css bölümüne eğer css tasarımı dışında kullanıyorsan;

Kod:

<style type="text/css">
Css kodları bunun içinde.
</style>


Sonra ise menü kodunu sitende bir yere yapıştıracaksın mesela anasayfaya Wink
______________

Lütfen Tıklayınız..!!
JooPlus İnternet Yazılımımız B-S'de Yeni Çağ açıcak...
Mesaj13.03.2010, 16:12 (UTC)    
Mesaj konusu:

yusufck18 yazmış:
Birde Bu Kodların Toparlanmış Halini Yazarsan İyi Olur.Yani Menünün Sol Halinin Kodunu..

En baştaki liste kodlarını menününüz gözükmesini istediğiniz yere koyacaksınız. Css kodlarını ise css bölümüne...
______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj13.03.2010, 16:12 (UTC)    
Mesaj konusu:

informess yazmış:
yusufck18 yazmış:
Birde Bu Kodların Toparlanmış Halini Yazarsan İyi Olur.Yani Menünün Sol Halinin Kodunu..

En baştaki liste kodlarını menününüz gözükmesini istediğiniz yere koyacaksınız. Css kodlarını ise css bölümüne...


Peki Teşekkür Ederim
______________
Arrow Halen bir başlık açmadan evvel bölüm kurallarını okurum Smile
Arrow Sinirlenince çoooook güzel oluyorsun Türkiye!
Mesaj13.03.2010, 16:14 (UTC)    
Mesaj konusu:

informess yazmış:
yusufck18 yazmış:
Birde Bu Kodların Toparlanmış Halini Yazarsan İyi Olur.Yani Menünün Sol Halinin Kodunu..

En baştaki liste kodlarını menününüz gözükmesini istediğiniz yere koyacaksınız. Css kodlarını ise css bölümüne...

Hatırlatma: Liste kodunuzda id'in adı menu yani id=menu css de #menu diye başlamalı.
______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj13.03.2010, 16:16 (UTC)    
Mesaj konusu:

Çok kaliteli paylaşım olmuş eline sağlık.
______________

Mesaj14.03.2010, 06:31 (UTC)    
Mesaj konusu:

Fatih Hayrioğlu sağolsun...
______________
Mesaj21.03.2010, 18:13 (UTC)    
Mesaj konusu:

blacktint yazmış:
Fatih Hayrioğlu sağolsun...

Anlatım o kişiy ait. Ama üzerinde baya bi edit var...
______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj24.03.2010, 21:55 (UTC)    
Mesaj konusu: üstmenü dikey açılır

sevgili kardeşim informes verdiğiniz kodu uyguladım ama benim istediğim kod aşağıda ismini vereceğim sitedeki gibi bir üst menü kodu alt kategorilerin açılışı yumuşak ve aynı zamanda hızlı bu nasıl yapılmış acaba bilginiz varsa paylaşırsanız sevinirim
http://mitoloji.info

evet bu sitenin üst menüsü nasıl yapılmış sizce yapabilir miyiz ?yani birinci alt kategoriden oklarla ikinci alt kategori açılıyor bunu ne ile yapmış olabilirler kod sistematiği ne olabilir şimdiden teşekürler
Mesaj04.04.2010, 21:24 (UTC)    
Mesaj konusu:

Paylaşımın İçin Teşekkürler.. Wink
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu