CSS ile Yapılan 14 Genis Menü sunuyorum
Menu Demolar: http://exploding-boy.com/images/cssmenus/menus.html
Menu Download: http://exploding-boy.com/images/CSSmenus.zip
Kullanımı
[hr]
- 1- indirdigiz dosya icindeki CSS kodlarini inceliyoruz
2- örnek tabs-
3- tableft.gif ve tabright.gif'i yaptigimiz html dosyasinda ayni klasörde tutuyoruz
Bu css kodunu headerde <head> kodunun önüne ekleyiniz.
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
</style>[/syntax]
- Sonra Body Altina bu kodu ekliyoruz < a href="#1" de bul #1 istedigin linki ekle
sonra Bul >Link 1</a> icinde bul Link 1 istedigin ile degistir bu yaziya tiklandiginda verdiginiz linke yönlendirir. aciklama icin bul title="Link 1"> icinde bul Link 1 yönlenecegi link hakkinda yazi yazabilirsiniz, sorulariniz varsa bekleriz .
<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
[/syntax]
Düzenleyen: Emexci
Tasarim CSS Tamamen: - http://www.exploding-boy.com