OyunlarBilecik - Yatay Animasyon Menüler

Yatay Animasyon Menüler

Animasyonlu Üst Menü Kodları
Arkadaşlar bu sitede paylaştığım 2. üst menü kodları. İlk paylaştığım açılır kapanır üst menülerdi. Bunlar açılıp kapanmıyor ama animasyonlu. Animasyonlu üst menülerdeki amaç tamamen ziyaretçiyi şaşırtmak gözüne hoş göstermektir. Umarım beğenirsiniz. Ziyaretçi defterimize yorum bırakmayı unutmayın.

Not: Sayfa linklerinizi kendi sitenize göre ayarlamayı unutmayın...

<style type="text/css"> #griwrap { 	width: 600px; 	margin: 0px; 	padding: 0px; }  #grimenu li { 	display: inline; 	list-style: none; 	padding: 0; 	margin: 0px; }  #grimenu li a { 		font-size: 14px; 	font-family: Arial, sans-serif; 	border: 1px solid #333; 	text-decoration: none; 	color:#000; 	/* This is the background used for the animation */ background-image: url('https://img.webme.com/pic/o/oyunlarbilecik2/carpazmenust1.png'); 	/* Align the image position to the left of the a */ background-position: left; 	-webkit-transition: all 0.8s ease-in-out; 	/* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; 	/* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; 	padding-top: 15px; 	padding-bottom: 15px; 	margin-left: -5px; 	padding-left: 20px; 	padding-right: 20px; 	visibility: inherit; }  #grimenu li a:hover { 	color: #FFF; 	/* Align the image position of the background to the right*/ background-position:right; }  </style> </head> <body> <div id="griwrap">   <ul id="grimenu">   <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> </ul>   </div>

<style type="text/css"> #kahvewrap { 	width: 600px; 	margin: 0px; 	padding: 0px; }  #kahvemenu li { 	display: inline; 	list-style: none; 	padding: 0; 	margin: 0px; }  #kahvemenu li a { 	font-size: 14px; 	font-family: Arial, sans-serif; 	border: 1px solid #FFF; 	text-decoration: none; 	color:#CCC; 	/* This is the background used for the animation */ background-image: url('https://img.webme.com/pic/o/oyunlarbilecik2/carpazmenust2.png'); 	/* Align the image position to the left of the a */ background-position: left; 	-webkit-transition: all 0.8s ease-in-out; 	/* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; 	/* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; 	padding-top: 15px; 	padding-bottom: 15px; 	margin-left: -5px; 	padding-left: 20px; 	padding-right: 20px; 	visibility: inherit; }  #kahvemenu li a:hover { 	color: #FFF; 	/* Align the image position of the background to the right*/ background-position:right; }  </style> </head> <body> <div id="kahvewrap">   <ul id="kahvemenu">   <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> </ul>   </div>

<style type="text/css"> #maviwrap { 	width: 600px; 	margin: 0px; 	padding: 0px; }  #mavimenu li { 	display: inline; 	list-style: none; 	padding: 0; 	margin: 0px; }  #mavimenu li a { 	font-size: 14px; 	font-family: Arial, sans-serif; 	border: 1px solid #FFF; 	text-decoration: none; 	color:#CCC; 	/* This is the background used for the animation */ background-image: url('https://img.webme.com/pic/o/oyunlarbilecik2/carpazmenust3.png'); 	/* Align the image position to the left of the a */ background-position: left; 	-webkit-transition: all 0.8s ease-in-out; 	/* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; 	/* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; 	padding-top: 15px; 	padding-bottom: 15px; 	margin-left: -5px; 	padding-left: 20px; 	padding-right: 20px; 	visibility: inherit; }  #mavimenu li a:hover { 	color: #FFF; 	/* Align the image position of the background to the right*/ background-position:right; }  </style> </head> <body> <div id="maviwrap">   <ul id="mavimenu">   <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> </ul>   </div>

<style type="text/css"> #turuncuwrap { 	width: 600px; 	margin: 0px; 	padding: 0px; }  #turuncumenu li { 	display: inline; 	list-style: none; 	padding: 0; 	margin: 0px; }  #turuncumenu li a { 	font-size: 14px; 	font-family: Arial, sans-serif; 	border: 1px solid #FFF; 	text-decoration: none; 	color:#CCC; 	/* This is the background used for the animation */ background-image: url('https://img.webme.com/pic/o/oyunlarbilecik2/carpazmenust4.png'); 	/* Align the image position to the left of the a */ background-position: left; 	-webkit-transition: all 0.8s ease-in-out; 	/* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; 	/* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; 	padding-top: 15px; 	padding-bottom: 15px; 	margin-left: -5px; 	padding-left: 20px; 	padding-right: 20px; 	visibility: inherit; }  #turuncumenu li a:hover { 	color: #FFF; 	/* Align the image position of the background to the right*/ background-position:right; }  </style> </head> <body> <div id="turuncuwrap">   <ul id="turuncumenu">   <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> </ul>   </div>

<style type="text/css"> #yesilwrap { 	width: 600px; 	margin: 0px; 	padding: 0px; }  #yesilmenu li { 	display: inline; 	list-style: none; 	padding: 0; 	margin: 0px; }  #yesilmenu li a { 	font-size: 14px; 	font-family: Arial, sans-serif; 	border: 1px solid #FFF; 	text-decoration: none; 	color:#CCC; 	/* This is the background used for the animation */ background-image: url('https://img.webme.com/pic/o/oyunlarbilecik2/carpazmenust5.png'); 	/* Align the image position to the left of the a */ background-position: left; 	-webkit-transition: all 0.8s ease-in-out; 	/* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; 	/* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; 	padding-top: 15px; 	padding-bottom: 15px; 	margin-left: -5px; 	padding-left: 20px; 	padding-right: 20px; 	visibility: inherit; }  #yesilmenu li a:hover { 	color: #FFF; 	/* Align the image position of the background to the right*/ background-position:right; }  </style> </head> <body> <div id="yesilwrap">   <ul id="yesilmenu">   <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> <li> <a href="#" _fcksavedurl="#">Eklenecek</a> </li> </ul>   </div>

|

|

|

|

|

|

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol