CSS YATAY MENÜ YAPIMI

Web sitelerinin önemli öğelerinden biridir menüler. Menüler, bir web sitesi için bir yol haritasıdır ve mükemmel bir Menü, başarılı bir web sitesi tasarımının ilk adımıdır. Menüler, kullanıcılara site içerisinden kolay gezinme sağlamak için kullanıcı dostu olmalı ve web sitesi tasarımına ve tarzına uygun olmalıdır.

Menüler, bir web sitesi için bir yol haritasıdır ve mükemmel bir menü, başarılı bir web sitesi tasarımının ilk adımıdır. Menü kutusu, içerikleri kategorilere ayırmaya ve web sitesi okunabilirliğini artırmaya yardımcı olur Menüler, kullanıcılara site içerisinde kolay gezinme sağlamak için kullanıcı dostu olmalı ve web sitesi tasarımı tarzına uygun olmalıdır.

Örneklerimizde yatay menüyü standart bir HTML listesinden oluşturacağız.

Navigation (Gezinme) Menü temel olarak bir bağlantı listesidir, bu nedenle <ul> ve <li> öğelerini kullanmak gerekir:

<Li> öğelerine display:inline-blok özelliği vererek veya <li> öğelerini float özelliğiyle yan yana getirmak gerekir.

Css Yatay Menü Oluşturma

<ul>
  <li><a href="#index">Ana sayfa</a></li>

  <li><a href="#hakkımızda">Hakkımızda</a></li>

  <li><a href="#urunler">Ürünler</a></li>

  <li><a href="#referanslar">Referanslar</a></li>

  <li><a href="#iletisim">İletişim</a></li>
</ul>

ÇIKTI:

css liste

Listeden madde işaretlerini kenar boşluklarını ve dolguları kaldıralım.

CSS:


ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;
}

ÇIKTI:

css liste

Yatay gezinme çubuğu oluşturmanın başka bir yolu, <li> öğelerini float ve gezinme bağlantıları için bir düzen belirtmektir:

CSS:

li {
    float: left;
}

li a {
    display: block;

    padding:12px 14px;

    background-color: #27ae60;
}

Blok öğelerini yan yana getirmek için float:left kullanıldı.

Link öğelerine display:block verilerek sadece metin alana değil tüm link alanlarına tıklanabilir yaparız.

Linklere padding özelliği verilerek şıkışık düzeni daha serbest görünmelerini sağladık.

Link öğelerine arkaplan rengi veriyoruz.

ipucu: Tam genişlikte bir arka plan rengi istiyorsanız, her bir <a> öğesi yerine arka plan rengini <ul> öğesine ekleyin:

Mouse ile Linklerin üzerlerinde hareket ettirdiğinde bağlantıların arka plan rengini değiştirin:

CSS:

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;
}
li {
    float: left;
}

li a {
    display: block;

    padding:12px 16px;

    background-color: #27ae60;

    color:white;

    text-decoration:none; 
}
li a:hover{
    background-color:#23834c; 
}

css yatay menü

Aktif Sayfa Belirtmek


Kullanıcının hangi sayfada olduğunu bilmesini sağlamak için geçerli bağlantıya "etkin" bir sınıf ekleyin:

.aktif {
    background-color: #16a085;
}

HTML:

 <ul>

  <li><a class="aktif" href="#index">Ana sayfa</a></li>

  
  <li><a href="#hakkımızda">Hakkımızda</a></li>

  <li><a href="#urunler">Ürünler</a></li>

  
  <li><a href="#referanslar">Referanslar</a></li>

  <li><a href="#iletisim">İletişim</a></li>


CSS:

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #27ae60;
}

li {
    float: left;
}

li a {
    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;
}

li a:hover:not(.active) {

    background-color: #111;
}

.active {

    background-color: #f39c12;
}

ÇIKTI:

css yatay menü

Açılır Yatay Menü Yapımı


ipucu: <Li> etiketleri yan yana getirmek için display:inline-block css özelliğini kullanın.

HTML:

 <ul>
  <li><a href="#index">Ana sayfa</a></li>

  <li><a href="#hakkımızda">Hakkımızda</a></li>

  <li><a href="#Ders">Ders</a>
   <ul>

      <li><a href="#php">php</a></li>

      <li><a href="#css">css</a></li> 

      <li><a href="#html">html</a></li>      
    </ul>

    </li>

  <li><a href="#referanslar">Referanslar</a></li>

  <li><a href="#iletisim">İletişim</a></li>
</ul>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #34495e;
}

li {
    display:inline-block;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover{
    background-color:#f39c12; 
}

ul li ul {
    background-color:#2c3e50;
    display:none;
    position:absolute;
    width:100px
}

ul li:hover ul{
    display:block;
}
li ul li {
    display:block; 
}

ÇIKTI:

css yatay menü
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

2529

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.