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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

565閲覧

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

waniradio

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/17 11:16

編集2019/08/17 11:22

前提・実現したいこと

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

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

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

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

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

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

#HTML

html

1 2 3<header class="main_nav green"> 4 5 <nav class="menu"> 6 <ul> 7 8 <li class="current"><a href="index.html">HOME</a></li> 9 <li class="current"><a href="#about">ABOUT</a></li> 10 <li class="current"><a href="contact.html">CONTACT</a></li> 11 <li class="current"><a href="contact.html">STORE</a></li> 12 13 </ul> 14 </nav> 15 16 17 18<aside id="sideber"> 19 20 21 22 <a title="Close menu" id="close-menu"> 23 24 <nav class="ham-menu"> 25 <button class="hamburger hamburger--elastic" type="button"> 26 <span class="hamburger-box"> 27 <span class="hamburger-inner"></span> 28 </span> 29 </button> 30 31 </a> 32 33 34 35 <ul class="main_nav expanded" id="main-nav"> 36 <li class="site-link close-icon"> 37 <a title="close menu" id="close-menu"></a> 38 </li> 39 40 41 <li class="current"><a href="index.html">HOME</a></li> 42 <li class="current"><a href="#about">ABOUT</a></li> 43 <li class="current"><a href="contact.html">CONTACT</a></li> 44 <li class="current"><a href="#.html">STORE</a></li> 45 </ul> 46 </nav> 47</aside> 48 49 50 51 52 53 <div class="container"> 54 <div class="twelve columns"> 55 56<div class="logo"><a href="index.html">Art By Aya</a></div> 57 58 </div> 59 </div> 60</header>

#style.css

style.css

1/* Table of Contents 2–––––––––––––––––––––––––––––––––––––––––––––– 3- General Content 4- Typography 5- Header & Navigation 6- Images & Media 7- Footer 8- Media Queries 9–––––––––––––––––––––––––––––––––––––––––––––– */ 10 11/* General Content 12–––––––––––––––––––––––––––––––––––––––––––––– */ 13.main{padding-top:3%;} 14.row{padding: 2% 0;} 15.green{background-color:#00a3af;} 16 17/* Typography 18–––––––––––––––––––––––––––––––––––––––––––––– */ 19body{ 20 font-family: 'Abel',sans-serif; 21 font-size: 1.5em; 22 color: #000; 23} 24h2{ 25 font-family: 'Arvo', serif; 26 font-size: 3em; 27 margin: 0.67em; 28} 29h2.bio{color:#003033 ;} 30p.bio{color: #fff;} 31 32/* Header & Navigation 33–––––––––––––––––––––––––––––––––––––––––––––– */ 34header.main_nav{ 35 margin: auto; 36 padding: 1% 0; 37 display: block; 38} 39 40/* Navi */ 41 42header ul { 43 list-style-type: none; 44 45 height: 0px; 46 background-size: cover; 47} 48 49header li { 50 display: inline-block; 51 padding:4px 20px; 52 font-size: 15px; 53} 54 55header li > a { 56 text-decoration: none; 57 color: #FFF; 58} 59 60header li > a:hover { 61 color: 50%; 62} 63 64.current a { 65 position: relative; 66 display: inline-block; 67 transition: .3s; 68 color: #fff ; 69} 70.current a::after { 71 position: absolute; 72 bottom: 0; 73 left: 0; 74 content: ''; 75 width: 0; 76 height: 1px; 77 background-color: #fff; 78 transition: .3s; 79} 80.current a:hover::after { 81 width: 100%; 82} 83 84.menu { 85 margin: auto; 86 87} 88.ham-menu { 89 display: none; 90 z-index: 1; 91 color: #004448c9; 92} 93 94.ham-menu li { 95 96 display: none; 97 overflow-y: scroll; 98 background-color: #004448c9; 99 overflow: auto; 100 101} 102 103 104 105.ham-menu li a { 106 color: #fff; 107} 108 109.ham-menu li.is-active { 110 display: block; 111} 112 113 114 115 116@media only screen and (max-width: 400px) { 117 118#main-nav.expanded { 119display: block; 120width: 252px; 121height: auto; 122top: 0; 123left: 0; 124white-space: nowrap; 125padding-bottom: 44px; 126overflow: hidden; 127}} 128 129 130 131 132@media screen and (max-width: 400px) { 133 .menu { 134 display: none; 135 } 136 .ham-menu { 137 display: block; 138 position: absolute; 139 top: 0; 140 left:0; 141 color: #004448c9; 142 }} 143 144 @media only screen and (max-width: 400px) { 145 .ham-menu li { 146 padding-top: 11px; 147 padding-bottom: 11px; 148 margin-bottom: -0.1px; 149 } 150 .current a { 151 width: 200px; 152 } 153 154 .header ui { 155 padding-left: -30px 156 } 157} 158 159 160 161 162/* 真ん中の文字 */ 163 164.logo{ 165 margin: 5% auto; 166 text-align: center; 167} 168.logo a{ 169 font-size: 3.5em; 170 color: #fff; 171 text-decoration: none; 172 border: 3px solid #fff; 173 text-transform: uppercase; 174 padding: 2px 10px 0 10px; 175 margin: 0; 176} 177.logo a:hover{ 178 background-color: #fff; 179 color: #7accc8; 180} 181/* Images & Media 182–––––––––––––––––––––––––––––––––––––––––––––– */ 183img{max-width: 100%;} 184img.avatar{ 185 border-radius: 400px; 186 border: 7px solid #00becc ; 187} 188img:hover{opacity:0.8;} 189 190/* Footer 191–––––––––––––––––––––––––––––––––––––––––––––– */ 192ul.social{ 193 display: block; 194 margin: 5% 0; 195 list-style-type: none; 196 text-align: center; 197} 198ul.social li{ 199 font-size: 3em; 200 display: inline; 201 padding: 0 2%; 202} 203ul.social li a{ 204 color: #666; 205} 206ul.social li.facebook a:hover{color: rgb(59,89,152);} 207/* ul.social li.twitter a:hover{color: rgb(0,172,237);} */ 208ul.social li.instagram a:hover{color: #D93177;} 209ul.social li.youtube a:hover{color: #cd201f;} 210ul.social li.flickr a:hover{color: rgb(255,0, 132);} 211ul.social li.linkedin a:hover{color: rgb(0, 123,182);} 212 213p.copyright{ 214 text-align: center; 215 color: #666; 216 font-size: 1em; 217} 218 219/* Media Queries 220–––––––––––––––––––––––––––––––––––––––––––––– */ 221/* Larger than mobile */ 222@media (max-width: 479px) { 223 .logo a{font-size: 2em;} 224 .main{padding-top:15%;} 225 .portfolio img{margin-bottom: 10%;} 226 img.avatar{margin-top: 15%;} 227 h2.bio{font-size: 2.5em;} 228 p.bio{font-size: 1.25em;color: #3f7f7c;} 229 ul.social li a{font-size: .75em;} 230}

#JavaScript

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

とかでしょうか。

投稿2019/08/17 16:20

8zca

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

waniradio

2019/08/18 10:47

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

2019/08/18 13:08

よかったです!????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問