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

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

ただいまの
回答率

90.03%

メニューアイコンをクリックしたら下にメニューをスライドで表示させたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 782

aazzkk

score 13

jQueryを使用してアイコンをクリックするとリストが出現する(アイコンが右上にあるので、リストも右寄せで)というメニューを作りたいのですが、上手くできません(クリックしても表示されない)。
調べてもどこが間違っているのかわからなかったので、どなたか教えていただけないでしょうか?
web制作およびjQuery初心者につき、おかしな記述などございましたら、ご指摘いただけるとありがたいです。
何卒よろしくお願いいたします。

●html●

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="sstemp4.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title>template sample</title>
</head>

<body>
  <header>
    <div id="menu">
      <ul id="menu-list">
        <li><a href="#about">about</a></li><li>
        <a href="#main">main</a></li><li id="sitename">
        <a href="#"><span>Site Name</span></a></li><li>
        <a href="#bookmark">bookmark</a></li><li>
        <a href="#contact">contact</a></li>
      </ul>
    </div>

<!--    ここからスマホ・携帯用デザイン-->

    <div id="res-header">
      <div id="res-sitename">
        <a href="#">Site Name</a>
      </div>
      <div id="res-menu">
        <div id="res-menu-icon">
          <img src="img/menu.png">
        </div>
        <ul id="res-menu-list">
          <li><a href="#about">about</a></li>
          <li><a href="#main">main</a></li>
          <li><a href="#bookmark">bookmark</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      <div id="res-top-image">
        <img src="img/nature3.png">
      </div>
    </div>

<!--    ここまでスマホ・携帯用デザイン-->

  </header>

  <div id="wrapper">
    <div id="about" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>about</h2>
            <p>サイトについて</p>
          </div>
        </div>
        <div class="contents-main">
          <div id="site-title">
            Site Name(サイト名)
          </div>
          <p>シンプルなモノクロデザインのテンプレート。</p>
          <p>画面サイズ959px以下でメニューが切り替わります。</p>
          <div class="free-textarea">
            <p>更新履歴などにお使い下さい。</p>
            <p>-2018/02/04 main 追加</p>
            <p>-2018/02/03 main 追加</p>
            <p>-2018/01/30 bookmark 1件追加</p>
            <p>-2018/01/25 main 追加</p>
          </div>
        </div>
      </div>
    </div>
    <div id="main" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>main</h2>
            <p>メインコンテンツ</p>
          </div>
        </div>
        <div class="contents-main">メインコンテンツなど。</div>
      </div>
    </div>
    <div id="bookmark" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>bookmark</h2>
            <p>他サイト様へのリンク</p>
          </div>
        </div>
        <div class="contents-main">
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
          <div class="bookmark-list">
            <p><a href="">サンプル</a></p>
            <p>説明など説明など説明など説明など説明など</p>
          </div>
        </div>
      </div>
    </div>
    <div id="contact" class="link"></div>
    <div class="contents-wrapper">
      <div class="contents">
        <div class="contents-menu">
          <div class="contents-menu-title">
            <h2>お問い合わせ</h2>
            <p>何かご質問等ございましたらこちらからご連絡ください。</p>
          </div>
        </div>
        <div class="contents-main">
          <form>
            <p>お名前</p>
            <input>
            <p>メールアドレス</p>
            <input>
            <p>お問い合わせ内容</p>
            <textarea></textarea>
            <p>
              <input type="submit">
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>

  <footer>
  </footer>

<script src="jstemp4.js"></script>

</body>
</html>

●css●

@charset "utf-8";

* {
  box-sizing: border-box;
}

/*ここから共通の設定*/

html, body {
  height: 100%;
}

body {
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'MS ゴシック', sans-serif;
  font-weight: 500;
  background-image: url(img/wallpaper.png);
  background-attachment: fixed;
}

body, header, h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: 0.2s;
  color: rgb(100,100,100);
}

a:hover {
  opacity: 0.7;
}

header, #wrapper, footer {
  width: 100%;
} 

/*ここまで共通の設定*/


/*ここからスマホ・タブレット用*/

@media (max-width:959px){

  h2 {
    margin: 5px 0;
  }

  #menu-list {
    display: none;
  }

  #poem {
    display: none;
  }

  #res-sitename {
    text-align: center;
    padding: 20px;
  }

  #res-menu {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: right;
  }

  #res-menu-list {
    display: none;
    width: 70%;
  }

  #res-top-image img{
    width: 100%;
  }

  .contents {
    margin-top: 50px; 
    padding: 5px;
  }

  .free-textarea {
    width: 80%;
    height: 100px;
    font-size: 13px;
    padding: 3px;
    margin: 10px 0;
    resize: none;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    color: rgb(255,255,255);
  }

  footer {
    margin-top: 30px;
    background-color: rgba(0,0,0,0.7);
    color: rgb(200,200,200);
  }

  footer a {
    color: rgb(255,255,255);
  }
}

/*ここまでスマホ・タブレット用*/

/*ここからパソコン用*/

@media (min-width:960px){
  #res-header {
    display: none;
  }

  header {
    height: 100%;
    background-image: url(img/nature3.png);
    background-size: cover;
    text-align: center;
    display: table;
  }

  #poem {
    display: table-cell;
    vertical-align: middle;
    font-size: 180%;
    font-weight: 800;
    animation: sizeScale 5s ease 0.5s both;
    animation-iteration-count: 1;
    pointer-events: none;
  }

  #menu-list {
    width: 100%;
    list-style: none;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    position: fixed;;
    top: 0;
    left :0;
  }

  #menu-list li {
    display: inline-block;
  }

  #menu-list li a{
    display: block;
    padding: 15px;
    color: rgb(255,255,255);
  }

  #sitename span::before {
    content: "│";
    color: rgb(200,200,200);
  }

  #sitename span::after {
    content: "│";
    color: rgb(200,200,200);
  }

  .link {
    height: 70px;
    margin-top: 150px;
  }

  .contents-wrapper {
    width: 100%;
    padding: 50px;
    background-color: rgb(255,255,255);
  }

  .contents {
    display: table;
    margin: 0 auto;
    overflow: hidden;
  }

  .contents-menu {
    width: 200px;
    display: table-cell;
    vertical-align: top;
    text-align: center;
  }

  .contents-menu-title {
    height:200px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
    border: solid 1px rgba(0,0,0,0.5);
    border-radius: 100%;
    padding: 5px;
  }

  .contents-menu-title p {
    font-size: 70%;
  }

  .contents-main {
    display: table-cell;
    padding: 0 20px;
    width: 700px;
  }

  #site-title{
    font-size: 25px;
    margin-bottom: 20px;
  }

  .free-textarea {
    width: 500px;
    height: 100px;
    font-size: 13px;
    padding: 3px;
    margin: 10px 0;
    resize: none;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    color: rgb(255,255,255);
  }

  .bookmark-list {
    margin-bottom: 10px;
  }

  form input, form textarea {
    width: 300px;
  }

  form textarea {
    height: 200px;
    background-color: rgb(255,255,255);
  }

  footer {
    text-align: center;
    margin: 50px 0;
  } 
}

/*ここまでパソコン用*/


/*ここからアニメーション*/

@keyframes sizeScale {
  from {
    transform: scale(1,1);
  }
  to {
    transform: scale(1.3,1.3);
  }
}

/*ここまでアニメーション*/

●js●

$(function(){

  $('#res-menu-icon').click(function(){
    var $list='#res-menu-list';
    if($list.hasClass('open')){
      $list.removeClass('open');
      $list.slideUp();
    } else {
      $list.addClass('open');
      $list.slideDown();
    } 
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

ほとんどコードを読んでいませんが、下記部分は書き方が間違っています。

// var $list='#res-menu-list';
//            ↓                ↓
   var $list=$('#res-menu-list');

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/17 18:19

    無事表示されました。ありがとうございました。

    キャンセル

+1

全部のコードを貼られても。。
こう言う時は、何が原因で起こってるのか分からないので原因部分以外を削除してメニューだけにスコープしてデバッグすることをお勧めします!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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