forumdll.benimforum.biz


 
AnasayfaPortalAramaKayıt OlGiriş yap

Paylaş | 
 

 CSS Tab Menü Nasıl Yapılır / Editlenir ?

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
Cansiperane
Admin
Admin


Erkek
Kova Horoz
Mesaj Sayısı : 607
Hobiler : Uzman
Kayıt tarihi : 04/12/08
Teşekkür : 11
. : [

190310
MesajCSS Tab Menü Nasıl Yapılır / Editlenir ?

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.

kodarşivi.net sitesinden alıntıdır.


forumdll
Sayfa başına dön Aşağa gitmek

 Similar topics

-
» açık öğretim
» Lambo Door Yapımı
» İframe hatası nasıl kaldırılır
» DB Nasıl Degişir? Bilmeyenler İçin SonÇıgLık Farkıyla
» Hayatta bir kez yapılan şey
Bu yazıyı burda paylaş : Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

CSS Tab Menü Nasıl Yapılır / Editlenir ? :: Yorum

Geri: CSS Tab Menü Nasıl Yapılır / Editlenir ?
Mesaj Bir Cuma 19 Mart 2010, 12:14 tarafından Cansiperane
Örneği Görmek İçin Tıklayınız
 

CSS Tab Menü Nasıl Yapılır / Editlenir ?

Önceki başlık Sonraki başlık Sayfa başına dön 

1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
forumdll.benimforum.biz :: WEB :: Web Tasarımı-
Buraya geçin: