CSS Tab Menü Nasıl Yapılır / Editlenir ?
Şimdi bir adet menu.css adında bir CSS dosyası oluşturuyoruz ve aşağıdaki kodları içine yazıp kaydediyoruz.
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/sol.gif) repeat-x;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/orta.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/sag.gif) no-repeat right top;
}
Şimdi bu menu.css adındaki dosyamızı projemize dahil etmemiz gerekiyor.Bunun için <head> tagları arasına aşağıdaki kodu ekliyoruz
<link href="menu.css" rel="stylesheet" type="text/css" />
Şimdi "media" adında bir klasör oluşturuyoruz ve içine aşağıdaki 3 resmi kopyalıyoruz.İsimlerinide sırasıyla sol.gif, orta.gif ve sag.gif olarak kaydediyoruz.
sol orta sag
Css dosyamızıda projemize dahil ettikten sonra html kodlarımızı yazmaya başlayabiliriz.Menüyü nerede kullanacaksak aşağıdaki vermiş olduğum kodları oraya yapıştırın;
<ul class="glossymenu">
<li><a href="index.html"><b>Ana Sayfa</b></a></li>
<li><a href="css.html"><b>CSS</b></a></li>
<li><a href="forum.html"><b>Forum</b></a></li>
<li class="current"><a href="hakkimda.html"><b>Hakkımda</b></a></li>
<li><a href="iletisim.html"><b>İletişim</b></a></li>
</ul>
Evet arkadaşlar artık bir css tab menümüz var burada bir şeyi açıklamak istiyorum.Hakkımda kısmında class="current" i görüyorsunuz.Bunun anlamı hangi sayfada olduğunuzu gösterir.Şimdi siz iletisim.html sayfasını yapıyorsunuz diyelim ozaman hakkimda kısmından class="current" yazısını alıp iletisim kısmına yapıştırmanız gerekiyor.
Şimdide menümüzün renklerini beğenmediğimizi varsayıyoruz ve renkleri editliyoruz.Bunu yapmak için ben Photoshop'u kullanacağım.Yapmamız gerek şey çok basit.
İlk önce Photoshop u açıyoruz ve sol, orta ve sag.gif lerimizi photoshop un içine sürükleyip bırakıyoruz.Daha sonra Image > Adjustments > Hue / Saturation u açıyoruz ve aşağıdaki değerleri giriyoruz.
Bu işlemi 3 .gif için tekrarladıktan sonra artık menumuzun rengi siyah-gri tonlarında.Siz isterseniz Hue ayarlarıyla oynayarak daha farklı renklerde üretebilirsiniz.
Başka bir makalede görüşmek dileğiyle.
Subscribe