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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    495questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

drawerメニューで×ボタンで閉じるとハンバーガーアイコンが消えてしまう

解決済

回答 2

投稿

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

heyhey...

score 8

drawerメニューを設置しております。
問題なく動いているのですが、1つだけ、メニューを開いた後に×ボタンでメニューを閉じた時に、
ハンバーガーアイコンも一緒に消えてしまいます。
メニュー以外の部分をクリックしても閉じるのですが、この場合はアイコンは消えません。
何か解決策はないでしょうか。
ご教授いただければ幸いです。

HTML

<div id="spheader" class="sp_only">
<div class="header_l"><a href="/"><img src="/img/sp/logo.png" alt=""></a></div>
<div class="header_r">
        <button type="button" class="drawer-toggle drawer-hamburger">
            <span class="sr-only">toggle navigation</span>
            <span class="drawer-hamburger-icon"></span>
        </button>
        <nav class="drawer-nav" role="navigation">
            <ul class="drawer-menu">
                <li><a class="drawer-menu-item" href="/">トップページ</a></li>
                <li><a class="drawer-menu-item" href="/concept">コンセプト</a></li>
                <li><a class="drawer-menu-item" href="/menu3">メニュー3</a></li>
                <li><a class="drawer-menu-item" href="/menu4">メニュー4</a></li>
                <li><a class="drawer-menu-item" href="/menu5">メニュー5</a></li>
                <li><a class="drawer-menu-item" href="/menu6">メニュー6</a></li>
                <li><a class="drawer-menu-item" href="/menu7">メニュー7</a></li>
                <li><a class="drawer-menu-item" href="/menu8">メニュー8</a></li>
                <li><a class="drawer-menu-item" href="/menu9">メニュー9</a></li>

</ul>
</nav>
</div>
</div>

CSS

.drawer-hamburger {/* トグルの位置調整など 固定にするときはposition:fix;*/
position:absolute;
right:10px;
top:5vw;
    width: 40px;
    height:40px;
        padding: 7px 8px 10px 10px;
     background-color:#f08437;
    box-sizing: border-box;
    border-radius:5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    line-height:20px;
    z-index:99999;
        }
.drawer-hamburger-icon {
  margin-top:5px
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {/* トグルの色調整*/
     background-color:#fff;
}
.drawer-hamburger-txt{
    color:#fff;
    font-size:50%;
    font-weight:bold;
display:block;
margin-top:15px;
}
.drawer-nav {/* トグル開いた後のメニューの全体構成 */
background-color:rgba(240,132,55,0.8);
z-index:99999;
}
ul.drawer-menu {
  width: 90%;
  margin: 0 auto; }

.drawer-menu-item {
  padding: 10px 10px 6px  10px;
  display: block;
  color: #fff;
  border-bottom: 1px solid #ffb783;
  font-size: 14px; 
  text-align:center;
  }
  .drawer-menu-item:visited {
    color: #fff; }
  .drawer-menu-item:hover {
    color: #fff; }
  .drawer-menu-item:link {
    color: #fff; }
.bnone{
    border:none !important;
}
   li.menubtn .drawer-menu-item{
        border:none;
     padding: 16px 10px 16px 10px;
     border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
    background-color:rgba(119,16,47,0.6);
    margin-bottom:10px;
}
    li.menubtn .drawer-menu-item .fa{
margin-right:15px;
}
   li.menubtn_tel .drawer-menu-item{
    text-align:center;
    background-color:#ba0631;
  padding: 10px 0;
    margin:40px 0 10px 0;
        border:none;
}
   li.menubtn_tel .drawer-menu-item img{
width:100%;
margin:0 auto;
}

javascript

/*drawerメニュー*/
$(document).ready(function() {
     $('.drawer').drawer();
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

自己解決しました!
クローズした時の色が消えていただけだったので、

.drawer-close .drawer-hamburger {
     background-color:#f08437;
}

を追加したらバッチリでした。
回答いただいたbfkさん、ありがとうございました!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

javascriptのコードが足りないようなのですが、これはdrawer.jsのようなライブラリを使用しているということでしょうか??

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/09 15:18

    回答ありがとうございます。その通りです。
    footerで<script src="/js/drawer.js"></script>
    を読み込んでおります。
    ちなみにwordpressです。
    headerで読み込むとjavascriptが動きませんでした。
    自前のテーマではなく他者のテーマのカスタマイズなので、このような事態になったことがなく、原因の追究が出来ないです。。><

    キャンセル

  • 2018/07/09 16:11

    javascriptに記述のある、$('.drawer')のclassがhtml側に存在しないようなので、htmlのソースも足りないのかもしれません…

    キャンセル

  • 2018/07/09 16:15

    情報が足りない箇所だらけで申し訳ございません。
    <body class="drawer drawer--right">
    で読み込んでおります!
    drawerではbodyタグにこれを入れるのが必須のようです
    http://git.blivesta.com/drawer/

    動いてはいるのでCSSの追記とかでなんとかなりそうな気がしているのですが、、
    ハンバーガーアイコンが消えないでいるにはどうしたらいいでしょうか・・

    キャンセル

  • 2018/07/09 16:22

    ちなみにですが、↑で貼って頂いたリンク先に以下のcssを読むように指定がありますがこれは読んでいますでしょうか??
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    495questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。