質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.00%

アコーディオンで開いたメニューをスクロールしたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 5,926
退会済みユーザー

退会済みユーザー

素人でも申し訳ありませんが、質問させてください。

トグルでスマホ用のアコーディオンメニューを作成したのですが、
アコーディオンのメニューが長いため、開くとメニューが切れて表示されます。

メニューをスクロールさせたいのですが方法がわかりません。
メニューを開くとき、バックのhtmlはロックできたのですが…。

長々と申し訳ありませんが、どなたかご教授ください。

該当のソースコード

html
<nav>
 <div class="acco acco01 switch">
  <ul>
    <li>
     <a href="/" class="menu_none">menu1</a>
    </li>
    <li>
     <a class="toggle menu">menu2</a>
       <ul class="inner child child01">
         <li><a href="">sbumenu01</a></li>
         <li><a href="">sbumenu02</a></li>
         <li><a href="">sbumenu03</a></li>
         <li><a href="">sbumenu04</a></li>
         <li><a href="">sbumenu05</a></li>
         <li><a href="">sbumenu06</a></li>
       </ul>
   </li>
   <li>
     <a class="toggle menu">menu3</a>
       <ul class="inner child child01">
         <li><a href="">sbumenu01</a></li>
         <li><a href="">sbumenu02</a></li>
         <li><a href="">sbumenu03</a></li>
         <li><a href="">sbumenu04</a></li>
         <li><a href="">sbumenu05</a></li>
         <li><a href="">sbumenu06</a></li>
         <li><a href="">sbumenu07</a></li>
         <li><a href="">sbumenu08</a></li>
         <li><a href="">sbumenu09</a></li>
         <li><a href="">sbumenu09</a></li>
       </ul>
     </li>
    </ul>
  </div>
</nav>

<script type="text/javascript">
$(function() {
              $("#hamburger").click(function() {
                            $("#hamburger").hide();
                            $("nav").css("right","0px").css("top","0px");
                            $("#close").css("right","0").css("top","14px")
        $("#overlay").fadeIn();
                            $('body,html').addClass("fixed01"); 
                            return false;
              });           

              $("#close").click(function() {
                            $("#hamburger").show();
                            $(this).removeAttr("style");
                            $("nav").removeAttr("style");
                            $("#overlay").removeAttr("style");
                            $('nav').css({"content":"none"});
                            $('body,html').removeClass("fixed01");
              });           

                            $("#overlay").click(function() {
                            $("#hamburger").show();       
                            $(this).removeAttr("style");
                            $("nav").removeAttr("style");
                            $("#close").removeAttr("style");
                            $('body,html').removeClass("fixed01");
              });                         
});

$(function() {
    function accordion() {
    $(this).toggleClass("active").next().slideToggle(300);
    }
    $("nav .toggle").click(accordion);
});
</script>

<style>
#hamburger {
              display:block;
              position: fixed;
              top: 14px;
              right: 10px;
              z-index: 4;             
}

#close {
              display: block;
              position: fixed;
              width: 36px;
              height: 48px;
              top: -50px;
              right:0;
              z-index: 5;             
}             

#overlay {
    display: none;
    width: 100%;
    height:100%;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 1;
    background: rgba(0,0,0,0.3);
}

.fixed01 {
              overflow:hidden;
              height: 100%;
              position: fixed;
}

.menu {
  display: block;
  position: relative;
  padding: 10px;
  font-size: 13px;
}

nav {
    width: 100%;
    display:block;
    position: fixed;
              z-index: 2;
              border-top: none;  
              padding: 47px 0  0;
              margin: 0;
              top: -1000px;
              right: 0;
              transition-duration: 0.5s;
}

.acco {
  margin: 0;
}

.acco a {
    display: block;
              font-size:13px;
}

.acco .child {
    display: none;
    margin: 0 0 -1px;
    padding: 0;
    background: #fff;
    border: 1px solid #eaeaea;
}

.acco .child a {
              font-weight: normal;
}

.acco .child .menu {
      background: #eaeaea;
      color: #5e5e5e;
}
.acco .child .menu:hover {
      background: #d0d0d0;
}

.acco .child > li {
      margin: 4px 0;
      padding: 3px 16px;
      border-bottom: 1px dotted #dddddd;
}

.acco .child > li:last-child {
        border-bottom: 0;
}
.switch .menu:after {
              position: absolute;
             top: 50%;
             right: 10px;
             margin-top: -0.7em;
             content: '▸';
             font-size: 1.4em;
             -moz-transform: rotate(90deg);
             -ms-transform: rotate(90deg);
             -webkit-transform: rotate(90deg);
             transform: rotate(90deg);
             -moz-transition: all, 0.25s, linear;
             -o-transition: all, 0.25s, linear;
             -webkit-transition: all, 0.25s, linear;
             transition: all, 0.25s, linear;
}
.switch .menu.active:after {
              -moz-transform: translate(0, 50%);
             -ms-transform: translate(0, 50%);
             -webkit-transform: translate(0, 50%);
             transform: translate(0, 50%);
             -moz-transform: rotate(-90deg);
             -ms-transform: rotate(-90deg);
             -webkit-transform: rotate(-90deg);
             transform: rotate(-90deg);
}
.child01 {
  border: 1px solid #eaeaea;
}

.acco01 .menu {
              background: #006599;
             color: #fff;
             border-bottom:#005985 solid 1px;
}

.acco01 .menu:hover {
    background: #0079b8;
    text-decoration: none;
}

.acco .menu_none {
      background: #006599;
     color: #fff;
                padding: 10px;
                border-bottom:#005985 solid 1px;
}
.acco .menu_none:hover {
      background: #0079b8;
                text-decoration: none;
}
</style>

試したこと

課題に対してアプローチしたことを記載してください

補足情報(言語/FW/ツール等のバージョンなど)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/05/02 20:21

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/05/02 23:23

    ご指摘ありがとうございます。コードを選択して「<code>」ボタンを押しました。

    キャンセル

回答 2

checkベストアンサー

+2

提示されたHTML/CSSではそもそも必要な要素が足りていないので、正確な数値ではありませんが考え方としては下記のようにすればいけます。

nav {
    height: 90vh; /* 環境にあわせる */
    overflow-x: scroll;
}

動くサンプル:https://jsfiddle.net/feqm9vwk/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/03 09:12

    ご回答ありがとうございます。
    すみません、只今PCを触れる環境にいないため、
    GW明けにチャレンジしてみたいと思います。

    申し訳ありませんが、どうぞよろしくお願いいたします。

    キャンセル

  • 2017/05/09 13:55

    先ほど実装してみたところ、
    メニューがスクロールすることができました。
    ありがとうございます!!

    ずっとJSの書き方が問題なのかと思っていたので、目からうろこ状態です。

    ただJSの#overlayと、メニューの後ろの.fixedが同時に実装できないくなりました。
    .fixedについてはメニューがスクロール出来るようになったので、いらないかと思っています。

    もう少し試してみます。

    返信が遅れてしまい、申し訳ありませんでした。
    取り急ぎお礼申し上げます。

    キャンセル

+1

スマホのスクロール処理はなかなかうまくいかないですよね 汗
手前みその記事で申し訳ないですが、
ご参考にしてみてください。

http://highmoon-miyabi.main.jp/blog/2016/05/31_000424.html

あるブロックをスワイプした時に、
bodyのスクロールはさせずに、
ブロックの中身を擬似的にスクロールをさせる、
という方法の記事です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/02 23:25

    ご回答ありがとうございます。
    すみません、只今PCを触れる環境にいないため、
    GW明けにチャレンジしてみたいと思います。

    申し訳ありませんが、どうぞよろしくお願いいたします。

    キャンセル

  • 2017/05/09 14:01

    ご指示ありがとうございます。

    JSについては本当に初心者中の初心者で、なかなか理解できず…。
    実装することができませんでした。

    もうしばらく勉強が必要なようです。
    また何かありましたら、何卒よろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる