人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在、スマホサイトを作成しています。
そこで、ナビゲーションをよくある3本線を押すとメニューが出てきてページ内リンクで飛ぶという仕組みを作成しています。

メニュー3本線ボタンをおして閉じてって所までできています。
そこから先がなかなか進まないので、助けて頂けないでしょうか?

$(function(){
$("#globalnavi").css("display","none");
$("#nav_button").on("click", function() {
$("#globalnavi").slideToggle();
});
});

●質問者: mi-
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● TransFreeBSD

http://jsfiddle.net/fh7cago1/
ポイントは#globalnavi要素を#nav_button要素内に入れておくことでしょうか。
これで#globalnavi要素をクリックすると必然的に#nav_button要素もクリックした事になり、#globalnavi要素が閉じます。
これが出来ないときは#globalnavi要素にもイベントを登録してください。

<head>
 <style type='text/css'>
 #nav_button {
 position: fixed;
 background-color: lightgray;
 top: 0;
 left: 60px;
 padding: 6px;
 min-height: 20px;
 z-index: 99;
}
#content {
 padding-top: 20px;
 z-index: 0;
}
.poem {
 width: 1.2em;
}
h1 {
 margin-top: -12px;
 padding-top: 24px;
 margin-bottom: 6px;
}
 </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#globalnavi").css("display", "none");
$("#nav_button").on("click", function () {
 $("#globalnavi").slideToggle();
});
});//]]> 
</script>
</head>
<body>
 <div id="nav_button"><div id="globalnavi"><ul>
 <li><a href="#i">いろは</a></li>
 <li><a href="#w">わかよ</a></li>
 <li><a href="#u">うゐの</a></li>
 <li><a href="#a">あさき</a></li>
 </ul></div>
</div>
<div id="content">
 <h1 id="i"></h1> <div class="poem">ろはにほへと ちりぬるを</div>
 <h1 id="w"></h1> <div class="poem">かよたれそ つねならむ</div>
 <h1 id="u"></h1> <div class="poem">ゐのおくやま けふこえて</div>
 <h1 id="a"></h1> <div class="poem">さきゆめみし ゑひもせすん</div>
</div>
</body>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ