Yazar |
Mesaj |
-
informess
Uzman Üye
Konum: Istanbul
|
13.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." |
|
↑
|
|
|
-
yusufck18
Uzman Üye
Konum: Kütahya
|
13.03.2010, 16:05 (UTC) Mesaj konusu: |
|
|
|
|
↑
|
|
|
-
yusufck18
Uzman Üye
Konum: Kütahya
|
13.03.2010, 16:07 (UTC) Mesaj konusu: |
|
|
|
|
↑
|
|
|
-
mylet
Uzman Üye
Konum: İstanbul
|
13.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 ______________
Lütfen Tıklayınız..!!
JooPlus İnternet Yazılımımız B-S'de Yeni Çağ açıcak... |
|
↑
|
|
|
-
informess
Uzman Üye
Konum: Istanbul
|
13.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." |
|
↑
|
|
|
-
yusufck18
Uzman Üye
Konum: Kütahya
|
13.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 ______________ Halen bir başlık açmadan evvel bölüm kurallarını okurum
Sinirlenince çoooook güzel oluyorsun Türkiye! |
|
↑
|
|
|
-
informess
Uzman Üye
Konum: Istanbul
|
13.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." |
|
↑
|
|
|
-
yasaksavar
Bedava-Sitem Bağımlısı
|
13.03.2010, 16:16 (UTC) Mesaj konusu: |
|
|
Çok kaliteli paylaşım olmuş eline sağlık. ______________
|
|
↑
|
|
|
-
blacktint
Acemi Üye
|
14.03.2010, 06:31 (UTC) Mesaj konusu: |
|
|
Fatih Hayrioğlu sağolsun... ______________ |
|
↑
|
|
|
-
informess
Uzman Üye
Konum: Istanbul
|
21.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." |
|
↑
|
|
|
-
soyluedebiyat
Acemi Üye
|
24.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 |
|
↑
|
|
|
-
ibrahmgun
Uzman Üye
|
04.04.2010, 21:24 (UTC) Mesaj konusu: |
|
|
Paylaşımın İçin Teşekkürler.. |
|
↑
|
|
|
|