menuFlip.js

menuFlip uygulaması döndürülebilir  menü örnekleri kullanabilmeniz  için Garrett Grimm tarafından geliştirilmiş  bir eklentidir. menuFlip uygulamasını çalışmalarınıza eklediğiniz  anda göz alıcı bir  animasyona sahip olursunuz. Normalde mouse üzerine geldiğinde renk değiştiren menüler menuFlip  ile birleştirildikten sonra mouse üzerine geldiğinde ise adeta  üç boyutluymuş gibi alttan yukarı doğru kayarak renk değiştirir.

Anlatım için hazırladığım menü örneği  o kadarda  mükemmel bir görüntüye sahip değil. Aslında sadece  göstermek amaçlı  birkaç tane renk denedim menü üstünde. Siz kendi  sitenize  göre renkleri değiştirirsiniz. Bunun dışında jquery.menuFlip.js dosyasında değişiklik yapmanız gereken birkaç bölüm bulunuyor. Bunlar dışında yapmanız gereken değişiklikleri css kodlar üzerinden yapabilirsiniz.

•  ‘li_height’ : ’55px’ > Yukarı çıkacak bölümün yüksekliği.
• ‘flip_speed’ : 150 > Yukarı çıkacak bölümün hızı.
• ‘flipped_class’ : ‘flipped_item’ > Eklentinin uygulanacağı nesne.

Kullanım

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

Js dosya adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.menuFlip.js"></script>

 JavaScript : 

<script type="text/javascript">
$(function() {
	$('#flip_nav').menuFlip();
});
</script>

 Css : 

/*this defines the styling of the new flipped menu item*/
#container {
    color: #ccc;
	background:#000000;
	width:900px; 
	height: 40px;  
	text-shadow: 0 1px 0 #000;
	margin: 0 auto;
	overflow:hidden;	
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
}
ul#flip_nav {
	width: 750px; 
	overflow:hidden;
	margin: 0 35px;
}

ul#flip_nav li {
	width:120px;
	float:left;
	padding-left:5px;
	margin-top:-5px;
}

ul#flip_nav li a {
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	overflow:hidden;	
	text-align: center;
	text-transform:uppercase;
	background:#CCCCCC;
	text-decoration: none;
	color:#999999;
}

ul#flip_nav a.flipped_item {
	background-color:#000000;
	color: #ffffff;
	border-bottom: 10px solid #000;	
}

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

Html : 

<div id="container">
  <ul id="flip_nav">
    <li><a href="https://www.mintik.com/">Home</a></li>
    <li><a href="https://www.mintik.com/category/wordpress/">Wordpress</a></li>
    <li><a href="https://www.mintik.com/category/webmaster/">Webmaster</a></li>
    <li><a href="https://www.mintik.com/category/photoshop-tutorials/">Photoshop</a></li>
    <li><a href="https://www.mintik.com/category/program/">Software</a></li>
    <li><a href="https://www.mintik.com/?p=13882">Tutorial</a></li>
  </ul>
</div>