CSS ile açıklamalı menü

  • 9.494
  • 16 Aralık 2007

Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.

Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.





Html Kodu:


<div id="menu">

  <ul>

    <li><a href="#">Anasayfa<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li>   

    <li><a href="#">Sanalkurs Forum<span>Forum Bölümümüzden Bilgi Paylaşım Yapabilirsiniz</span></a></li>

    <li><a href="#">Müzik<span>Müzik Bölümümüz Her Türlü Full Albüm</span></a></li>

    <li><a href="#">Video<span>Video İçeriği</span></a></li>

  </ul></div>



Css Kodu:


/* Menu Div CerveVe bicimi */

#menu {

    float:left;

    width:150px;

    }



/* Menu içindeki Liste EtiketLerini Bicimlendirme */

#menu li, #menu ul {

    padding:0px 0px 0px 0px;

    margin:0px 0px 0px 0px;

    list-style:none;

    text-align:left;

        }

/* Menu Liste içinDeki LinKleri Biçimlendirme */

#menu li a {

    padding:8px 0px 0px 20px;

    font-family:"Comic Sans MS";

    font-size:13px;

    text-decoration:none;

    color:#FFFFFF;

    background:url(buttona2.gif) no-repeat;

    width:130px;

    height:32px;

    display:block;

    }

/* Menu Liste içinDeki LinKleri Fare İmleci Üzerinde İken Biçimlendirme */

#menu li a:hover {

    background:url(buttonahover2.gif) no-repeat;

    font-size: 80%; /* IE5.x/Win duzeltmek icin  Desteklemeyen İE Serisini için Çözüm*/



    }

/* Menu Linkelere Eklenmiş Span Etiketi İçerğini İlk Sayfada Gizleme */

#menu li a span {

    display:none;

    }

/* Menu Linkelere Eklenmiş Span Etiketi İçerğini Fare Hareketi İle Gösterme */

#menu li a:hover span {

    display:block;

    position:absolute;

    top:auto;

    left:160px;

    background:#000066;

    font-family:"Comic Sans MS";

    border:solid #0033FF 1px;

    width:200px;

    }



CSS içine başlıklar koyarak açıkladım. Umarım işinize yarar.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bakarmısın zaten kimse bişi yazmamış bunu adam akıllı yap bak kise ziyaret etmiyor baştan savma yapmaa bunu
<html> <head> <title>Menu</title> </head> <style type="text/css"> CSS KODU </style> <body> HTML KODU </body> </html> Bu Şekilde Birleştirirsen Daha Kolay Anlayabilirsin
maalesef bişeye yaramıyor. ekran boş
yaaaavv anlamıyorum baştan savma yapıyor
Bu iş boş..
Gayet güzel çalıştı... ekran boş diyen arkadaş, yazının rengini değiş.
Resimleride Eklemeniz gerekmektedir.Yazılar beyaz olduğu için Ekranın boş görünmesi Doğal....
Kardeşim mesela arkaplana bir resim koy o zaman olacaktır.Ya da en basitinden sayfanın arkaplanını siyah yap
oguzhankanbay arkadasım.kodları alıp aynen sayfaya yapıstırmakla olmuyo bazı isler biraz oynamak gerekebiliyo.ve senin yaptıgın gibi direk olarak ders i yollayana patlıyacagına sorununu kibar bi sekilde dile getirmen daha mantıklı olurdu.yani millete sinirlenerek bisey elde edemezsin.hem bu arkadas bizim gibi bilmeyenlere biseyler ögretmeye calısıyor ve zorunlu yaptıgını söylemek zor.tamam belki biraz karısık olabilir ama bunu kibar bi dille acıklaman senin ve tüm ziyatercilerin yapması gerekndr
oguzhankanbay arkadasım.kodları alıp aynen sayfaya yapıstırmakla olmuyo bazı isler biraz oynamak gerekebiliyo.ve senin yaptıgın gibi direk olarak ders i yollayana patlıyacagına sorununu kibar bi sekilde dile getirmen daha mantıklı olurdu.yani millete sinirlenerek bisey elde edemezsin.hem bu arkadas bizim gibi bilmeyenlere biseyler ögretmeye calısıyor ve zorunlu yaptıgını söylemek zor.tamam belki biraz karısık olabilir ama bunu kibar bi dille acıklaman senin ve tüm ziyatercilerin yapması gerekndr
Güzel bir çalışma. Teşekkürler.. :kirp:
becerebildim :) valla süper :D çok saolun :kirp:
css yi öğrenmek ve kullanmaktan vazgeçsem site hazırlayıp yayınlayamazmıyım acaba?
guzel
saol eline konula sağlik güzzel anlatim
Harikasın. Ellerine sağlık tam istediğim gibi bişey...
arkadaşlar boş boş yorumlar yapmayın bu sitede ne varsa çalışıyor bazı arkadaşlar yinede anlatıyorlar buna nazaran gayet güzel emek var burada siz emek harcamıyorsunuz diye adamlar ne yapsın elinize sağlık güzel bir çalışma olmuş..

Yukarı Git