jQuery使用で、メニューを押したら横からページがスッと出て来るメニュー（以下アドレス）を作りたいのですが、どなたかjQueryで作れる方法をご存知でしょうか？www.wanda.net で「DIRECTORS」をクリックで左から出てくる様なメニューです。
ソースを見る限り難しいことはしていないので、自分で作ってみるといいですよ。以下コードの抜粋です。
// directorsをクリックしたとき $("#menu ul.nav li a.directors").click(function () { $(this).addClass("active"); $("#navDirectors div.main div.content, #navDirectors .slide.list ul").css({ opacity: "0" }); $("#navDirectors").css({ display: "block" }); $("#navDirectors").animate({ width: (colWidth * 4) + "px" }, 400, "easeOutExpo", function () { // アニメーション後の処理いろいろ $("#navDirectors div.main div.content").animate({ opacity: "1" }, 150); }); return false; });
教えて頂きありがとうございます！！ちょっと試してみようと思いますが、この記述の箇所だけjsで保存してhtmlから外部で読ませてやればいいのでしょうか？ ＰＧ全く苦手なのでスミマセン....。。
このコードをコピペするだけだと動かないので、動作の原理だけ勉強するといいですよ。横からスッと出てくるメニューがあらかじめCSSでwidth: 0になっていて、クリックするとそのwidthを(colWidth * 4)pxに遷移させているだけです。
このへんと
お忙しい中、リンクまでありがとうございます！！こちら読んでみましたが興味がわいて来て詳しく勉強したいと思いました。また分からない事があったらこちらでも質問させて頂きたいと思います！:) ありがとうございます。
このへんを参考にするとよいかもです
ありがとうございます！リンク2つも頂きまして、、大変参考になります。ア****ンでも超初心者向けのjQueryの本が出ていましたので、こちらを一度詳しく見て更に勉強しようと思います。できるようになると楽しいんでしょうね、、それまで道のりは長そうです... X(
みんなの回答 3 件
ソースを見る限り難しいことはしていないので、自分で作ってみるといいですよ。以下コードの抜粋です。
// directorsをクリックしたとき
$("#menu ul.nav li a.directors").click(function () {
$(this).addClass("active");
$("#navDirectors div.main div.content, #navDirectors .slide.list ul").css({ opacity: "0" });
$("#navDirectors").css({ display: "block" });
$("#navDirectors").animate({ width: (colWidth * 4) + "px" }, 400, "easeOutExpo", function () {
// アニメーション後の処理いろいろ
$("#navDirectors div.main div.content").animate({ opacity: "1" }, 150);
});
return false;
});
このへんと
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書...
http://webdesignrecipes.com/jquery-beginners-guide-for-web-design/このへんを参考にするとよいかもです
jQuery 日本語リファレンス
http://semooh.jp/jquery/関連するトピックス