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.

elif dadak 07/11/2020

Dersle beraber refaranslarada sub vermek için ne yapmalıyız

Mert Sen 07/11/2020

Acil lütfen menünün sol tarafına menü ile hizalı düzgün bir şekilde logo (logo dikdörtgen şeklinde) eklemem lazım. Bazı yerlerden baktım ekledim ama menü bozuluyor aşağıya kayıyo px ile bişiler denedim yine olmadı. Lütfen biraz acil'de teşekkürler şimdiden.☺

yönetici 08/11/2020

Mert Sen, resim boyutları 32x32px, 64x64px boyutlarını değiştirerek dene

yönetici 08/11/2020

Elif Dadak, bir alt link oluşturmak için li altına ul liste ekle

<li>dersler
<ul>
<li>css</li>
<li>html</li>
</ul>
<li>

Arif Tuna 11/11/2020

Hocam merhaba, bu menüyü genişlik olarak komple nasıl yayarım yani sayfanın solundan sağına kadar ayarlasın.

yönetici 14/11/2020

Arif, Menü bulunduğu kutuya göre kendini ayarlar dediğin şekilde bir div kutusu yap onun içine bu menüyü ekle.

HTML öğrencisi 27/11/2020

İşime çok yaradı yardımınız için teşekkürler ☺

HTML öğrencisi 27/11/2020

Birşey sormak istiyorum. Ben bir klosör hazırladım ve onu siteme ekledim o klosörü site içinde indirmesini sağlamak için kodu var mı?

HTML öğrencisi 27/11/2020

Küçülltüğüm de ve ekranı büyüttüğüm de menünün boyutu aynı kalıyor onun için ne yapmak gerekiyor?

yönetici 29/11/2020

HTML Download link ekleme konusuna bak. Yatay menüyü div etiketleri içine al "width", "height" değerlerine yüzde değer ver menü kendini kutuya gör ayarlar.

BERAT ÇELİK 25/01/2021

Yatay menü içinde açılır alt menüleri nasıl yaparım?

yönetici 27/01/2021

Berat, yukarıdaki son örnek alt menü örneği yorumlarda alt menü örnekleri var.

Lokman COŞKUN 31/03/2021

Merhaba, Açılır yatay menu yaptım. "Hover" sayesinde fare işretçisi üzerine gelince yukarıdaki örnekte olduğu gibi liste açılıyor. Ancak telefonda üzerine gelme durumu olmadığı için liste açılamıyor. İlgili "li" için tıklayınca açılan bir kod mevcut mu?

yönetici 02/04/2021

Lokman, hover menü cep Telefonda olmaz. Ekrana göre iki menü belirtmen gerekir. Bunun için responsive tasarım öğren. RESPONSİVE WEB TASARIM DERSLERİ cep telefonu menü CSS Açılır Yan Menü (Hamburger Menu) webcebir.com sitesine cep telefonla bak.

Sefa seçgin 11/05/2021

Dikey menü de yapar mısın? (Alt alta açılırsa sevinirim)

yönetici 13/05/2021

sefa, CSS DİKEY MENÜ YAPIMI bakın.

zeynep 26/05/2021

Hersey tamam oldu ama menü ekranın sağ köşesinde duruyor onu sayfanın ortasina nasıl alabilirim?

yönetici 29/05/2021

css pixelleri değiştirerek dene ul kısmına kodları ekle:

ul{
margin-left:70px;
}

burda ki padding ayarları değiştir.

li a{
padding:12px 50px;
}

Yusuf DULKADİR 10/06/2021

Merhaba ben yaptım olmuyor. Kodların html ve css kısımlarını atarmısınız böyle anlatınca yapamadım.

yönetici 11/06/2021

Download HTML Dosya

Kral 27/06/2021

Gerekli düzenlemeleri boş bir alanda düzenleyip ardından sitenize uyguladığınızda sorun olmayacaktır. Ayrıca verilen emek için teşekkürler.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

3982

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 RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.