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

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ブラウザのほとんどに搭載されています。

Q&A

0回答

952閲覧

ヘッダーのカスタマイズについて

io-rin

総合スコア13

CSS3

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

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2017/12/08 10:24

編集2022/01/12 10:55

現在下記の様なヘッダーを作成しています。
https://jsfiddle.net/v0tqd2v1/3/?utm_source=website&utm_medium=embed&utm_campaign=v0tqd2v1

html

1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 3<div class="menu-container"> 4 <div class="menu"> 5 <ul class="menu-list"> 6 <li><a href="#">Home</a></li> 7 <li><a href="#">Product</a> 8 <ul> 9 <li><a href="#">Product</a> 10 <ul> 11 <li><a href="#">ほにゃらら</a></li> 12 <li><a href="#">ほげほげ</a></li> 13 <li><a href="#">ほにゃらら</a></li> 14 <li><a href="#">ほげほげ</a></li> 15 </ul> 16 </li> 17 <li><a href="#">Product</a> 18 <ul> 19 <li><a href="#">ほにゃらら</a></li> 20 <li><a href="#">ほげほげ</a></li> 21 <li><a href="#">ほにゃらら</a></li> 22 <li><a href="#">ほげほげ</a></li> 23 </ul> 24 </li> 25 <li><a href="#">Product</a> 26 <ul> 27 <li><a href="#">ほにゃらら</a></li> 28 <li><a href="#">ほげほげ</a></li> 29 <li><a href="#">ほにゃらら</a></li> 30 <li><a href="#">ほげほげ</a></li> 31 </ul> 32 </li> 33 <li><a href="#">Product</a> 34 <ul> 35 <li><a href="#">ほにゃらら</a></li> 36 <li><a href="#">ほげほげ</a></li> 37 <li><a href="#">ほにゃらら</a></li> 38 <li><a href="#">ほげほげ</a></li> 39 </ul> 40 </li> 41 </ul> 42 </li> 43 <li><a href="#">Blog</a> </li> 44 <li><a href="#">Contact</a></li> 45 </ul> 46 </div> 47</div>

css

1* { 2 box-sizing: border-box; 3 font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', 'メイリオ', 'Meiryo', Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif; 4} 5 6a { 7 color: #333; 8} 9 10.menu-container { 11 width: 100%; 12 margin: 0 auto; 13 background: #fff; 14} 15 16.menu-mobile { 17 display: none; 18 padding: 20px; 19} 20 21.menu-mobile:after { 22 content: "\f103"; 23 font-family: "FontAwesome"; 24 font-size: 2.5rem; 25 padding: 0; 26 float: right; 27 position: relative; 28 top: 50%; 29 transform: translateY(-25%); 30} 31 32.menu-dropdown-icon:before { 33 content: "\f103"; 34 font-family: "FontAwesome"; 35 display: none; 36 cursor: pointer; 37 float: right; 38 padding: 1.5em 2em; 39 background: #fff; 40 color: #333; 41} 42 43.menu > ul { 44 margin: 0 auto; 45 width: 100%; 46 list-style: none; 47 padding: 0; 48 position: relative; 49 text-align: center; 50 /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ 51 -webkit-box-sizing: border-box; 52 -moz-box-sizing: border-box; 53 box-sizing: border-box; 54} 55 56.menu > ul:before, 57.menu > ul:after { 58 content: ""; 59 display: table; 60} 61 62.menu > ul:after { 63 clear: both; 64} 65 66.menu > ul > li { 67 display: inline-block; 68 background: #fff; 69 padding: 0; 70 margin: 0; 71} 72 73.menu > ul > li a { 74 text-decoration: none; 75 padding: .5em 3em; 76 display: block; 77} 78 79.menu > ul > li:hover { 80 background: #f0f0f0; 81 color: #red; 82} 83 84.menu > ul > li > ul { 85 display: none; 86 width: 100%; 87 background: #fff; 88 padding: 20px; 89 position: absolute; 90 z-index: 99; 91 left: 0; 92 margin: 0; 93 list-style: none; 94 -webkit-box-sizing: border-box; 95 -moz-box-sizing: border-box; 96 box-sizing: border-box; 97} 98 99.menu > ul > li > ul:before, 100.menu > ul> li > ul:after { 101 content: ""; 102 display: table; 103} 104 105.menu > ul > li > ul:after { 106 clear: both; 107} 108 109.menu > ul > li > ul > li { 110 margin: 0; 111 padding-bottom: 0; 112 list-style: none; 113 width: 25%; 114 background: none; 115 float: left; 116} 117 118.menu > ul > li > ul > li a { 119 color: #777; 120 padding: .2em 0; 121 width: 95%; 122 display: block; 123 border-bottom: 1px solid #ccc; 124} 125 126.menu > ul >li > ul > li > ul { 127 display: block; 128 padding: 0; 129 margin: 10px 0 0; 130 list-style: none; 131 -webkit-box-sizing: border-box; 132 -moz-box-sizing: border-box; 133 box-sizing: border-box; 134} 135 136.menu > ul > li > ul > li > ul:before, 137.menu > ul > li > ul > li > ul:after { 138 content: ""; 139 display: table; 140} 141 142.menu > ul > li > ul > li > ul:after { 143 clear: both; 144} 145 146.menu > ul > li > ul > li > ul > li { 147 float: left; 148 width: 100%; 149 padding: 10px 0; 150 margin: 0; 151 font-size: .8em; 152} 153 154.menu > ul > li > ul > li > ul > li a { 155 border: 0; 156} 157 158.menu > ul > li > ul.normal-sub { 159 width: 300px; 160 left: auto; 161 padding: 10px 20px; 162} 163 164.menu > ul > li > ul.normal-sub > li { 165 width: 100%; 166} 167 168.menu > ul > li > ul.normal-sub > li a { 169 border: 0; 170 padding: 1em 0; 171} 172 173@media only screen and (max-width: 959px) { 174 .menu-container { 175 width: 100%; 176 } 177 .menu-mobile { 178 display: block; 179 } 180 .menu-dropdown-icon:before { 181 display: block; 182 } 183 .menu > ul { 184 display: none; 185 } 186 .menu > ul > li { 187 width: 100%; 188 float: none; 189 display: block; 190 } 191 .menu > ul> li a { 192 padding: 1.5em; 193 width: 100%; 194 display: block; 195 } 196 .menu > ul > li > ul { 197 position: relative; 198 } 199 .menu > ul > li > ul.normal-sub { 200 width: 100%; 201 } 202 .menu > ul > li > ul > li { 203 float: none; 204 width: 100%; 205 margin-top: 20px; 206 } 207 .menu > ul > li > ul > li:first-child { 208 margin: 0; 209 } 210 .menu > ul > li > ul > li > ul { 211 position: relative; 212 } 213 .menu > ul > li > ul > li > ul > li { 214 float: none; 215 } 216 .menu .show-on-mobile { 217 display: block; 218 } 219}

js

1$(document).ready(function() { 2 3 "use strict"; 4 5 $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon'); 6 $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); 7 $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>"); 8 $(".menu > ul > li").hover(function(e) { 9 if ($(window).width() > 943) { 10 $(this).children("ul").stop(true, false).fadeToggle(150); 11 e.preventDefault(); 12 } 13 }); 14 $(".menu > ul > li").click(function() { 15 if ($(window).width() <= 943) { 16 $(this).children("ul").fadeToggle(150); 17 } 18 }); 19 $(".menu-mobile").click(function(e) { 20 $(".menu > ul").toggleClass('show-on-mobile'); 21 e.preventDefault(); 22 }); 23}); 24

やりたいこと。
・画面が小さくなった時(アコーディオン)になった時メガメニューを表示させない。
※PCなど画面が大きいときは表示させる
・アコーディオンになった際、 $(".menu > ul").before("<a href="#" class="menu-mobile">menu</a>");のmenuの部分を画像(ロゴ)にしたい。
です。
よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問