Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj02.07.2011, 20:37 (UTC)    
Mesaj konusu: Css Dikey Menü Yapımı !

Merhaba arkadaşlar. Şimdi sizlere Css Menü (Dikey) Yapmayı öğretmeye çalışacağım.

-1-

Öncelikle ' div ' ve 'html ' kodlarımızı oluşturuyoruz.

Kod:

<div class="menucuk">
   <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımda</a></li>
      <li><a href="#">İletişim</a></li>
      <li><a href="#">Ziyaretçi Defteri</a></li>
   </ul>
</div>





-2-

HTML kodumuzu oluşturduk. Şimdi Css kodlarına geçelim.

Kod:

<style>
.menucuk{
   width: 250px; /*Menü Genişliği*/
   height: auto; /* Yükseklik Otomatik (Değiştirmeyin)*/
   background: #f0eeee; /*Arkaplan Rengi*/
   border: 1px solid #cecece; /*1px kalınlığında düz çizgili(solid), #cecece renginde bir çerçeve*/
   float: left; /*Sola dayalı olacak.*/
   margin-bottom: 15px; /*Menünün altına birşey eklerseniz Menünün 15px altından boşluk bırakarak başlar*/
}

.menucuk ul {
   display: block; /*Kutucuklu olsun*/
   margin: 0px; /*Dıştan bırakılan boşluk*/
   padding: 0px;/*İçten bırakılan boşluk*/
}

.menucuk ul li {
   padding-left: 2px; /*Sol içten 2px boşlukla başlayacak.*/
   padding-top: 2px; /* Üst içten 2px boşlukla başlayacak*/
   padding-bottom: 2px; /*alt içten 2px boşlukla başlayacak*/
   list-style: none; /*Liste numaralandırması olmasın (Yuvarlak, kare vs.)*/
}

.menucuk ul li a {
   font-family: Arial, Helvetica, sans-serif; /*Linklerin yazı tipi*/
   font-size: 12px; /*Linklerin boyutu*/
   color: #3a3a3a; /* Link rengi*/
   background: url(http://img.webme.com/pic/m/mikro-blog/menu_icon.png) no-repeat center left; /*Arkaplan rengi ve resmi*/
   text-decoration: none; /*Yazının altındaki çizgiyi kaldırma*/
   display: block; /*kutucuk*/
   padding-left: 20px; /*Sol içten 20px boşluk*/
   padding-top: 8px; /*Üstten 8px boşluk*/
   padding-bottom: 8px; /*Alttan 8px boşluk*/
   font-weight: bold; /*Yazı kalın olacak*/
}
.menucuk ul li a:hover { /*Linkin üzerine gelince değişen renk, resim*/
   display: block; /*kutucuk*/
   background-color: #e9e8e8; /*arkaplan rengi*/
}
</style>




Yazdığımız Tüm Kodlar
Kod:

<style>
.menucuk{
   width: 250px; /*Menü Genişliği*/
   height: auto; /* Yükseklik Otomatik (Değiştirmeyin)*/
   background: #f0eeee; /*Arkaplan Rengi*/
   border: 1px solid #cecece; /*1px kalınlığında düz çizgili(solid), #cecece renginde bir çerçeve*/
   float: left; /*Sola dayalı olacak.*/
   margin-bottom: 15px; /*Menünün altına birşey eklerseniz Menünün 15px altından boşluk bırakarak başlar*/
}

.menucuk ul {
   display: block; /*Kutucuklu olsun*/
   margin: 0px; /*Dıştan bırakılan boşluk*/
   padding: 0px;/*İçten bırakılan boşluk*/
}

.menucuk ul li {
   padding-left: 2px; /*Sol içten 2px boşlukla başlayacak.*/
   padding-top: 2px; /* Üst içten 2px boşlukla başlayacak*/
   padding-bottom: 2px; /*alt içten 2px boşlukla başlayacak*/
   list-style: none; /*Liste numaralandırması olmasın (Yuvarlak, kare vs.)*/
}

.menucuk ul li a {
   font-family: Arial, Helvetica, sans-serif; /*Linklerin yazı tipi*/
   font-size: 12px; /*Linklerin boyutu*/
   color: #3a3a3a; /* Link rengi*/
   background: url(http://img.webme.com/pic/m/mikro-blog/menu_icon.png) no-repeat center left; /*Arkaplan rengi ve resmi*/
   text-decoration: none; /*Yazının altındaki çizgiyi kaldırma*/
   display: block; /*kutucuk*/
   padding-left: 20px; /*Sol içten 20px boşluk*/
   padding-top: 8px; /*Üstten 8px boşluk*/
   padding-bottom: 8px; /*Alttan 8px boşluk*/
   font-weight: bold; /*Yazı kalın olacak*/
}
.menucuk ul li a:hover { /*Linkin üzerine gelince değişen renk, resim*/
   display: block; /*kutucuk*/
   background-color: #e9e8e8; /*arkaplan rengi*/
}
</style>

<div class="menucuk">
   <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımda</a></li>
      <li><a href="#">İletişim</a></li>
      <li><a href="#">Ziyaretçi Defteri</a></li>
   </ul>
</div>



Acele ile yaptığım için biraz anlaşılmaz oldu galiba. Özür dilerim. Daha ayrıntılı dersini hazırlamaya çalışacağım.

CSS'de yazdığım tüm kodların açıklaması yanında arkadaşlar. Code lerin içine aldıgımdan pek belli değil ama.
Mesaj02.07.2011, 20:38 (UTC)    
Mesaj konusu:

Güzel paylaşım
______________
Mesaj02.07.2011, 20:39 (UTC)    
Mesaj konusu:

anlatım için teesekkurler.. Wink
Mesaj02.07.2011, 20:39 (UTC)    
Mesaj konusu:

anlatım için teesekkurler.. Wink
Mesaj02.07.2011, 21:17 (UTC)    
Mesaj konusu:

oyun-rehberin yazmış:
Güzel paylaşım


Teşekkürler Mr. Green
Mesaj02.07.2011, 21:18 (UTC)    
Mesaj konusu:

webssylonn yazmış:
anlatım için teesekkurler.. Wink


Ne demek Mr. Green
Mesaj02.07.2011, 21:55 (UTC)    
Mesaj konusu:

Teşekkürler.
Mesaj02.07.2011, 22:07 (UTC)    
Mesaj konusu:

Teşekkür ederiz... | mikro-blog
Mesaj03.07.2011, 05:13 (UTC)    
Mesaj konusu:

aykutservis-com yazmış:
Teşekkürler.


Birşey değil Mr. Green
Mesaj03.07.2011, 05:13 (UTC)    
Mesaj konusu:

photoshopic yazmış:
Teşekkür ederiz... | mikro-blog


Nedemek efendim. Görevimiz Mr. Green
Mesaj03.07.2011, 06:06 (UTC)    
Mesaj konusu:

Mikro-blog bu ne hız.Smile
Teşekkürler paylaşım için video çekip koysan daha açıklayıcı olurdu (html anlamayanlar için.)
Mesaj03.07.2011, 06:29 (UTC)    
Mesaj konusu:

aslannmedya yazmış:
Mikro-blog bu ne hız.Smile
Teşekkürler paylaşım için video çekip koysan daha açıklayıcı olurdu (html anlamayanlar için.)


Videolu anlatın düşünüyorum zaten. Yine de teşekkürler. Mr. Green
Mesaj03.07.2011, 06:36 (UTC)    
Mesaj konusu:

teşekkürler Rolling Eyes
______________
Büyük işler başaran, Küçük adam..
DREAMWEAVER İLE BEDAVA-SİTEM İÇİN TASARIM YAPMA // RESİMLİ ANLATIM
Mesaj03.07.2011, 06:40 (UTC)    
Mesaj konusu:

yusufberki yazmış:
teşekkürler Rolling Eyes


Birşey değil. Mr. Green
Mesaj04.08.2011, 19:52 (UTC)    
Mesaj konusu: teşekkürler

saolun gerçekten
Önceki mesajları göster:   


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