FlashyNav – Flash benzeri nasigasyon tasarımı

Flash benzeri site menülerini azçok bilirsiniz. Mouse linklerin üzerine geldiği anda linklerin bulunduğu arkaplan çerçevesi içinde başka bir renkte çerçeve hareket eder ve mouseyi tekrar geri çektiğinizde yada başka bir linkin üzerine geldiğiniz anda arkaplan tekrar kayar ve eski haline gelir.

Brandammo tarafından geliştirilmiş jQuery flashyNav uygulaması ile flash benzeri mouse üzerine gelince arkaplanı kayan dikey yada yatay menü örnekleri hazırlayabilirsiniz. Demo sayfasında 3 tane dikey kayan animasyonlu menü örneği bulunuyor. Örneklerin hepsini birbirine benziyor ama bunları birbirinden ayıran tek özellik animasyonlarının hareket hızı ve davranışları. jQuery Easing uygulaamsı ile beraber kullanıldığı için her demoya farklı easing değerleri eklenmiş. Bu sayede kayan arkaplan renklerinin hareketleri ve hızları da birbirinden farklı oluyor.

Kullanım

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

Js dosya adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.flashyNav.1.0.js"></script>

JavaScript :

<script type="text/javascript">
$(function(){

	$('.nav1').flashyNav({
		rolloverColor: '#5400ff',	//the default color of the rollover element
		rolloverDuration: 1000,	//the default duration for the rollover
		easingMethod: 'easeInOutQuint'	//easing method used for animation
	});

	$('.nav2').flashyNav({
		rolloverColor: '#00d2ff',	//the default color of the rollover element
		rolloverDuration: 800,	//the default duration for the rollover
		easingMethod: 'easeOutBounce'	//easing method used for animation
	});

	$('.nav3').flashyNav({
		rolloverColor: '#a800ff',	//the default color of the rollover element
		rolloverDuration: 800,	//the default duration for the rollover
		easingMethod: 'easeOutElastic'	//easing method used for animation
	});

});
</script>

Css :

<style type="text/css">

	* {margin:0; padding:0}
	body {background: #000; color:#fff; margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px}
	a {color:#fff}

	ul.nav {list-style:none; margin:20px; width:300px; font-size:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold}
	ul.nav li {position:relative; border-bottom:1px solid #333; display:block; height:30px; overflow:hidden}
	ul.nav li a {position:relative; color:#fff; text-decoration:none; display:block; height:20px; padding:10px 0 0 10px; z-index:100; text-transform:uppercase}

</style>

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

Html :

    
    <ul class="nav nav1">
  		<li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>

        <li><a href="">Services</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>

    <ul class="nav nav2">
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>

        <li><a href="">Services</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>

    <ul class="nav nav3">
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>

        <li><a href="">Services</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>

Download

Demo