Make A Simple Navigation With Hover Transitions

Make A Simple Navigation With Hover Transitions - Bicara soal Cara Membuat Menu Navigasi Sederhana di Blog Dengan Efek Hover Transisi akan saya di jelaskan di postingan ini. Semua Blog atau Website pasti memiliki menu navigasi bukan? karena menu navigasi ini berguna untuk memudahkan pengunjung dalam mencari informasi di blog atau website kita. Maka dari itu semua blog atau website pasti memiliki menu navigasi.

Nah, Sekarang saya akan membagaikan How To Make A Simple Navigation With Hover Transitions. Jika ingin menggunakan Simple Navigation With Hover Transitions ini, Maka hanya menerapkan kode - kode berikut ini di template anda. Apabila di blog atau website anda sudah memiliki menu navigasi ini maka hapuslah terlebih dahulu. Lalu terapkan kode - kode di bawah ini.


* {margin: 0; padding: 0;}

body {
	font-family: 'Lucida Grande', helvetica, arial, sans-serif;
	font-size: 12px;
	background: #eff;
}

.navigation {
	margin: 200px 20px;
	background: #fff;
	overflow: hidden;
	width: 760px;
	
	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
	width: 120px; border-left: 5px solid #666;
	float: left;
	cursor: pointer;
	list-style-type: none;
	
	padding: 10px 50px 10px 15px;
	
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.navigation li h2 {
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	font-size: 14px;
	margin-bottom: 5px;
	line-height: 16px;
}

.navigation li p{
	font-size: 11px;
	color: #999;
	
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
}

.navigation li:hover {
	background: #333;
	border-left: 5px solid #000;
}

.navigation li:hover h2 {
	font-weight: bold;
	color: #fff;
}

.navigation li:hover p {
	color: #ccc;
	padding-left: 5px;
}


<ul class="navigation">
	<li>
		<h2>Home</h2>
		<p>Welcome to my website</p>
	</li>
	<li>
		<h2>SEO</h2>
		<p>Order SEO</p>
	</li>
	<li>
		<h2>About</h2>
		<p>Who we are</p>
	</li>
	<li>
		<h2>Feedback</h2>
		<p>Help us improve</p>
	</li>
</ul>

Terapkan Kode HTML di posisi yang anda inginkan.

Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell