fc2ブログ
Top

jQueryとCSSでアニメーションするナビゲーションメニュー 15+

fancy-150x141

DesignzzzにTop 15 Jquery CSS Animated Navigation Tutorialsとして
15個のjQuery+CSSで作られたメニューが紹介されています。





fancy

>>Animated Navigation w/ jQuery & CSS : DEMO

くるくる回るメニューです。



slick

>>Create a Cool Animated Navigation with CSS and jQuery+ : DEMO

navi部分とcontent部分を組み合わせたメニューです。
こちらもくるくる回ります。



jquery+cssnavige

>>Image Menu with Jquery - Design Tips & Techniques : DEMO

ヘッダ部分に使えそうなメニューです。
Flash代わりにも使えそうですね。


jQuery等、JavaScriptを使ったメニューは見ていて楽しくなるものばかりですね。

Top 15 Jquery CSS Animated Navigation Tutorials – Designzzz
2010/02/14 00:08JavaScript | Trackback(0) | Comment(7)
はてなブックマーク - jQueryとCSSでアニメーションするナビゲーションメニュー 15+

≪ デザイナーが持っておくべきグランジフォント 20+ | HOME | ソーシャルメディアのヴィンテージ風切手アイコン ≫

なめらかににゅるにゅるするの好きです＾＾。
ついつい、マウスオンしてしまうのです。
[ 2010/02/18 23:49 ] [ 編集 ]
Animated Navigation w/ jQuery & CSS
このやり方教えてもらえませんか？？
[ 2010/03/05 18:20 ] [ 編集 ]
>アプピさん
1から全部分からないのでしょうか？
とりあえず、メニュー用の画像を作り掲示されているソースを貼り付ければOKなはずなのですが。
[ 2010/03/05 23:58 ] [ 編集 ]
step3からわかりません＞＜
[ 2010/03/06 11:50 ] [ 編集 ]
>アプピさん
このメニューはjQueryというライブラリが使われています。
なので
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});
</script>

という文を<head>の中に入れてください。

これで大丈夫なはずなのですがまだ問題がありましたらコメントくださいね。
[ 2010/03/06 12:44 ] [ 編集 ]
できました＾＾
ありがとうございます。
[ 2010/03/06 13:14 ] [ 編集 ]
>アプピさん
おめでとうございます。
解説が足りませんでしたね。申し訳ありませんでした。
[ 2010/03/06 13:23 ] [ 編集 ]
コメントの投稿















管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

≪ デザイナーが持っておくべきグランジフォント 20+ | HOME | ソーシャルメディアのヴィンテージ風切手アイコン ≫