Üye Panel
Kullanıcı Adı
Şifre
Reklam Panel
Aktif Bağlantılar
ATRaKSiYoN.NET


Atraksiyon.NeT

css-sekmeli-menu

Bu derste sekmeli bir menü yapacağız. Sitenizde çok iyi bir şekilde kullanabileceğiniz bir menü bu, hem de sadece CSS ile.

Başlamak için yeni bir HTML sayfası açın (Dreamweaver, Frontpage fark etmez). <head> tag'ları arasına aşağıdaki kodları yerleştirin.


<style type="text/css">
#tabs{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
font-weight:bold;
}
#tabs ul{
list-style:none;
margin:0;
padding:0;
}
#tabs ul li{
display:inline;
margin:0;
text-transform:capitalize;
}
#tabs ul li a{
padding:5px 16px;
color:#FFF;
background:#E7A272;
float:left;
text-decoration:none;
border:1px solid #D17B40;
border-left:0;
margin:0;
text-transform:capitalize;
}
#tabs ul li a:hover{
background:#EAEAEA;
color:#7F9298;
text-decoration:none;
border-bottom:1px solid #EAEAEA;
}
#tabs ul li a.active{
background:#EAEAEA;
color:#7F9298;
border-bottom:1px solid #EAEAEA;
}
#content{
background:#EAEAEA;
clear:both;
    font-size:11px;
color:#000;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
Bu kodlar sekmeli menümüzün stilini belirleyecektir. Kodlar listeleri kullanır ve her parça ayrı bir efekt oluşmasını sağlar.

Bu kodları kullanmak, menüyü oluşturmak için CSS uzmanı olmanıza gerek yok.

Kodları ekledikten sonra "tabs" ismi ile bir div oluşturun, içine linklerinizi listeleyin. Benim yaptığım kodları aşağıdaki gibidir:

<div id='tabs'>
<ul>
<li><a href='#'>Ana Sayfa</a></li>
<li><a href='#'>Forumlar</a></li>
<li><a href='#' class='active'>Dersler</a></li>
<li><a href='#'>Downloadlar</a></li>
<li><a href='#'>Linkler</a></li>
</ul>
</div>
<div id='content'>İçeriğinizi buraya yazabilirsiniz.</div>


Copyright 2011 Atraksiyon.Net Tüm Haklar Saklıdır.
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=