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.