closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali MengŁ | Kişisel Web Sayfasi

CssMenuYapimi

Css Menu Nasıl Yapılır?

Arkadaslar bu dersimizde Css Menu Nasıl Yapılır onu göstericez.
Öncelikle Videomuzu İzleyin.Videoda Göstermeyi Unuttum.Code Bölümünden Kodunuzu Alabilirsiniz.

.....
Ali Mengü


<style type="text/css">
<!--
#ctmenu {
    height: 45px;
    width: auto;
}
#ctmenu ul {
    list-style-type: none;
    padding: 0px;
}
#ctmenu li {
    float: left;
}
#ctmenu a {
    display: block;
    background-image: url(https://img.webme.com/pic/c/ctmedia/ctmenu111.png);
    height: 32px;
    width: 128px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000000;
    padding-top: 13px;
}
#ctmenu a:hover {
    background-image: url(https://img.webme.com/pic/c/ctmedia/ctmenu222.png);
}
-->
</style>
<div id="ctmenu">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkimda</a></li>
    <li><a href="#">Z.Defteri</a></li>
    <li><a href="#">İletisim</a></li>
  </ul>
</div>

Kodlar
<style type="text/css">
<!--
#ctmenu2 {
    height: 44px;
    width: auto;
}
#ctmenu2 ul {
    list-style-type: none;
    padding: 0px;
}
#ctmenu2 li {
    float: left;
}
#ctmenu2 a {
    background-image: url(https://img.webme.com/pic/c/ctmedia/arkaplan2menu.png);
    height: 32px;
    width: 185px;
    display: block;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bolder;
    text-align: center;
    padding-top: 12px;
    font-size: 18px;
}
#ctmenu a:hover {
    background-image: url(https://img.webme.com/pic/c/ctmedia/arkaplan1menu.png);
}
-->
</style>
<div id="ctmenu2">
  <ul>
    <li><a href="#">Anasayfa </a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">Z.Defteri</a></li>
    <li><a href="#">İletisim</a></li>
  </ul>
</div>


Kodlari;
<style type="text/css">
<!--
#ctmenu3 {
    height: 46px;
    width: auto;
}
#ctmenu3 ul {
    list-style-type: none;
    padding: 0px;
}
#ctmenu3 li {
    float: left;
}
#ctmenu3 a {
    display: block;
    height: 33px;
    width: 177px;
    text-align: center;
    background-image: url(https://img.webme.com/pic/c/ctmedia/ctmedia1.png);
    padding-top: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000000;
}
#ctmenu3 a:hover {
    background-image: url(https://img.webme.com/pic/c/ctmedia/ctmedia2.png);
}
-->
</style>
<div id="ctmenu3">
<ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">CtMedia</a></li>
    <li><a href="#">CtMedia</a></li>
</ul>
</div>


<style type="text/css">
<!--
#turuncumenu {
    height: 40px;
}
#turuncumenu ul {
    padding: 0px;
    list-style-type: none;
}
#turuncumenu li {
    float: left;
}
#turuncumenu a {
    background-image: url(https://img.webme.com/pic/a/alimengu/menu1.png);
    height: 30px;
    width: 131px;
    display: block;
    font-family: Verdana;
    color: #666666;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 0px;
    margin-left: 2px;
}
#turuncumenu a:hover {
    background-image: url(https://img.webme.com/pic/a/alimengu/menu2.png);
}
-->
</style>
<div id="turuncumenu">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">Z.Defteri</a></li>
    <li><a href="#">İletisim</a></li>
  </ul>
</div>



Ben Örnek Olarak 4 adet menu yaptım.Tasariminiz Uygunsa

<li><a href="MenuLinki">Menu Adı</a></li>
 Kodunu Kullanarak İstediğiniz Kadar link oluşturabilirsiniz.




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::21.08.2011, 22:34 (UTC)
etkileyiciguzelsozler
etkileyiciguzelsozler
Kapalı

Guzel Anlatım. Teşekkürler

Yorumu gönderen::13.07.2011, 16:31 (UTC)
yusufberki
yusufberki
Kapalı

bunun açılıp kapanılanını nasıl yapıoz

Yorumu gönderen::10.07.2011, 17:53 (UTC)
08oyun
08oyun
Kapalı

güzel bir anlatım ve güzel menüler olmuş teşekkürler

Yorumu gönderen::16.04.2011, 16:53 (UTC)
alimengu
alimengu
Kapalı

rapclasmt2 => macromedia fazla kullanmadim fakat Aynı işlemler yapılacakdır.Sadece yerleri araçlarin yerleri değiştir.Ki Adobe serisini kullanminizi öneririm.

Yorumu gönderen::12.04.2011, 12:46 (UTC)
rapclasmt2
rapclasmt2
Kapalı

KARDEŞ MACROMEDİA YÜKLEME KOYARMISIN

Yorumu gönderen::01.04.2011, 14:01 (UTC)
teknokaplan
teknokaplan
Kapalı

güzel anlatım teşekkürler

Yorumu gönderen::22.03.2011, 17:45 (UTC)
sukru-dizayn
sukru-dizayn
Kapalı

Güzel :-

Yorumu gönderen::19.03.2011, 14:45 (UTC)
exporler
exporler
Kapalı

Başarılar! Şahsen Anlatımınızı Beğendim xD

Yorumu gönderen::18.03.2011, 12:58 (UTC)
veow
veow
Kapalı

Teşekkür Ederiz.Çok işime yaradı artık menü yapabiliyorum.



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugün toplam 21 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=