728x90 AdSpace

  • Latest News

    6/03/2010

    Css yatay menü yapımı

    adsız
    Ufak bir aradan sonra merhaba, bu makalede sitelerimiz için güzel bir menü hazırlicaz… Bize gereken dosyalar, kodlar konun devamında verilmiiştir… Bu ders için azcık html ve css bilginiz olması konuyu kavramanız için iyi olacaktır… Kodları olduğunca açıklamaya çalştim yararlı olması dileğiyle…



    Bİze gerekli klasör ve dosyalar: index.html stil.css ve images klasörmüz:
    gereklidosyaklasorler

    Öncelikle menü kodlarımızı ekleyelim… ul, li ve a basit html kodlarımız: bunu index.html dosyamızın içerisne ekleyebilirsiniz…
    ulmenu 
    İndex.html görünümü şağıdaki gibi olacaktır…
    menugorunum1
    Daha sonra stil.css dosyamızı açıp kodlamaya başlayalım: öncelikle bir #menu alanı oluşturalım…
    Burada div#menu alanımızı oluşturduk arka plan resmimizi menubg.gif ekledik… repeat-x arkaplan resminin yatay oalrak tekrar etmesini sağlıyor…  repeat-y ise dikey olarak tekrarlar eğer no-repeat deseydik tekrarlama olmaycaktı… şimdilik bize gereken x olarak tekrar etmesi… daha sonra 32px lik bir yükseklik verdik bu değer arka plan resminin yüksekliğine eşit…

    #menu {   
    background:url(images/menubg.gif) repeat-x;    
    height:32px;    
    }
    

    yukarıdaki oluşturduğumuz alanı css mize ekliyelim… Aşağıdaki alanda gördüğünüz gibi div tagı içine css de oluşturduğumuz menuyu yazdık ve ul listesini kapsayacak şekilde / div> ile bitirdik…
    menudiv_ekle

    css dosyamızda kodlamaya devam edelim:
    ul elementi #menu içerisnde yer alndığı için bu şekilde kodluyoruz… list-style:none üstte önizlemsini gördüğünüz liste menünün yan tarafındaki noktaları kaldırmada yardımcı oluyor… ul li de ise menüyü sola yaslayarak yatay hale getirdik… Border-right(kolon-sağ) sağ tarafa 1px lik 75aad2 renginde bir çizgi çektik…

    #menu ul{   
    list-style:none;    
    } 
    #menu ul li {   
    float:left;    
    border-right:1px solid #75AAD2;    
    }
    

    menu son görünüm:
    menusonhali2
    sıra geldi bağlantıları a elementini kodlamaya: font-family ile yazı fontunu seçiyoruz. color bildiğiniz gibi renktir…
    border-right yukarda bahsettiğim gibi sağ tarafa 1pxlik bir çizgi çeker… font-size font boyutunu belirler… font-weight ise yazıların kalın olmasını sağlar. text-decoration ise a elementini kullandığımızda otomatik oalrak gelen alt çizgiyi kaldırmaya yarar. line-height ise satırlar arası yüksekliktir… menüyü ortalamak için kullandık.  padding ise a elemntinin kendi içine doğru verdiği girintidir… Aşağıda padding i daha iyi anlamanız için bir resim var… o ik değer ise aşağı ve yukarı – sağ ve soldur… ilk değer aşağıdan ve üstten değer sonraki ise sağdan ve soldan alacağı girinti değeridir… Bu menüler arası boşluk içindir…

    #menu ul li a {   
    font-family:Arial;    
    color:#C3DBED;    
    border-right:1px solid #2B6484;    
    font-size:13px;    
    font-weight:bold;    
    text-decoration:none;    
    line-height:32px;    
    padding:8px 20px;    
    }
    

    padding uygulanmış alan aşağıda mor ile renklendirilmiştir…  bkz.(Kutu Modeli – Padding Özellikleri)
    padding_ozellik
    sonraki adım ise fare üzerine menü üzerine geldiğimizde gerçekleşecek olaydır. hover aşağıda gördüğünüz gibi a:hover kodumuzda arkaplan resmimiz değişecek ve yazı rengi beyaz olacaktır…

    #menu ul li a:hover{   
    background:url("images/menuhov.jpg") repeat-x;    
    color:#FFFFFF;    
    }
    

    Sonraki olay ise aktif sayfa olayıdır… Örneğin anasayfadaysak bunu belirtmeek adına anasayfaya farklı bir görüntü koyabilriz.. bunun için bir sınıf oluşturabiliriz… aktif adında bir sınıf oluşturduk ve arkaplan rengini yeşil yapacak bir resim ekledik yazı rengi yine beyaz yaptık…

    #menu ul li a.aktif{   
    background:url("images/aktif.jpg") repeat-x;    
    color:#FFFFFF;    
    }
    

    Bu sınıfı ise html dosyamıza aşağıdaki gibi ekliyoruz…
    <pre><code><li><a class="aktif" href="#">Anasayfa</a></li>

    Kodlamanın Son Hali index.html

    <div id="menu"><!-- Menü başlangıç--> 
    <ul>   
    <li><a class="aktif" href="#">Anasayfa</a></li>     
    <li><a href="#">Tasarımlar</a></li>     
    <li><a href="#">Referanslar</a></li>     
    <li><a href="#">Hakkımızda</a></li>     
    <li><a href="#">İletişim</a></li>     
    </ul> 
    </div> <!-- Menü bitiş div-->
    

    stil.css kodları

    #menu {   
    background:url(images/menubg.jpg) repeat-x;    
    height:32px;    
    } 
    #menu ul{   
    list-style:none;    
    } 
    #menu ul li {   
    float:left;    
    border-right:1px solid #75AAD2;    
    } 
    #menu ul li a {   
    font-family:Arial;    
    color:#C3DBED;    
    border-right:1px solid #2B6484;    
    font-size:13px;    
    font-weight:bold;    
    text-decoration:none;    
    line-height:32px;    
    padding:8px 20px;    
    } 
    #menu ul li a:hover{   
    background:url("images/menuhov.jpg") repeat-x;    
    color:#FFFFFF;    
    } 
    #menu ul li a.aktif{   
    background:url("images/aktif.jpg") repeat-x;    
    color:#FFFFFF;    
    }
    

     Demo   Kaynak Dosyayı İndirin
    kirliadam.com makalesidir… emeğe saygı lütfen…  kaynak belirterek paylaşınız…

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    4 yorum:

    1. Çok güzel anlatım olmuş bazı blogları takip ediyorum css anlatan çok karışık hiç birşey anlamadan sayfayı kapatıyorum sizin anlatımınız güzel tebrikler, gerisi gelir inşallah :).

      YanıtlaSil
    2. Teşekür ederim devamı gelcektir... http://www.fatihhayrioglu.com/ sitesini tavsiye ederim css hakkında oldukç.a sağlam bir kaynak tek eksiklik uygulamaların az oluşu? Umarım bizde bu açığı kapatacağız. :)

      YanıtlaSil
    3. Anlatım güzel olmuş tebrikler. Acaba demosunu görebileceğimiz bir adres varmı ?

      YanıtlaSil
    4. Teşekür ederim, kaynak dosya ve demo koymayı unutmuştum konuyu güncelledim...

      YanıtlaSil

    Item Reviewed: Css yatay menü yapımı Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top