標題：單色動畫MENU清單 jQuery flashy navigation
出處：A.PAO designSTUDIO BLOG
時間：Wed, 01 Feb 2012 10:11:44 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/864/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=1365


下載以下各個.js後，放入[head]~[/head]之間
<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>

<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>

<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>


html中放入，依照上方[javascript]共有三種變化。
<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>


出處：
http://www.brandammo.co.uk/blog/2011/04/jquery-flashy-navigation-with-easing-and-hoverintent/

demo:
http://apao.zapto.org/~apao/jQuery/flashy_navigation/

當地備份:
這個檔案只能在登入之後下載。請先 註冊 或 登入


Generated by Bo-blog 2.1.1 Release