Q&A
質問を読んで頂きましてありがとうございました。
calc()はこちらに投稿する前に試してみたのですが、体裁が崩れてしまい調整できずじまいでした。
やはりJSを使わないと難しそうですね。
JSは苦手なのですが、それも視野に入れてどのようにこのメニューデザインを実装するか検討してみます。
ありがとうございました。
3階層仕立てのメニュー製作で行き詰まっております。
黒帯メニューの「ニュース」をマウスオーバーすると2階層目の青色帯が出てきます。
3階層目は「今日のニュース」にマウスオーバーすると出てきます。
青色帯を左右いっぱいまで延ばしたいのですが、
CSSの二つ目にある「.navinner」にしている以下指定が2階層目の青色帯の幅に影響を与えて
両サイドまで延ばせなく困っています。
width: 1000px; ←1階層目のナビゲーションの幅（コンテンツの幅が1000pxなので）
position: relative;
解決策がありましたらご教授頂けると助かります。
不足情報などありましたらお知らせください。
どうぞ宜しくお願いいたします。
該当のソースコード
html
1<div class="navwrap"> 2 <div class="navinner"> 3 <nav> 4 <ul class="menu"> 5 <li class="menu_mega"> 6 <a href="#" class="init-bottom">新着情報</a> 7 <ul class="menu_second_level po01"> 8 <li class="menu_single"> 9 <a href="#" class="init-bottom">今日のニュース</a> 10 <ul class="menu_third_level third01"> 11 <li><a href="#">01三階層目</a></li> 12 <li><a href="#">02三階層目</a></li> 13 </ul> 14 </li> 15 <li class="menu_single"> 16 <a href="#" class="init-bottom">明日のニュース</a> 17 <ul class="menu_third_level third02"> 18 <li><a href="#">01ニュース</a></li> 19 <li><a href="#">02ニュース</a></li> 20 </ul> 21 </li> 22 </ul> 23 </li> 24 <li class="menu_mega"> 25 <a href="#" class="init-bottom">シシシシシシ</a> 26 <ul class="menu_second_level po02"> 27 <li><a href="#">Child Menu</a></li> 28 <li><a href="#">Child Menu</a></li> 29 <li><a href="#">Child Menu</a></li> 30 </ul> 31 </li> 32 </ul> 33 </nav> 34 </div><!--navinner/--> 35 </div><!--navwrap/-->
該当のソースコード
css
1/*menu 2 ------------------------------------------------------*/ 3 .navwrap{ 4 width: 100%; 5 margin: 0 auto; 6 background-color: #000; 7 height: 50px; 8} 9 10 .navinner{ 11 width: 1000px; 12 margin-left: auto; 13 margin-right: auto; 14 position: relative;/*これがあるとメガメニューの左右が広がらない*/ 15} 16 17.menu { 18 width: 100%; 19 text-align:left; 20 float:left; 21} 22 23.menu > li { 24 float: left; 25 height: 50px; 26 line-height: 50px; 27 text-align:left; 28 margin-right:30px; 29 font-size:14px; 30} 31 32.menu > li a { 33 display: block; 34 color: #fff; 35} 36 37.menu > li a:hover {color: #FFF; text-decoration:underline} 38.menu:before, 39.menu:after { 40 content: ""; 41 display: table; 42} 43 44.menu:after {clear: both;} 45.menu { *zoom: 1;} 46 47.init-bottom:before { 48 content: ''; 49 display: inline-block; 50 width: 7px; 51 height: 7px; 52 margin: 0 7px 0 0px; 53 border-right: 2px solid #fff; 54 border-bottom: 2px solid #fff; 55 -webkit-transform: rotate(45deg); 56 transform: rotate(-45deg); 57} 58 59 60/*mega menu 61------------------------------------------- */ 62.menu_mega > ul.menu_second_level { 63 position: absolute; 64 top: 50px; 65 left: 0; 66 box-sizing: border-box; 67 width: 100%; 68 padding: 0px 2%; 69 background: #4b84c4; 70 visibility: hidden; 71 opacity: 0; 72 transition: 0.3s; 73 z-index: 1; 74 line-height:40px; 75} 76 77.menu_mega:hover .menu_second_level { 78 top: 50px; 79 visibility: visible; 80 opacity: 1; 81} 82 83.menu_mega .menu_second_level::after{ 84 content: ''; 85 position: absolute; 86 display: block; 87 width: 0; 88 height: 0; 89 left: 0px; 90 top: -12px; 91 border-right: 15px solid transparent; 92 border-bottom: 15px solid #4b84c4; 93 border-left: 15px solid transparent; 94} 95 96 97.menu_mega .menu_second_level.po01::after{left: 20px;} 98.menu_mega .menu_second_level.po02::after{left: 130px;} 99.menu_mega .menu_second_level.po02{ padding-left:130px;} 100 101.menu_mega .menu_second_level > li { 102 float: left; 103 104 border: none; 105 margin-right:30px; 106 text-align:left; 107} 108 109 110 111/*三階層目*/ 112.menu_single ul.menu_third_level { 113 position: absolute; 114 top: 50px; 115 width: 200px; 116 left:0px; 117 background: #999; 118 visibility: hidden; 119 opacity: 0; 120 -webkit-transition: 0.3s; 121 transition: 0.3s; 122 border: 2px solid #FFFFFF; 123 border-radius:6px; 124 text-align:left; 125} 126 127.menu_single ul.menu_third_level.third01{left:-20px;} 128.menu_single ul.menu_third_level.third02{left:130px;} 129 130.menu_single:hover ul.menu_third_level { 131 top: 50px; 132 visibility: visible; 133 opacity: 1; 134} 135 136.menu_third_level li { 137 border-top: 1px dotted #FFFFFF; 138 padding-left:10px; 139 padding-right:10px; 140} 141.menu_third_level li:first-child{ border:none} 142.menu_third_level li:first-child a:hover{ border-radius:6px 6px 0px 0px} 143.menu_third_level li:last-child a:hover{ border-radius:0px 0px 6px 6px} 144 145.menu_single ul.menu_third_level::before{ 146 content: ''; 147 position: absolute; 148 display: block; 149 width: 0; 150 height: 0; 151 left: 40%; 152 top: -17px; 153 border-right: 13px solid transparent; 154 border-bottom: 17px solid #FFFFFF; 155 border-left: 13px solid transparent; 156} 157 158.menu_single ul.menu_third_level::after{ 159 content: ''; 160 position: absolute; 161 display: block; 162 width: 0; 163 height: 0; 164 left: 40%; 165 top: -14px; 166 border-right: 13px solid transparent; 167 border-bottom: 17px solid #999; 168 border-left: 13px solid transparent; 169}
回答3件
0
細部の検証はしておらず、回答では無いですが、考え方として
CSSの二つ目にある「.navinner」にしている以下指定が2階層目の青色帯の幅に影響を与えて
両サイドまで延ばせなく困っています。
デバイス画面100％に対してwidth: 1000px;と、あるので、デバイス画面が1000px以上の場合は必然的に「余白」は出ると思います。
どの要素を幅100％で、どの要素を幅に制限掛けるのかを見直されると良いかもです。
投稿2018/06/04 22:52
総合スコア3523
0
vw が使えるブラウザであれば calc() との組み合わせで実現できますね。
その他は JavaScript を使うしか無いんじゃないかと思います。
css
1.menu_mega > ul.menu_second_level { 2 margin: 0 calc(-1 * (100vw - 1000px) / 2); 3 width: 100vw; 4} 5/* 疑似要素の位置も要調整 */
投稿2018/06/04 08:34
編集2018/06/04 08:59
総合スコア2161
0
自己解決
2カ所の要素幅の設定を変更し、解決しました。
HTMLの<ul class="menu_second_level po01">の部分を以下の様に変更し、
CSS「.menu_mega .menu_second_level」の内容は変更せず
ulタグへ以下のCSSを設定しました。
.menu_mega .menu_second_level > ul{
width: 1040px;
margin: 0 auto;
}
投稿2018/06/05 02:46
編集2018/06/05 03:47総合スコア6
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/05 02:41
2018/06/05 07:28