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

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

ただいまの
回答率

87.37%

みハンバーガータブを展開している時にだけnavとリストに色を付けたいです。

解決済

回答 1

投稿 編集

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

score 3

前提・実現したいこと

ポートフォリオ用のサイトを作っています。
レスポンシブルでスマホで見た時にハンバーガータブが出るようにしたのですが
ハンバーガーをクリックし展開した時のnav全体にうまく色(#004448c9)が付けられません。
該当する箇所はham-menuです。

この部分全体に色が付けたいです。

ハンバーガーを閉じている時には色(#004448c9)はつかないようにしたい**のですが
ham-menuにbackground-colorで指定すると閉じた時にも色が反映されてしまいます。

閉じた時はこの部分に色がつかないようにしたいです。

↑こんな風にはならないようにしたいです。

詳しい方何卒ご教授よろしくお願いいたします。

HTML

<header class="main_nav green">

  <nav class="menu">
    <ul>

      <li class="current"><a href="index.html">HOME</a></li>
        <li class="current"><a href="#about">ABOUT</a></li>
        <li class="current"><a href="contact.html">CONTACT</a></li>
        <li class="current"><a href="contact.html">STORE</a></li>

    </ul>
  </nav>



<aside id="sideber">



    <a title="Close menu" id="close-menu">

      <nav class="ham-menu">
        <button class="hamburger hamburger--elastic" type="button">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>

    </a>



    <ul class="main_nav expanded" id="main-nav">
      <li class="site-link close-icon">
      <a title="close menu" id="close-menu"></a>
    </li>


      <li class="current"><a href="index.html">HOME</a></li>
        <li class="current"><a href="#about">ABOUT</a></li>
        <li class="current"><a href="contact.html">CONTACT</a></li>
        <li class="current"><a href="#.html">STORE</a></li>
    </ul>
  </nav>
</aside>





    <div class="container">
        <div class="twelve columns">

<div class="logo"><a href="index.html">Art By Aya</a></div>

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

style.css

/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main{padding-top:3%;}
.row{padding: 2% 0;}
.green{background-color:#00a3af;}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––– */
body{
    font-family: 'Abel',sans-serif;
    font-size: 1.5em;
    color: #000;
}
h2{
    font-family: 'Arvo', serif;
    font-size: 3em;
    margin: 0.67em;
}
h2.bio{color:#003033 ;}
p.bio{color: #fff;}

/* Header & Navigation
–––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
    margin: auto;
    padding: 1% 0;
    display: block;
}

/* Navi */

header ul {
  list-style-type: none;

  height: 0px;
  background-size: cover;
}

header li {
  display: inline-block;
  padding:4px 20px;
  font-size: 15px;
}

header li > a {
  text-decoration: none;
  color: #FFF;
}

header li > a:hover {
  color:  50%;
}

.current a {
  position: relative;
  display: inline-block;
  transition: .3s;
    color: #fff ;
}
.current a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #fff;
  transition: .3s;
}
.current a:hover::after {
  width: 100%;
}

.menu {
    margin: auto;

}
.ham-menu {
    display: none;
    z-index: 1;
    color: #004448c9;
}

.ham-menu li {

    display: none;
  overflow-y: scroll;
    background-color: #004448c9;
    overflow: auto;

}



.ham-menu li a {
    color: #fff;
}

.ham-menu li.is-active {
    display: block;
}




@media only screen and (max-width: 400px) {

#main-nav.expanded {
display: block;
width: 252px;
height: auto;
top: 0;
left: 0;
white-space: nowrap;
padding-bottom: 44px;
overflow: hidden;
}}




@media screen and (max-width: 400px) {
  .menu {
        display: none;
    }
    .ham-menu {
        display: block;
        position: absolute;
        top: 0;
        left:0;
        color: #004448c9;
    }}

    @media only screen and (max-width: 400px) {
    .ham-menu li {
        padding-top: 11px;
        padding-bottom: 11px;
            margin-bottom: -0.1px;
    }
    .current a {
        width: 200px;
    }

    .header ui {
        padding-left: -30px
    }
}




/* 真ん中の文字 */

.logo{
    margin: 5% auto;
    text-align: center;
}
.logo a{
    font-size: 3.5em;
    color: #fff;
    text-decoration: none;
    border: 3px solid #fff;
    text-transform: uppercase;
    padding: 2px 10px 0 10px;
    margin: 0;
}
.logo a:hover{
    background-color: #fff;
    color: #7accc8;
}
/* Images & Media
–––––––––––––––––––––––––––––––––––––––––––––– */
img{max-width: 100%;}
img.avatar{
    border-radius: 400px;
    border: 7px solid #00becc ;
}
img:hover{opacity:0.8;}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */
ul.social{
    display: block;
    margin: 5% 0;
    list-style-type: none;
    text-align: center;
}
ul.social li{
    font-size: 3em;
    display: inline;
    padding: 0 2%;
}
ul.social li a{
    color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
/* ul.social li.twitter a:hover{color: rgb(0,172,237);} */
ul.social li.instagram a:hover{color: #D93177;}
ul.social li.youtube a:hover{color: #cd201f;}
ul.social li.flickr a:hover{color: rgb(255,0, 132);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}

p.copyright{
    text-align: center;
    color: #666;
    font-size: 1em;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile */
@media (max-width: 479px) {
    .logo a{font-size: 2em;}
    .main{padding-top:15%;}
    .portfolio img{margin-bottom: 10%;}
    img.avatar{margin-top: 15%;}
    h2.bio{font-size: 2.5em;}
    p.bio{font-size: 1.25em;color: #3f7f7c;}
    ul.social li a{font-size: .75em;}
}

JavaScript

$('.hamburger').click(function() {
$('.hamburger').toggleClass('is-active');
$('.ham-menu li').toggleClass('is-active');

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

macbookとAtomエディタとクロームで作業しています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

こんばんは。
簡単にできそうなのは

  • hamburgerがクリックされたときに .ham-menu に対して toggleClass('is-active')する
  • cssで.ham-menu.is-active に背景色を設定しておく

とかでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/18 19:47

    速攻で解決しました!本当に助かりました!ありがとうございます!😸

    キャンセル

  • 2019/08/18 22:08

    よかったです!👍

    キャンセル

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

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

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