スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery “flash like” menu - jQueryでFlashのように滑らかに動くメニュー

その名のとおりのメニューですが設置はとても簡単。jQuery “flash like” menuという題で紹介されており動きもなかなか面白いです。
まずはサンプルをご覧ください。 まず外部ファイルを4つ読み込みます。
<link rel="stylesheet" href="css/master.css" type="text/css" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/JavaScript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/JavaScript" src="js/jquery.menuZoomer.js"></script>
あとはメニューの中身を記述するだけ。
<div class="menu">
  <a href="#" class="menuFlash">Accueil</a>
  <a href="#" class="menuFlash">Portfolio</a>
  <a href="#" class="menuFlash">Contact Us</a>
  <a href="#" class="menuFlash">Services</a>
</div>
カスタマイズはjquery.menuZoomer.jsの最初の方にある以下の部分でおこなえます。
$("a.menuFlash").menuZoomer({
    speed:400,
    fontColor:"#d7df23",
    fontSize : "300%",
    lineHeight:"39px",
    easing : "easeOutExpo"
  })
speed 数字が大きくなるほど文字が大きくなるスピードが遅くなります
fontColor マウスを乗せたときのフォントの色
fontSize マウスを乗せたときのフォントのサイズ
lineHeight マウスを乗せたときのフォントの間隔
サンプルは以下のサイトからどうぞ!
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。