現在、スマホサイトを作成しています。

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/11/14 10:06:36
  • 終了:2014/11/21 10:10:04

回答(1件)

id:TransFreeBSD No.1

TransFreeBSD回答回数659ベストアンサー獲得回数2642014/11/14 23:43:23

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>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません