Ali @mintik
3 Temmuz 2020 0:23

0

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="http://mintik.com/">Home</a></li>
    <li><a href="http://mintik.com/category/wordpress/">Wordpress</a></li>
    <li><a href="http://mintik.com/category/webmaster/">Webmaster</a></li>
    <li><a href="http://mintik.com/category/photoshop-tutorials/">Photoshop</a></li>
    <li><a href="http://mintik.com/category/program/">Software</a></li>
    <li><a href="http://mintik.com/?p=13882">Tutorial</a></li>
  </ul>
</div>