スポンサーサイト

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

LavaLamp for jQuery lovers! - jQueryを利用したFlashみたいなメニュー

jQueryを利用してFlashのようになめらかに動くメニューを設置してみます。これだけの動きですが、下の海外サイトにサンプルがありますので設置は簡単。
With Image
No Image
Bottom Style 外部のCSSとjavascriptを読み込み、javascriptを記述します。speedを変更すると動きの早さが変わります。
<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout", 
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
htmlは下のとおりでCSSのclassを上の3種類から選べます。
<ul class="lavaLampWithImage" id="1">
<li><a href="#">ホーム</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">javascript</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">Google API</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">カスタマイズ</a></li>
</ul>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
LavaLamp for jQuery lovers! - jQueryを利用したFlashみたいなメニューの記事を実装してみたのですが、ボタンにリンクを貼ってもリンク先に飛びません。原因が解らないのですが、解説などしていただけると助かります。
【2012/10/18 19:30】 | takumi #- | [edit]









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

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