ページ内のアンカーでも使えるドロワーメニューはありますか?

スマホ用ページでラベル注文用フォームを作ろうとしています。
ラベルの数がかなり多いので、ジャンル別に分けそのジャンルにすぐ移動できるようにドロワーメニューを常に表示させそこから移動できるようにさせたいです。

ドロワーメニューはslimMenuを利用しようとしています。
これ自体はとても使いやすくて良いのですが、ページ内移動をした時移動してもドロップしたメニューが閉じてくれません。移動した後再度メニューボタン(三の部分)を押さないと閉じません。
設置の仕方が悪いのでしょうか?それともオプションか何かで設定可能なのでしょうか?
(PCだとマウスオーバーが判別できるけど、スマホだと出来ないからこういう仕様?)
このドロワーメニューでは出来ない場合、他の物で出来るでしょうか?また別の方法がありますか?

また、このドロワーメニューを「position: fixed;z-index:999;」で固定・常に表示にすると、ページ内移動した際リンク先がメニューに隠れてしまいます。
リンク位置を数行上の改行や画像等に入れてみましたが、もちろんぴったり上に来るようにするのは難しく前のジャンルの最終項目がはみ出して見えてしまったりします。
これもどうにかできないでしょうか?

行動規範の内容に同意します

回答1件

ベストアンサー

これ、この前他のScriptで私も質問したことがあります。
その時は、他のScriptでもOKだったので、Slicknav
というのに変更しました。作りは大差ないと思います。
で、OptionのcloseOnClickをtrueにしてあげれば、
ハンバーガボタンOn→メニュー出現→リンククリック→スクロールしながらメニュー消滅
とお望みの動きになるはずです。
ただ、スムーススクロールとの相性があるらしいので、もしそこで
躓いた場合、スムーススクロールのScriptを

JavaScript
1$(function(){
2   $('a[href^=#anc-]').click(function() {
3      var speed = 400;
4      var href= $(this).attr("href");
5      var target = $(href == "#" || href == "" ? 'html' : href);
6      var position = target.offset().top;
7      $('body,html').animate({scrollTop:position}, speed, 'swing');
8      return false;
9   });
10});

というものに差し替えます。2行目の「#anc-」がミソで、通常であれば、
「#」だけでいいのですが、おそらく、OptionのprependToでIDを指定しているのが
原因だと思いますが、「#anc-」として「anc-」を追記したIDのみスムーススクロールを
効かせてやれば回避できます。もちろん、「anc-」は他の文字列でOKです。

HTML
1<div id="anc-wrapper"></div>

ジャンプ先のIDは上記のようになります。

追記：先のスムーススクロールだと-30pxの位置にスクロールとかは出来ないので、

CSS
1#anc-wrapper {
2  padding-top:30px;
3}

などとして、ハンバーガボタンが入っている領域の分、高さを確保すれば、
ぴったりになるかと思います。

再追記：その時のソースは以下です。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<link rel="stylesheet" href="css/common.css">
5<link rel="stylesheet" href="css/slicknav.css">
6</head>
7
8<body>
9<!-- Header(Global Navigation) Start -->
10<div id="upper">
11  <header id="header">
12    <nav>
13      <ul id="pc-navi">
14        <li class="current"><a href="#anc-wrapper">HOME</a></li>
15        <li><a href="#anc-concept">CONCEPT</a></li>
16        <!-- 数項目続く -->
17      </ul>
18
19      <div id="sp-navi"></div>
20    </nav>
21  </header>
22</div>
23<!-- Header(Global Navigation) End -->
24
25<!-- 各コンテンツ -->
26
27<!-- </body>直前にScript読み込みをまとめて -->
28<script src="js/jquery-1.10.2.min.js"></script>
29<script src="js/jquery.slicknav.min.js"></script>
30<script>
31$('#pc-navi').slicknav({
32  prependTo:'#sp-navi',
33  label:'',
34  closeOnClick:'true'
35});
36</script>
37<script src="js/smoothScroll.js"></script>
38<!-- などなど -->
39</body>
40</html>

CSS
1/*common.cssの一部*/
2
3/* Header Start */
4
5#upper {
6  z-index:1000;
7  position:fixed;
8  left:0;
9  top:0;
10  background:url(../common_images/bg_header.png) repeat;/*白透過*/
11  width:100%;
12  height:44px;
13}
14
15#header {
16  margin:0 auto;
17  width:1000px;
18}
19
20#pc-navi {
21  display:table;
22  width:100%;
23  height:44px;
24  list-style-type:none;
25}
26
27#pc-navi li {
28  display:table-cell;
29  padding:0 22px 0 24px;
30  vertical-align:middle;
31  font-family: 'Sorts Mill Goudy', serif;
32  font-size:14px;
33  letter-spacing:2px;
34}
35
36#pc-navi li a {
37  display:block;
38}
39
40#pc-navi li.current a {
41  color:#999;
42}
43
44#sp-navi {
45  display:none;
46}
47
48@media only screen and (max-width : 999px) {
49  #upper {
50    background:none;/*白透過が重なってしまうので*/
51  }
52	
53  #header {
54    width:100%;
55  }
56	
57  #pc-navi {
58    display:none;
59  }
60	
61  #sp-navi {
62    display:block;
63  }
64}
65
66/* Header End */

コピってて思い出しましたが、animatedModal.js
っていうモーダルウィンドウのScriptを入れてました。
これも。「#modal01」とかのリンクをクリックで、モーダルオープンなので、
スムーススクロールでひっかかっていたのは、こっちだったような…
まぁ、タブ切り替えとかのときにも有効なので、覚えておいて損はありません。

投稿2016/07/20 06:58

編集2016/07/21 06:14

LibertyBell3

総合スコア1084

terataka

2016/07/21 01:44

返答ありがとうございます。 Slicknavをダウンロードして設定をしていこうとしたのですが、今回の問題点以前の部分で詰まってしまってどうしようかと悩み中です。デフォルト状態で動作確認したのを確認し、メニューを固定にしようと模索。 <ul>～</ul><script>～を<div>で囲み、「position: fixed;z-index: 1000;」にしても固定にならず。 $('#menu').slicknav({ prependTo: "#mobile-menu", }); で、cssを #mobile-menu { display: block; position: fixed; width: 100%; z-index: 1000; } とすると、メニュー自体が消えます。横から出て最初からその機能があるもので作り直そうかと悩んでます。