İçerisinde resim dosyası bulunmayan Css  ve Html5 nav elementi ile  hazırlanmış  bir navigation menü. Aslında navigation kelimesinin türkçesi
 navigasyon olarak geçiyor  ama internette bu tür  örnekler  için navigasyon kelimesi  pek  geçmediği için mecburen ortama  ayak uydurmak için navigation diye başlık attım.

Menü örneğimizde her link için ayrılmış olan  bölüm üzerine  mouse geldiğinde Css  kodlar içinde link  için belirlenmiş olan renk  görünüyor. Her link  için farklı  renkler  atanmış. Dilerseniz  tek renk olarakta kullanabilirsiniz.  Her link  bölümü için toplamda beş farklı renk seçeneği  bulunuyor. Eğer bu şekilde kullanmak isterseniz altıncı ve daha sonrası link  bölümleri için Css içinden yeni renkler eklemeniz gerekiyor.

Html5 nav elementini  IE9 desteklemediği için menü örneği IE9 üzerinden sorunlu gözükecektir. Bu sorunu gidermek için Html5 Shiv ile IE9 üzerinden de aynı  görüntüyü elde edebilirsiniz. Bu güne kadar Html5 Shiv nedir ne işe yarar  gibi bir yazı yazma fırsatım olmad ı ama madem konuya  girdik onada  deyinmem gerekiyor kısaca. İlerleyen  zamanlarda  daha açıklayıcı  bir  yazı yazarım artık. IE  tarayıcılarının desteklemediği Html5  elementlerinin IE  tarafından desteklenebilmesi  için hazırlanmış mini bir Javascript kütüphanesidir.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

IE9 için Html5 Shiv :

	<!--[if lt IE 9]>
		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

 Css :

@charset "utf-8";
/* CSS Document */

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- GENERAL ---------- */

body {
	background-color: #e887a0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.5em;
}

a { text-decoration: none; }

ul { margin-bottom: 1.5em; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after { clear: both; }

/* ---------- NAVIGATION ---------- */

nav {
	margin: 50px auto;
	width: 410px;
}

nav ul {
	background-color: #2b2b2b;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 0 5px;
}

nav ul li {
	float: left;
}

nav ul li a {
	color: #fff;
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 5px;
	text-align: center;
	width: 70px;
	font-family: 'Yanone Kaffeesatz';
	font-weight: 900;
    font-size: 1.5em;
}

nav ul li a:hover {
	background-color: #363636;
}

.blue:before {
	background-color: #02a5db;
	content: "";
	display: block;
	height: 3px;
	opacity: 0;
}

.blue:hover:before {
	opacity: 100;
}

.green:before {
	background-color: #25cc31;
	content: "";
	display: block;
	height: 3px;
	opacity: 0;
}

.green:hover:before {
	opacity: 100;
}

.orange:before {
	background-color: #cc6c25;
	content: "";
	display: block;
	height: 3px;
	opacity: 0;
}

.orange:hover:before {
	opacity: 100;
}

.pink:before {
	background-color: #cc259b;
	content: "";
	display: block;
	height: 3px;
	opacity: 0;
}

.pink:hover:before {
	opacity: 100;
}

.red:before {
	background-color:#990033;
	content: "";
	display: block;
	height: 3px;
	opacity: 0;
}

.red:hover:before {
	opacity: 100;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<nav>
		<ul class="clearfix">
			<li class="green line"><a href="#">Home</a></li>
			<li class="pink"><a href="#">Photoshop</a></li>
			<li class="orange"><a href="#">Wordpress</a></li>
			<li class="blue"><a href="#">jQuery</a></li>
			<li class="red"><a href="#">Tutorial</a></li>
		</ul>	
	</nav>