Yatay Css Menüleri Hazırlamak

Bu yazımda yatay bir css menüsü hazırlayacağız. CSS ile ilgili geniş bilgiyi ASP.NET Framework 3.5 kitabı içerisinde bulabilirsiniz.

Öncelikle sayfanıza bir adet < div>
tagı ekleyiniz ve içerisine aşağıdaki html taglarını yerleştiriniz.

  • Yazılım Kitaplarımız< /a>< /li>
  • Sistem Uzmanlığı Kitaplarımız< /a>< /li>
  • Grafik Kitaplarımız< /a>< /li>
  • Office Kitaplarımız< /a>< /li>
  • Veritabanı Kitaplarımız< /a>< /li>
    < /ul>
    < /div>
    Burada
    < ul> tagı ile bir liste oluşturduk.
    < li> tagı ile liste elemanlarını oluşturduk ve < a> tagı ile liste elemanlarına link verdik. Normal şartlarda oluşturduğumuz yapı aşağıdaki gibi olacaktır.

    Şimdi stil dosyamıza aşağıdaki stilleri ekleyiniz.

    body
    {
    font-family: Verdana;
    font-size: medium;
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    text-transform: none;
    color: #FF0000;
    text-decoration: underline;
    }
    #yatayMenu
    {
    margin:10px 0px 0px 0px;
    padding: 5px 0px 6px 0px;
    background-color: #818181;
    }
    #yatayMenu ul {
    margin: 0px;
    padding: 0px;
    }
    #yatayMenu li {
    display: inline;
    }
    #yatayMenu a {
    padding: 5px 15px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    }
    #yatayMenu a:hover
    {
    background-color: #8C8C8C;
    }
    Şimdi de source kısmından< div>
    tagını aşağıdaki gibi düzenleyerek link stilimizi referans veriniz.

    • Yazılım Kitaplarımız< /a>< /li>
    • Sistem Uzmanlığı Kitaplarımız< /a>< /li>
    • Grafik Kitaplarımız< /a>< /li>
    • Office Kitaplarımız< /a>< /li>
    • Veritabanı Kitaplarımız< /a>< /li>
      < /ul>
      < /div>
      Sayfanızı çalıştırdığınız zaman aşağıdaki gibi bir sonuçla karşılaşacaksınız.

      yatay-css-menuleri-hazirlamak-1

      yatay-css-menuleri-hazirlamak-1

    •  

      Şimdi yazdıklarımızı birer birer açıklayalım.

      1)

      #yatayMenu
      {
      margin:10px 0px 0px 0px;
      padding: 5px 0px 6px 0px;
      background-color: #818181;
      }
      Bu bölümde menünüze ait temel görüntüler belirtilir. Aslına bakarsanız burada yapılan
      tagını yapılandırmaktır. Çünkü menü görevini gören bu tagdır.

      Margin:
      Menümüzün çevresindeki bölümlere olan uzaklığını belirledik. Menümüz üstündeki tagdan 10 px aşağıda olacak ama solundaki, altındaki veya sağındaki tagdan herhangi bir şekilde uzakta olmayacaktır.

      Padding:
      Genellikle Margin ile karıştırılır. Margin verdiğiniz tag ile çevresindeki nesnelere ulan uzaklık belirtilirken padding ile
      in içerisindeki nesnelerin
      ’in sınırlarına olan uzaklıkları belirtilir. Yani menümüzün içerisindeki menü elemanları
      tagının sınırlarına üstten 5px, sağdan 0px, alttan 6px, soldan 0px uzaklıkta olacaktır.

      Background-color:
      Arkaplan rengini belirttik.

      < div id=”yatayMenu”> olarak belirttiğimiz < div> tagı içerisinde bulunan html taglarına ayrıca stil yazabilirsiniz. Menümüze ait stil ayarlamalarında da aynen bunu yaptık.

      2)

      #yatayMenu ul
      {
      margin: 0px;
      padding: 0px;
      }

      Burada< div id=”yatayMenu”> olarak belirttiğimiz < div> tagı içerisinde bulunan < ul> tagına ait stil özelliklerini belirttik.

      3)

      #yatayMenu li {
      display: inline;
      }

      Burada ise < li> tagına ait stil özelliklerini belirttik. Yani liste elemanlarının nasıl görüneceği hususundaki özelliği belirttik. “ inline” ile liste elemanlarının alt alta değil, yan yana dizileceğini belirttik.

      #yatayMenu a {
      padding: 5px 15px;
      text-decoration: none;
      font-size: 11px;
      font-weight: bold;
      color: #FFFFFF;
      }

      Yukarıdaki stillerle de liste elemanları içerisindeki linklere ait stil özellikleri belirtildi. “text-decoration” linklerde alt çizgi, madde imleri gibi özelliklerin uygulanıp uygulanmayacaının belirtildiği özelliktir. Biz “none” diyerek uygulanmayacağını belirttik.

      Dikkat ettiyseniz linklerin üzerine mouse ile geldiğinizde linkin arkaplan rengi değişiyor. Bunu yapan aşağıdaki stildir.

      #yatayMenu a:hover
      {
      background-color: #8C8C8C;
      }

      “a” tagı linkimiz, “hover” ise linkin üzerine gelme olayıdır.

      Diğer yazılarımda görüşmek üzere.