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:

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:

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.

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; 
}

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:

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

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:

li a {
      padding:12px 50px;
     }

li a {
       padding:20px 16px;
     }

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


        

ul {
display:inline-block;
}

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

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

<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>

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

ul{
margin-left:70px;
}

li a{
padding:12px 50px;
}