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>

</ul>

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ü

Arda Çetin 05/05/2019

Ben kodların aynısını yaptım ama olmuyor acaba bizim ekleyeceğimiz başka kodlar varmı?

yönetici 06/05/2019

Yukarda html yazan yeri body etiketleri arasına kopyala css yazan yeri style etiketleri arasına kopyala mutlaka çalışacaktır.

oğzuhan 02/06/2019

Abi çok sağol dönem ödevim senin sayende daha iyi oldu.

Okan 21/08/2019

Menü aşağı doğru açıldığın'da alt tabloda aşağı kayma oluyor.

Yönetici 21/08/2019

Okan, Nasıl photosop gibi programlarda resimleri üst üste(katman) dizebiliyorsak, CSS z-index özelliği ile bunu belirleyip herhangi bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz. Konu için Bakın

Burak Moralı 08/10/2019

Navbarda neden overflow kullandık. Onu anlamadım?

yönetici 09/10/2019

Burak, Menü responsive özellikli tasarlandı. Bazı çözünürlüklü ekranlarda taşma olabilir.

Gökhan Garip 01/11/2019

Aynı menü içinde ikinci bir açılır olduğunda, onun açılan arka fon rengini ve boyutunu nasıl değiştirebilirim, Mesela, sizin örnekte, ders' te, kısa arkaplan, Referanslar'da daha uzun arka plan, yani, her biri için ayrı li ve ul nasıl yapabilirim. Çünkü açılırların hepsi aynı oluyor. Anlatımlarınız, için çok teşekkür ederim, Saygılarımla..

yönetici 02/11/2019

Gökhan, javascript kullanarak yapabilirsin. Bana kalırsa yapma pek iyi durmaz. standart'tan dışarı çıkma.

Hakan 19/11/2019

Hocam bunları genişlik değerlerini yükseltemiyorum yardımcı olur musunuz

yönetici 22/11/2019

Hakan, li a içindeki padding değerleri değiştir. genişlik için:

li a {
      padding:12px 50px;
     }

yükseklik için:

li a {
       padding:20px 16px;
     }

Su Çiçek 07/12/2019

Drop-down menü de kodları girmeme rağmen alt menüler üzerine gelindiğinde açılacak şekilde değil asıl menünün hemen yanındaki satırda duracak şekilde bir çıktı aldım,nasıl düzeltebilirim?

yönetici 08/12/2019

Nasıl photosop gibi programlarda resimleri üst üste(katman) dizebiliyorsak, CSS z-index özelliği ile bunu belirleyip herhangi bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz. Konu için Bakın

mesut 04/04/2020

Çok tşk ederim. Oldu her yerde bunu arıyordum en açıklayıcı sizin makale oldu. Tekrardan tşk.

Muhammet 14/04/2020

Yaptığım menü web sayfasının en altında kalıyor ne yapmalıyım?

yönetici 14/04/2020

Muhammet, şu konuya bak.

hikmet 14/04/2020

logonun hemen yanına küçük bir menü koymak istiyorum fakat direk logonun altına atıyor yardımcı olun lütfen

yönetici 15/04/2020

Hikmet, menüyü div içine al ve display değerini aşağıdaki gibi ekle.

<div style="display:inline-block"></div>


        

Mustafa 27/05/2020

Üst tarafta menü güzel ama sola yatık oluyor onu nasıl ortalayabiliriz. birde arka plan rengini nasıl saydam yapabiliriz.

yönetici 29/05/2020

Mustafa, Menüyü ortalamak için:

ul {
display:inline-block;
}

kodu ekle ve burdaki ortalama yöntemini kullan div arasına ul listeni ekle. Arkaplan rengini saydam yapma:

li a {
    background-color: transparent;
    color:black;
}

Kodları bul yukardaki ile değiştir.

Mer 15/06/2020

Ben yapıyorum ama sonra linke tıklayınca dosya bulunamadı diyor?

yönetici 16/06/2020


 <li><a href="index.html">Ana sayfa</a></li>

Dikkat edersen link index.html adında index.html dosyası oluştur.

İrem kevser 20/06/2020

Merhabalar benim bir sorunum var. Yazdığım kod dosyasında tek liste bu kod değil. bu yüzden bunu yapmaya çalıştığımda diğerleri de aynı şekilde oluyor. ilk defa web programlama dersi aldığım için çok anlayamıyorum.Vize ödevim olduğu için çok önemli, ne yapmam lazım. Lütfen yardımcı olur musunuz?

yönetici 23/06/2020

İrem, yukarıdaki kodları direk yazarsan diğer html elemanları etkiler, onlardan ayrı bir özellik vermek için class(sınıf) seçiçilerine yazmalısın. CSS SEÇİCİLER (SINIF SEÇİCİLER) Konusuna bak.

Selin 14/08/2020

Merhaba, 3 sub menüyü nasıl ekleyebilirim, Örneğin, Ders -->Php-->xxx Şeklinde.

yönetici 17/08/2020


<ul>
	<li>ABC</li>
	<li>ABC</li>t;
	<ul>
	 <li>BCD</li>
	 <ul>
		 <li>CBB</li>
	 </ul>
	 <li>BCC</li>
	</ul>
	<li>ABC</li>
	<li>ABC</li>
</ul>

Atahan faruk tel 02/09/2020

Ben bu menyü ortaya alıp kutucukları büyütmek istiyorum ama fazla bi bilgiye rastlıyamadım lütfen yardımcı olur musunuz ?

yönetici 08/09/2020

Atahan, yukarıdaki cevaplarda ortalama ve genişlik değerlerinin değişimi verilmiştir. Değer sayılarını değiştirerek deneyin.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

3323

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