Basit Yatay Menü Örneği - CSS

CSS ile bir yatay menü oluşturma örneğine göz atalım.

Ekran Görüntüsü

Dosyalar

index.html


<!DOCTYPE HTML>
<html lang="tr-TR">
<head>
	<meta charset="UTF-8">
	<title>Basit Yatay Menü</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<nav>
		<ul>
			<li><a href="link.html">Ana Sayfa</a></li>
			<li><a href="link.html">Hakkımızda</a></li>
			<li><a href="link.html">Resimler</a></li>
			<li><a href="link.html">Notlar</a></li>
			<li><a href="link.html">İletişim</a></li>
		</ul>
	</nav>
</body>
</html>

link.html


<!DOCTYPE HTML>
<html lang="tr-TR">
<head>
	<meta charset="UTF-8">
	<title>Basit Menü</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	Bağlantı sayfası için örnek sayfadır. 
	<a href="index.html">Ana sayfaya geri dön.</a>
</body>
</html>

style.css


nav ul li {
	width:auto;
	height:auto;
	float:left;
	border: 3px solid gray;
	border-radius:5px;
	padding:10px 0px 10px 0px;
	text-align:center;
	background-color: lightgreen;
	list-style:none;
	position: relative;
	margin-right:5px;
}

nav ul li a { text-decoration:none; padding:10px; color:gray; }
nav ul li a:hover { background-color: lightblue; }
nav ul li a:active { background-color: #e2e2e2; }
nav ul li a:visited { color:#ff0000; }

style.css (Açıklamalı)


/* ---------------------------------------------
nav etiketi içerisindeki ve ul etiketi 
içerisindeki li etiketlerinin css 
özelliklerini belirliyoruz.
--------------------------------------------- */
nav ul li {

	/* ---------------------------------------------
	Genişliği belirliyoruz.
	--------------------------------------------- */
	width:auto;

	/* ---------------------------------------------
	Yüksekliği belirliyoruz.
	--------------------------------------------- */
	height:auto;

	/* ---------------------------------------------
	Liste öğelerinin yan yana olmasını sağlıyoruz.
	--------------------------------------------- */
	float:left;

	/* ---------------------------------------------
	Kenarlık özelliklerini belirliyoruz.
	--------------------------------------------- */
	border: 3px solid gray;

	/* ---------------------------------------------
	Köşeleri yuvarlatma işlemini yapıyoruz.
	--------------------------------------------- */
	border-radius:5px;

	/* ---------------------------------------------
	Elementin içinden boşluk verdik.
	--------------------------------------------- */
	padding:10px 0px 10px 0px;

	/* ---------------------------------------------
	Menü içindeki yazıyı ortaladık.
	--------------------------------------------- */
	text-align:center;

	/* ---------------------------------------------
	Arkaplan rengini belirliyoruz.
	--------------------------------------------- */
	background-color: lightgreen;

	/* ---------------------------------------------
	Liste tipini none yaparak başındaki 
	madde işaretlerini kaldırıyoruz.
	--------------------------------------------- */
	list-style:none;

	/* ---------------------------------------------
	Menünün sağı ve solu arasındaki 
	mesafenin hep eşit kalmasını sağlıyoruz.
	--------------------------------------------- */
	position: relative;

	/* ---------------------------------------------
	Menü öğelerinin sağına boşluk verdik. 
	Böylece bitişikliği önlemiş olduk.
	--------------------------------------------- */
	margin-right:5px;
}


/* ---------------------------------------------
li etiketleri içindeki a elementlerinin 
stil ayarlamalarını yapıyoruz.
--------------------------------------------- */
nav ul li a {

	/* ---------------------------------------------
	a etiketinin altı çizili olmasını istemediğimden
	dolayı yukarıdaki kod ile bu özelliği kapatıyoruz.
	--------------------------------------------- */
	text-decoration:none;
		
	/* ---------------------------------------------
	Yukarıda ul ve li için padding vermiştik,
	fakat yazı üzerine geldiğimiz zaman sadece yazı kadar
	olan yerde bağlantı kısmı oluyor, padding verilen kısımlar
	boş kalıyordu. İşte a elementine de padding vererek menünün
	her yerinden tıklanabilir olmasını sağladık. 
	--------------------------------------------- */
	padding:10px;

	/* ---------------------------------------------
	Bağlantı için yazı rengini belirledik.
	--------------------------------------------- */
	color:gray;
}


/* ---------------------------------------------
Bağlantının üzerine gelindiğinde olmasını
istediğimiz stil ayarlarını yapıyoruz.
--------------------------------------------- */
nav ul li a:hover {

	/* ---------------------------------------------
	li etiketlerinin üzerine işaretçiyi 
	getirdiğimizde rengi açık mavi olacak.
	--------------------------------------------- */
	background-color: lightblue;
}


/* ---------------------------------------------
Bağlantının üzerine geldiniz, tıkladınız ve o 
şekilde duruyorsunuz. Yani bağlantıyı aktifleştirdiniz.
Mouse sol tuşunu bıraktığınızda bağlantıya gideceksiniz.
İşte bırakmadan önce olacak stil ayarlarını belirliyoruz.
--------------------------------------------- */
nav ul li a:active {

	/* ---------------------------------------------
	Menüdeki bir bağlantıya tıkladınız ve 
	o sayfaya geçiş yaptınız. Bunu yaptığınızda
	o sayfayı bir nevi aktifleştirmiş oluruz.
	İşte menüde de bu aktifleştirme olayının
	gözükmesini istediğimden dolayı bu kodu kullandım.
	Yani menüdeki bağlantı aktifleştirilince arka plan 
	rengi değişsin.
	--------------------------------------------- */
	background-color: #e2e2e2;
}

/* ---------------------------------------------
Bağlantıyı ziyaret ettikten sonra olmasını
istediğimiz stil ayarlarını belirliyoruz.
--------------------------------------------- */
nav ul li a:visited {
	color:#ff0000;
}

İndirme Bağlantısı

Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir

Etiketler

css açıklamalı içerik