Q&A
横幅100％のメガメニューを作成したいのですが、
デザイナーさまが作成のデザインが添付のように、任意の箇所で改行されるのですが、
float: left;がうまく表示されないのと、メニューが被さっているのか、うまく表示できずに悩んでいます。
float: left;は100%を指定してしまっているためだとは思うのですが、部分的に33%などとすると、
その部分だけが縦長になってしまって、さらにデザインが崩れてしまいます。
そもそもとしてもっといい方法があるのかもしれませんが、
どなたか、ご教授いいただけないでしょうか？
このようなデザインにしたいです↓
現在です↓
html
1 <nav id="dd-full"> 2 <ul class=""> 3 <li class="btn item01"> 4 <a href="#" class="megamenu">商品一覧</a> 5 <ul class="maxwidth"> 6 <li> 7 <p>プロジェクター</p> 8 <ul style="padding-bottom: 0"> 9 <li class="list-arrow"> 10 <a href="/" class="list-arrow">プロジェクター本体</a> 11 </li> 12 <li> 13 <a href="/" class="list-arrow">プロジェクターオプション</a> 14 </li> 15 </ul> 16 </li> 17 <li> 18 <p>プリンタ・複合機</p> 19 <ul style="padding-bottom: 0"> 20 <li> 21 <a href="/" class="list-arrow">インクジェット複合機</a> 22 </li> 23 <li> 24 <a href="/" class="list-arrow">レーザー複合機</a> 25 </li> 26 <li> 27 <a href="/" class="list-arrow">インクジェットプリンタ</a> 28 </li> 29 <li> 30 <a href="/" class="list-arrow">ドットインパクトプリンタ</a> 31 </li> 32 <li> 33 <a href="/" class="list-arrow">大判プリンタ</a> 34 </li> 35 <li> 36 <a href="/" class="list-arrow">モバイルプリンタ</a> 37 </li> 38 <li> 39 <a href="/" class="list-arrow">プリンタオプション</a> 40 </li> 41 <li> 42 <a href="/" class="list-arrow">プリンタインク</a> 43 </li> 44 <li style="float:left; "> 45 <a href="/" class="list-arrow">プリンタトナー</a> 46 </li> 47 <li> 48 <a href="/" class="list-arrow">プリンタ用紙</a> 49 </li> 50 <li> 51 <a href="/" class="list-arrow">プリンタ搬入設置料</a> 52 </li> 53 </ul> 54 </li> 55 <li> 56 <p>PC(デスクトップ・ノート・タブレット)</p> 57 <ul> 58 <li> 59 <a href="/" class="list-arrow">デスクトップPC</a> 60 <li> 61 <a href="/" class="list-arrow">ノートPC</a> 62 </li> 63 <li> 64 <a href="/" class="list-arrow">タブレットPC</a> 65 </li> 66 </ul> 67 </li> 68 <li> 69 <p>電源関連機器</p> 70 <ul> 71 <li> 72 <a href="/" class="list-arrow">UPS本体</a> 73 </li> 74 <li> 75 <a href="/" class="list-arrow">交換用バッテリ</a> 76 </li> 77 </ul> 78 </li> 79 <li style="float:left;"> 80 <p>周辺機器</p> 81 <ul> 82 <li> 83 <a href="/" class="list-arrow">スキャナ</a> 84 <li> 85 <a href="/" class="list-arrow">液晶ディスプレイ</a> 86 </li> 87 <li> 88 <a href="/" class="list-arrow">キーボード</a> 89 </li> 90 <li> 91 <a href="/" class="list-arrow">マウス</a> 92 </li> 93 </ul> 94 </li> 95 <li> 96 <p>オフィス家具</p> 97 <ul> 98 <li> 99 <a href="/" class="list-arrow">デスク・ラック</a> 100 <li> 101 <a href="/" class="list-arrow">チェア・座椅子</a> 102 </li> 103 <li> 104 <a href="/" class="list-arrow">キャビネット</a> 105 </li> 106 107 </ul> 108 </li> 109 <li> 110 <p>サプライ</p> 111 <ul> 112 <li> 113 <a href="/" class="list-arrow">液晶保護フィルム</a> 114 <li> 115 <a href="/" class="list-arrow">バッグ・ケース</a> 116 </li> 117 <li> 118 <a href="/" class="list-arrow">携帯用製品</a> 119 </li> 120 <li> 121 <a href="/" class="list-arrow">DVD・CDケース</a> 122 </li> 123 </ul> 124 </li> 125 <li> 126 <p><a href="/">家電</a></p> 127 </li> 128 <li> 129 <p><a href="/">延長保証サービス</a></p> 130 </li> 131 </ul> 132 </li> 133 </ul> 134 <!-- /#dd-full --> 135 </nav>
css
1 2#dd-full { 3 z-index: 100; 4} 5 6#dd-full a { 7 color: #fff; 8 text-decoration: none; 9 display: block; 10 padding: 6px; 11} 12 13#dd-full a:hover { 14 color: white; 15 background: #666; 16} 17 18#dd-full li ul { 19 width: 100%; 20 color: white; 21 text-align: left; 22 position: absolute; 23 left: 0; 24 padding: 10px 14%; 25 background: #666; 26} 27 28#dd-full li ul li { 29 width: 32%; 30 border: none; 31} 32 33#dd-full .active { 34 color: white; 35 background: #666; 36}
メニューなので、liタグで作るべきかと思いましたが、もっといい方法があるのでしょうか？
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
「どこがわからない」というよりも、「どう着手していいのかわからない」という質問だと読みましたので、ざっくりとした回答をします。
具体的な疑問点があるならば、その旨明示してください。
- 段組を
float: leftで表現するのは、レガシーとまでは言いませんがあまりおすすめできません。flex など他の手法を検討してください。 - 折り返しの表現をしたいのなら、そのように要素をグループ化した方が楽かもしれません。タグ付けを見直してください。可能ならば、項目の順序も再検討した方がいいかもしれません。少なくとも、現状のタグ付けではデザインの再現はできないわけではありませんが、アドホックな対応が必要になるかと思います。
投稿2019/09/05 01:00
編集2019/09/05 01:02
総合スコア37445
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/05 14:24