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

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

ただいまの
回答率

88.93%

ハンバーガーメニューを押して、ナビゲーションを右から左に動かしたいが機能しない。

解決済

回答 1

投稿 編集

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

JavaScript, Css, HTMLに関する質問です。

ハンバーガーメニューを開いた時に、左に向かってナビゲーションを動かしたいのですが、
上手く機能しませんが、何故でしょうか。

私が実現したいこと
http://demo.tivel.jp/n/drawer/
デザインではなく、動的操作です。

分からないこと
なぜ、ハンバーガーメニューの画像を押しても、画面が動かないのか。
それはJava Scriptの記述が問題なのか、HTMLの構造に問題があるのか。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" type="text/css" href="css/style.css">

</head>


<body  id ="TOP" >


<div id ="inner-wrapping">
<header class = "clearfix" >
<h1><a href="#TOP"><img src="img/siteTitle.png" alt="title-logo"></a></h1>

<p class="humberger" id="humberger"><a href=""><img src="https://tzcat.com/wp-content/uploads/2017/04/btn03-18.png" alt="img" width=64px;></a></p>

<div class="header-right">
      <p style="font-size:10px">"地域にねづいた歯科医院"デンタルクリニック</p>
      <h2 style="margin-top:10px;">📞03-0000-0000 </h2>
     <p style="font-size:10px;margin-top:5px;margin-bottom: 10px;" class="yoyaku">予約受付時間 10:00~19:30 <a style="color:red;">日祝 </a>休診</p>
</div>
</header>


<nav class="">
      <ul>
      <li class ="first"><a href="#TOP">トップページ<br>HOME</a></li>
      <li><a href="#clinic">医院紹介<br>CLINIC</a></li>
      <li><a href="#service">診察案内<br>SERVICE</a></li>
      <li><a href="#staff">院長/スタッフ紹介<br>STAFF</a></li>
      <li class ="last"><a href="./access.html">アクセス/Q&A<br>Access</a></li>
      </ul>
</nav>

<main>

<div id ="wrapper" class="clearfix" style="margin-top: 20px;">
  <div class = "left-content" style="">
  <div class = "top">
    <h2>一般歯科</h2>
  <ul class ="first">
      <li><a class ="txt">虫歯治療</a></li>
      <li><a class ="txt">歯周病治療</a></li>
      <li><a class ="txt">入れ歯</a></li>
      <li class="first-last"><a class ="txt">予防歯科</a></li>
  </ul>
</div>

<div class="bottom">
    <h2>審美歯科</h2>
    <ul class ="second">
      <li><a class ="txt">ホワイトニング</a></li>
      <li><a class ="txt">オールセラミック</a></li>
      <li><a class ="txt">セラミックインレー</a></li>
      <li class="first-last"><a class ="txt">PMTC</a></li>
    </ul>
</div>

  </div>

    <div class ="right-content clearfix">
    <p><img src="./img/clinic.jpg" alt="clinic" ></p>

<div id ="imformation">
   <h2 style="border-bottom:3px solid #6CC6C4;font-size:20px;padding:5px;text-align:left;">新着情報</h2>

  <div class ="imfor-dl">

  <dl class="clearfix">
    <dd>2012/08/01</dd>
    <dt>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</dt>
    <dd>2012/07/24</dd>
    <dt>【8月の休診のお知らせ】8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</dt>
    <dd>2012/07/02</dd>
    <dt>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております</dt>
  </dl>

  </div>
</div>
    </div>

</div>
<p class="top-page" style="display: none; position:fixed; right:10px; bottom:10px; "> <a href="#"><img src="img/page-top.png" alt="top-page"></a></p>
</main>

<footer style="background-color: #6CC6C4;color:#fff;">
    <ul>
      <li>トップページ</li>
      <li>医師紹介</li>
      <li>診察案内</li>
      <li>院長/スタッフ紹介</li>
      <li>アクセス</li>
    </ul>
</footer>

<p style="width:1050px; margin:0 auto; padding:10px;border-bottom:solid 3px #6CC6C4">デンタル クリニック 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
<p style="padding:10px;font-size:0.8em">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>

</div>
</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>

 <script>
  $(document).ready(function(){
  $('#humberger').on('click', function(){
  $('nav, #inner-wrapping').toggleclass('show');
});
});
 </script>
*,p,div,ul,article,section,footer,header{
margin:0;
padding: 0;
}

img{
vertical-align:bottom;
}

body{
border-top: solid 8px #6CC6C4;
background-color: #F6F6F6;
}

a,p,h1,h2,h3{
text-align:center;
font-family:sans-serif;
}

header{
width:1050px;
margin:0 auto;
margin-bottom:10px;
}

header h1{
float:left;
padding:35px;
padding-left: 0px;
}

.header-right{
float:right;
padding-top:10px;
margin-right: 3px;
}

.humberger{
float: right;
}

p.yoyaku{
border:solid 1px #D6D6D6;
padding:10px;
}

ul{
list-style: none;
}

nav{
display:block;
position: fixed;
right:-100vw;
top:-8px;
height:100%;
width:280px;
}

nav ul{
clear:both;
}

nav ul li{
justify-content: center;
background-color: #6CC6C4;
width:260px;
padding:10px;
text-align:center;
border-bottom:1px solid white;
}

nav ul li a{
color:white;
text-decoration:none;
font-size:0.85em;
}

.show{
 transform: translate3d(-280px, 0,  0);
}

.clearfix::after{
clear:both;
display:block;
content:"";
}

main,footer{
width:1050px;
margin:0 auto;
}

main{
border: solid 1px inherit;
}

#wrapper{
width:100%;
}

.left-content{
width:25%;
float:left;
}

.top h2,
.bottom h2{
  background-color: #6CC6C4;
  color:white;
  font-size:1em;
  text-align:left;
  padding:10px;
  border-radius: 6px 6px 0px 0px;
}

.left-content ul{
border-right: 1px solid #6CC6C4;
border-left: 1px solid #6CC6C4;
background-color: white;
}

.left-content ul li{
background-color: white;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid #6CC6C4;
font-size:0.9em;
}

.left-content ul li::before{
content:"●";
color:#6CC6C4;
font-size:0.8em;
}

.left-content ul li a{
margin-left: 5px;
}

.first-last{
border-bottom:0px;
}

.top{
margin-bottom:15px;
}

.right-content{
width:73%;
float:right;
}

.right-content p{
width:762px;
}

.right-content img{
  vertical-align: bottom;
      width: 762px;
      max-width: 100%;
      height: auto;
}

#imformation{
width:99.5%;
background-color: white;
padding:0;
}

.imfor-dl{
margin-bottom: 50px;
}

dl{
padding:5px;
}

dd{
width:30%;
padding:10px;
padding-left: 0px;
padding-bottom: 15px;
float:left;
}

dt{
border-bottom: 1px dashed #6CC6C4;
padding-bottom: 6px;
padding-top: 6px;
}

/*ここから質問と回答コーナー*/
#qa-wrapper{
clear: both;
content: "";
padding-bottom: 50px;
text-align: center;
}
.qablock{
  position: relative;
  margin-bottom: 20px;
  background: #eee9e6;
  border:1px solid #eee9e6;
}
.question_txt{
  cursor: pointer;
  padding:5px 15px;
  padding: 10px;
  margin: 10px !important;
  border-bottom: 1px dashed #6f5436;
}
.qicon{
  color: #6f5436;
  font-weight: bold;
  margin-right:15px;
}
.answer_txt{
  margin: 0px !important;
  padding: 10px 15px;
}
.show_button{
  position: absolute;
  bottom:0px;
  right:0px;
  width:43px;
  height:43px;
}
.show_button::after{
  content: '▲'!important;
  display: block;
  text-align: center;
  width: 43px;
  height: 43px;
  line-height: 43px;
  top: 0;
  left: 0;
  margin-left: 0px;
  margin-top: 0px;
  color:#b4ada9;
}
.question_txt::after{
  content: '▼'!important;
  width: 43px;
  height: 43px;
  line-height: 43px;
  top: 0;
  left: 0;
  margin-left: 5px;
  margin-top: 0px;
  color:#b4ada9;
}
.qa{
  background: #fff;
}
.active{
display: block;
}
.close{
display: none;
}


/*ここからfooter*/
footer{
background-color: #6CC6C4;
border-radius:5px ;
color:white;
}

footer ul{
display:flex;
}

footer li{
justify-content: space-around;
margin-right: auto;
margin-left: auto;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

こんばんは。

typoです。
toggleclasstoggleClass

.toggleClass() | jQuery API Documentation

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/07 19:04

    もしかすると、再度質問させていただくかもしれません。

    キャンセル

  • 2020/07/07 19:06

    お役に立てることがあれば喜んで。

    キャンセル

  • 2020/07/07 22:10

    解決出来ました!ありがとうございます.
    ただ、見た目がイマイチです涙

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る