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:: | 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: