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.

---

<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 Kapalı Guzel Anlatım. Teşekkürler Yorumu gönderen:: 13.07.2011, 16:31 (UTC) yusufberki Kapalı bunun açılıp kapanılanını nasıl yapıoz Yorumu gönderen:: 10.07.2011, 17:53 (UTC) 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 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 Kapalı KARDEŞ MACROMEDİA YÜKLEME KOYARMISIN Yorumu gönderen:: 01.04.2011, 14:01 (UTC) (locked user) güzel anlatım teşekkürler Yorumu gönderen:: 22.03.2011, 17:45 (UTC) sukru-dizayn Kapalı Güzel :- Yorumu gönderen:: 19.03.2011, 14:45 (UTC) (locked user) Başarılar! Şahsen Anlatımınızı Beğendim xD Yorumu gönderen:: 18.03.2011, 12:58 (UTC) veow Kapalı Teşekkür Ederiz.Çok işime yaradı artık menü yapabiliyorum.

Bu sayfa hakkında yorum ekle:

İsminiz:
Mesajın: