ブログ
WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。
WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。
開閉メニューのサンプルコードは、よく目にしますが、”ボタンのテキストを切り替える機能が付いた”サンプルコードは見つからなかったので自身のコピペ用に作成しました。
スマートフォン用サイトには重宝するかも。
[javascript]
<script type="text/javascript">
$(document).ready(function(){
$("#menu").hide();
var flg = "close";
$("#btn").click(function(){
$("#menu").slideToggle();
if(flg == "close"){
$(this).text("× メニューを閉じる");
flg = "open";
}else{
$(this).text("= メニューを表示");
flg = "close";
}
});
});
</script>
[/javascript]
[css]
<style type="text/css">
body{
width:400px;
margin:0 auto;
padding:0;
text-align:center;
}
#btn{
margin:20px 10px 0;
padding:10px;
cursor:pointer;
background: #EEE;
color: #444;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
}
#menu{
margin:10px;
text-align:left;
}
#menu ul,
#menu li{
margin:0;
padding:0;
list-style-type:none;
}
#menu li a{
display:block;
padding:5px 0;
color: #444;
border-bottom: 1px solid #ccc;
text-decoration:none;
}
</style>
[/css]
[html]
<div id="btn">= メニューを表示</div>
<div id="menu">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
[/html]
事業別ご連絡先
[…] ができた。 今回わからなかったのが、ボタンのテキストを入れ替えるやり方。やっと見つけた「jQueryで開閉メニュー&ボタンのテキストを切り替える」という記事が大変参考になった。 […]
お世話になります。こちらを参考にトグルボタンで開閉する記事を自分の覚書も含めて作成したのですが、複数設置して開いたまま次のボタンをクリックすると「開く」「閉じる」が逆になったりするのですが、何か良い対処方法というのはあるのでしょうか?もしよろしければご教授ください。なお、設置したページはこちらです。http://jump-up.info/jquery/jquery_toggle.html—
jrumbleという要素を振動させるjqueryプラグインをサイトに設置したくサンプルを見ておりますとコード表示にtoggleを使用しており、自分も利用したくまた自分のサイトで利用したものは全部設置方法を記事にしているので、記事を書いた後自分でさわっていて気がつきました。
どのように設置しているかは記事内にそのままのせております。
失礼いたします。
ご紹介ありがとうございます。
変数のflgがかぶっているために「open」なのか「close」なのかが判定できていないようなので、変数をユニークにしてあげるといいのではないでしょうか?
サンプルページ内の変数を単純な形ですがユニークしておりますので、よろしければご確認ください。
http://blow-in.net/blog/sample/jquery003.html
おはようございます。昨夜遅くにコメントしたにもかかわらず、早々のご教授本当にありがとうございます。
早速確認したいと思います。ありがとうございました。