HorizontalMenu with easing

Bir önceki paylaştığım menüden esinlenerek birde  sizlere  üst menü örneği hazırlamak istedim. Aklımda  tasarladığım menü başlıklarından önce fade  efekti  ile  kaybolan bir resmin ardından  başlıkların ortaya çıkmasıydı. İşin aslı iyice beynim sulandıktan sonra  animasyonlar  arasındaki zamanlama  hatalarından dolayı ortaya  çokta iyi bir sonuç  çıkardım diyemem. Yapmaya çalıştığım animasyon şu anda menüde yok. Pek kullanışlı bir menü  örneğidir  diyemem  ama  belki  birilerinin işine yarar  diye paylaşmak istedim.

Menü örneğinin çalışma  şekli; mouse  linklerin üzerine  geldiğinde linklerin gri  renkli arkapaln çerçevesi  duration:700 hızında sol  tarafta  bulunan ikonun üzerine doğru kayıyor ardından duration:1000  hızıyla menü başlıkları dasol tarafa kayıyor. Menü  çerçevesinede  içten gölge efekti vererek  arkaplana  batmış  bir  efekt  vermeye  çalıştım bu kısmıda  maksat güzellik olsun demo güzel  görünsün. Başkada yaradığı  bir bölüm yok.

Kulanım

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

Js dosya adresleri : 

<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

 JavaScript : 

		<script type="text/javascript">
			$(document).ready(function(){
				$('.ani').hover(function(){
					$(".menu", this).stop().animate({ 
					 marginTop:0,
					 marginLeft:-50},
					 {queue:false,duration:700,});

					$(".menu a", this).stop().animate({ 
					 marginTop:0,
					 marginLeft:0,  					  
					 easing: 'easeInElastic'},
					 {queue:false,duration:1000  });					 

				}, function() {  
					$(".menu", this).stop().animate({
					 marginTop:0,
					  marginLeft:0,},
					  {queue:false,duration:1000,
					  easing: 'easeInElastic'});

					$(".menu a", this).stop().animate({
					  marginLeft:200},
					  {queue:false,duration:700,
					  easing: 'easeInElastic'});					  

				});
			});
		</script>

 Css : 

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

/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body {
	background-color:#666666;
	color: #5a5656;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

#container {
	margin: 70px auto;
	width: 960px;
	height:60px;
	background-color: #ffffff;
	padding-bottom:10px;
	padding-left:20px;
	border:solid #999999;
	overflow:hidden;
	background-color:#CCCCCC;
	-moz-border-radius: 26px;
	-webkit-border-radius: 26px;
	border-radius: 26px;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow: inset 0px 2px 20px #000000;
	-webkit-box-shadow: inset 0px 2px 20px #000000;
	box-shadow: inset 0px 2px 20px #000000;
	/*Inner elements should not cover inner shadows*/
	/*Chrome renders inset shadows incorrectly with border-radius*/
	/*IE 7 AND 8 DO NOT SUPPORT INSET SHADOWS*/

}

.menu-icon {
	background-color:#333333;
	border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	color: #f4f4f4;
	height: 50px;
	line-height: 50px;
	text-align: center;
	float:left;
	width: 50px;

}

.menu {
	background-color:#999999;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 0px 5px 5px 0px;
	-webkit-border-radius: 0px 5px 5px 0px;
	color: #f4f4f4;
	cursor: pointer;
	height: 50px;
	text-transform: uppercase;
	width: 150px;
	border:none;
	position:absolute;
	overflow:hidden;
}

.menu a{
    text-decoration:none;
	font-family: Garamond, serif;
	line-height: 2em;
	color: #fff;
	overflow:hidden;	
	font-weight:bold;
	font-size: 15px;
	margin-left:500px;
	text-shadow: inset 0px 0px 0 rgb(216,216,216), inset 1px 0px 0 rgb(200,200,200), inset 2px 0px 0 rgb(185,185,185),3px 0px 0 rgb(169,169,169), inset 4px 0px 0 rgb(154,154,154), inset 5px 0px 4px rgba(0,0,0,0), inset 5px 0px 1px rgba(0,0,0,0.5), inset 0px 0px 4px rgba(0,0,0,.2);
}

.ani { 
	 position: relative; 
	 width: 150px; 
	 height: 50px; 
	 overflow: hidden;
	 margin-top:10px;
	 margin-left:5px;
	 float:left;
	 border-radius: 5px 5px 5px 5px;
	 -moz-border-radius: 5px 5px 5px 5px;
	 -webkit-border-radius: 5px 5px 5px 5px;	 
}

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

Html : 

<div id="container">

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-home"></span></a>
	<button class="menu"><a href="https://www.mintik.com/?p=13344">Anasayfa</a></button>
 </div>

  <div class="ani">	
	<a class="menu-icon"><span class="fontawesome-group"></span></a>
	<button class="menu">
		<img src="eye.jpg" width="0" height="0" />	
	<a href="https://www.mintik.com/?p=13344">Arkadaslar</a></button>
 </div>	

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-comments-alt"></span></a>
	<button class="menu">
	<a href="https://www.mintik.com/?p=13344">Mesajlar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-picture"></span></a>
	<button class="menu">
	<a href="https://www.mintik.com/?p=13344">Fotograflar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-film"></span></a>
	<button class="menu">
	<a href="https://www.mintik.com/?p=13344">Videolar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-off"></span></a>
	<button class="menu">
	<a href="https://www.mintik.com/?p=13344">Çikis</a></button>
 </div>

</div>