Colorful horizontal nav

İç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.

Download

Demo

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>