HTML - CSS ile Yatay Menü Örneği

HTML etiketlerinden liste kullanılarak ve CSS ile biçimlendirerek basit yatay menü tasarlayacağız.

İlk aşamada oluşturulacak menü liste etiketleri kullanılarak listelenir. Liste üzerinde css ile düzenlemeler yapılacağı için ve sayfamızda bulunan diğer listeleri etkilememek için <ul> etiketine class=”menu” tanımlandı.

</html>
	<body>
		<ul class="menu">
			<li>ANASAYFA</li>
			<li>PROJELER</li>
			<li>REFERANSLAR</li>
			<li>HAKKINDA</li>
			<li>İLETİŞİM</li>
		</ul>
	</body>
</html>

</html>

<body>

<li>ANASAYFA</li>

<li>PROJELER</li>

<li>REFERANSLAR</li>

<li>HAKKINDA</li>

<li>İLETİŞİM</li>

</ul>

</body>

</html>

Menü elemanlarına <a> etiketi ile link verilir ve CSS kodlarını yazacağımız <style type=”text/css”>…</style> kod bloğu <head> etiketi içerisine açılır. background-color ile sayfamıza arka plan rengi verdik.

<html>
	<head>
        <style type="text/css">
          body 
		  {
	          background-color:#f0f8ff;
		  }
	    </style>
        </head>
	<body>
		<ul class="menu">
			<li><a href="anasayfa.html">ANASAYFA</a></li>
			<li><a href="projeler.html">PROJELER</a></li>
			<li><a href="referanslar.html">REFERANSLAR</a></li>
			<li><a href="hakkinda.html">HAKKINDA</a></li>
			<li><a href="iletisim.html">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

body

{

background-color:#f0f8ff;

}

</style>

</head>

<body>

<li><a href="anasayfa.html">ANASAYFA</a></li>

<li><a href="projeler.html">PROJELER</a></li>

<li><a href="referanslar.html">REFERANSLAR</a></li>

<li><a href="hakkinda.html">HAKKINDA</a></li>

<li><a href="iletisim.html">İLETİŞİM</a></li>

</ul>

</body>

</html>

list-style:none ile listeye ait olan noktalar kaldırıldı.

<style type="text/css">
   body 
   {
      background-color:#f0f8ff;
   }
			
   .menu
   {
       list-style:none;
   }
</style>

body

{

background-color:#f0f8ff;

}

.menu

{

list-style:none;

}

</style>

margin ve padding ile liste etiketinden gelen iç ve dış boşluklar sıfırlandı.

.menu
{
  list-style:none;
  margin:0; padding:0;
}

.menu

{

list-style:none;

margin:0; padding:0;

}

menu class’ının içindeki <li> etiketlerine biçimlendirme uygulandı.

margin:5px ile liste elemanlarının arası 5 piksel açıldı.
float:left ile liste elemanlarının yan yana gelmesi sağlandı.

.menu li
{
  float:left;
  margin:5px;
}

.menu li

{

float:left;

margin:5px;

}

menu class’ının içindeki <a> etiketlerine:

text-decoration:none ile altı çizili özelliği kaldırıldı.
color:#606 ile yazı rengi değiştirildi.
font-weight:bold ile yazı kalın hale getirildi.

.menu a
{
  text-decoration:none;
  color:#606;
  font-weight:bold;
}

.menu a

{

text-decoration:none;

color:#606;

font-weight:bold;

}

menu class’ının içindeki <a> etiketlerine:

border:1px solid #609 ile çerçeve yapıldı.
border-top:5px solid #606 ile çerçevenin üst kısmı kalınlaştırıldı.
background:#FCF ile arka plan rengi verildi.

.menu a
{
  text-decoration:none;
  color:#606;
  font-weight:bold;

  border:1px solid #609;
  border-top:5px solid #606;
  background:#FCF;
}

.menu a

{

text-decoration:none;

color:#606;

font-weight:bold;

border:1px solid #609;

border-top:5px solid #606;

background:#FCF;

}

menu class’ının içindeki <a> etiketlerine:

width:150px ile genişliği ayarlandı.
display:block ile tüm liste elemanlarının aynı genişlikte blok halinde olması sağlandı.

.menu a
{
  text-decoration:none;
  color:#606;
  font-weight:bold;
  border:1px solid #609;
  border-top:5px solid #606;
  background:#FCF;

  width:150px;
  display:block;
}

.menu a

{

text-decoration:none;

color:#606;

font-weight:bold;

border:1px solid #609;

border-top:5px solid #606;

background:#FCF;

width:150px;

display:block;

}

menu class’ının içindeki <a> etiketlerine:

line-height ile metin yüksekliği değiştirildi.
padding:5px ile yazının çerçeveden uzaklığı ayarlandı.
text-align ile yazılar ortalandı.

.menu a
{	
  text-decoration:none;
  color:#606;
  font-weight:bold;
  border:1px solid #609;
  border-top:5px solid #606;
  background:#FCF;
  width:150px;
  display:block;
		
  line-height:25px;
  padding:5px;
  text-align:center;
}

.menu a

{

text-decoration:none;

color:#606;

font-weight:bold;

border:1px solid #609;

border-top:5px solid #606;

background:#FCF;

width:150px;

display:block;

line-height:25px;

padding:5px;

text-align:center;

}

a:hover ile linkin üzerine gidildiğinde gerçekleşecek değişiklikle yazıldı.

margin-top:5px ile üstten 5 piksellik girinti verildi.
border-top:5px solid #F06 ile çerçevenin üst çizgisinin rengi değiştirildi.
color:#F06 ile yazı rengi değiştirildi.

.menu a:hover
{
  margin-top:5px;
  border-top:5px solid #F06;
  color:#F06;
}

.menu a:hover

{

margin-top:5px;

border-top:5px solid #F06;

color:#F06;

}

Tüm menü kodları:

<html>
	<head>
		<style type="text/css">
			body 
			{
				background-color:#f0f8ff;
			}
			
			.menu
			{
				list-style:none;
				margin:0; padding:0;
			}
			
			.menu li
			{
				float:left;
				margin:5px;
			}
			
			.menu a
			{
				text-decoration:none;
				color:#606;
				font-weight:bold;
				border:1px solid #609;
				border-top:5px solid #606;
				background:#FCF;
				width:150px;
				display:block;
				line-height:25px;
				padding:5px;
				text-align:center;
			}
			
			.menu a:hover
			{
				margin-top:5px;
				border-top:5px solid #F06;
				color:#F06;
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="anasayfa.html">ANASAYFA</a></li>
			<li><a href="projeler.html">PROJELER</a></li>
			<li><a href="referanslar.html">REFERANSLAR</a></li>
			<li><a href="hakkinda.html">HAKKINDA</a></li>
			<li><a href="iletisim.html">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

body

{

background-color:#f0f8ff;

}

.menu

{

list-style:none;

margin:0; padding:0;

}

.menu li

{

float:left;

margin:5px;

}

.menu a

{

text-decoration:none;

color:#606;

font-weight:bold;

border:1px solid #609;

border-top:5px solid #606;

background:#FCF;

width:150px;

display:block;

line-height:25px;

padding:5px;

text-align:center;

}

.menu a:hover

{

margin-top:5px;

border-top:5px solid #F06;

color:#F06;

}

</style>

</head>

<body>

<li><a href="anasayfa.html">ANASAYFA</a></li>

<li><a href="projeler.html">PROJELER</a></li>

<li><a href="referanslar.html">REFERANSLAR</a></li>

<li><a href="hakkinda.html">HAKKINDA</a></li>

<li><a href="iletisim.html">İLETİŞİM</a></li>

</ul>

</body>

</html>

HTML – CSS ile Yatay Menü Örneği

Tüm menü kodları:

Seçil ŞEKERCİ HÜSEM

Bir yanıt yazın Yanıtı iptal et

Tüm menü kodları:

Alakalı Yazılar

HTML – CSS ile Tablo Biçimlendirme

HTML – CSS ile Yatay Açılır Menü Yapımı

HTML – CSS ile Dikey Açılır Menü Yapımı

Seçil ŞEKERCİ HÜSEM

Bir yanıt yazın Yanıtı iptal et