Atraksiyon.NeT - css-sekmeli-menu

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>