Animasyonlu Css Dikey Menü Örneği

Arka planda hareketli gif animasyon kullanılmış dikey css menü örneği.

Dikey CSS Menü Örneği

Arkaplanda gif animasyonlu resim

Küçük boyut.

Örnek Görünüm:

CSS Kodu:

<style type="text/css">
.outer a, .outer div, .outer li, .outer ul{
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
div.menu{
	width: 193px;
}
div.menu ul{
	list-style: none;
	text-indent: 0px;
}
div.menu li{
	margin-top: 3px;
}
div.menu a{
	font: 12px Verdana;
	padding: 4px;
	color: #646464;
	display:block;
	padding: 6px 30px;
	height: 20px;
	text-decoration: none;
	background: url('Http://www.bilisimkonulari.com/dosyalar/css/animasyonlu_menu/background.gif');
}
div.menu a:hover{
	background: url('Http://www.bilisimkonulari.comdosyalar/css/animasyonlu_menu/highlight.gif') no-repeat right;
	padding: 6px 40px;
}:148px;background:url(/Http://www.bilisimkonulari.comdosyalar/css/animasyonlu_menu/nav_active.jpg) no-repeat;color:#b18211;}
</style>

HTML Kodu:

<div class="outer">
<div class="menu">
<ul>
<ul>
 	<li><a href="https://www.bilisimkonulari.com">Ana Sayfa</a></li>
</ul>
</ul>
&nbsp;
<ul>
 	<li><a href="https://www.bilisimkonulari.com">Hakkımızda</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a href="https://www.bilisimkonulari.com">Hizmetler</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a href="https://www.bilisimkonulari.com">İletişim</a></li>
</ul>
&nbsp;

&nbsp;

&nbsp;

</div>
&nbsp;

</div>

Menu dosyasını indirmek için Tıklayınız.