上司にナビのドロップダウンメニューを一新しろと言われ、UIのデザイン図を書いてもらいました。
画像は下記のようになります。
画像の赤い枠内のものが今回質問させていただきたいところです。
上記の画像は上司がAbode Illustratorで制作したものです。
以下の条件で制作しております。
しかし、親要素であるドロップダウンメニューのwidthは内容である子要素に自動的に合わせないため、
ドロップダウンメニューの背景が子要素の一列目の幅しかないという状況が発生しております。
下記、いくつの画像のようになります。
子要素が多くて、flex-wrapで改行した場合
親要素のwidthが足りず、子要素が表示されるものの、背景のバナーに溶け込んでしまいました。
要素がありすぎるため、その一つのユニットを抜粋してこちらに提供させていただきます。
<div class="navi-bar">
<div class="navi-inner">
<div class='navi-item' onclick='openItems( event, "T2304070001f837");'>
<div class='navi-item-title'>暢銷書精選 ❯</div>
<div class='second-level' id='T2304070001f837'>
<div class='second-level-wrap'>
<div class='second-level-wrap-inner'>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=setbook'>精選套書</a></span>
<span><a style='color:#000000; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=pen-book-set'>智慧筆套組</a></span>
<span><a style='color:#000000; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=near-newbook'>近期新書</a></span>
<span><a style='color:#000000; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-n5'>初級前半（N5）</a></span>
<span><a style='color:#000000; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-n4'>初級後半（N4）</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-n3'>中級前半（N3）</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-n2'>中級後半（N2）</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-n1'>上級日文（N1）</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-cd'>CD、DVD</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-bjt'>商務日語能力考試</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-eju'>日本留學試驗</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-dekiru'>會！日本語</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-bunka'>文化初級日本語</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-daichi'>大地</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-singaku'>進學日本語</a></span>
<span><a style='color:Black; font-size:14px; font-weight:bold;' href='bookList.php?lv01_type=total-manten'>滿點日檢系列</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSSは下記のようになります。
.header-nise .navi-bar {
width: 100%;
background: rgb(50,51,118);
color: rgb(255,255,255);
height: 40px;
}
.header-nise .navi-bar .navi-inner a {
text-decoration: none;
}
.header-nise .navi-bar .navi-inner {
width: 1260px;
height: 40px;
display: flex;
justify-content: start;
align-items: start;
margin: auto;
}
/* ここが各項目のユニットの最外層 */
.header-nise .navi-bar .navi-inner .navi-item {
z-index: 99;
position: relative;
user-select: none;
color: white;
}
/* ナビバーに表示されるもの */
.header-nise .navi-bar .navi-inner .navi-item .navi-item-title {
font-size: 18px;
padding: 0 15px;
transition: 0.3s;
cursor: pointer;
box-sizing: border-box;
height: 40px;
border: 1px solid rgb(50,51,118);
font-weight: bold;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: auto;
}
.header-nise .navi-bar .navi-inner .navi-item .navi-item-title:hover {
color: rgb(50,51,118);
background: white;
}
/* クリックされた時のクラス */
.header-nise .navi-bar .navi-inner .active {
color: rgb(50,51,118);
background: white;
}
/* ドロップダウンメニューです */
.header-nise .navi-bar .navi-inner .navi-item .second-level {
box-sizing: border-box;
z-index: 99;
color:black;
position: absolute;
height: 239px;
display: none;
width: 500px;
}
/* ドロップダウンメニューの内層一層目、削除するか迷っている */
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap {
position: absolute;
display: block;
}
/* ドロップダウンメニューの内層二層目、実際のdisplay:flex;のところです */
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap .second-level-wrap-inner {
box-sizing: border-box;
height: 239px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 5px 5px;
}
/* 子要素の設定 */
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap .second-level-wrap-inner span{
padding: 3px 10px 3px 0;
}
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap .second-level-wrap-inner ul {
padding: 0 10px 0 0px;
}
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap .second-level-wrap-inner ul li {
padding: 0 0 0 5px;
}
.header-nise .navi-bar .navi-inner .navi-item .second-level .second-level-wrap .second-level-wrap-inner ul li span {
padding: 0;
}
.header-nise .navi-bar .navi-inner .navi-item .second-level a:hover {
opacity: 0.5;
}
最も外に .navi-bar があり、ナビバーの全部です。
中に一層目 .navi-inner があり、その中にナビバーに出ている項目のユニットが並びます。
項目ユニットは上のタイトル部と下のドロップダウンメニュー部があります。
下のドロップダウンメニューは子要素の内容に合わせ、幅が自動的に調整されたいんですが、position: absoluteにしないと、幅が親要素のユニットとなります。
そのせいでwidthがflex-wrap:wrap;の影響で、全子要素を含まれられなくなりました。
親要素のwidthに合わせることになり、結果は下記の画像になります。
ドロップダウンメニューの背景が上のタイトル部と同じwidthになりました。
内層のwrapにbackground:white; にして、描画することにしてみました。
結果が下記の画像です。
しかし、このままだと、全部、他の内容が少ない項目のドロップメニューでも、500pxになります。
下記画像のようになります。上司のデザインとは程遠いです。
ドロップダウンの一番外層はposition:absolute;で固定width:500px;にします。
その下の層に背景色を描画、widthはautoにします。（autoはどうやら、親のwidthを継承し、100%の500pxになります）
さらにその下、実際のdisplay:flex;の層はwidth:fit-content;にしました。
結果はこのような感じです。
理想形に近づいてきたんですが、背景色を描画する層をflex層にしてみたら...
逆戻りでした。
ちなみに、上司はIT関係の技術者ではないため、どうして設計図通りに作れないかという説明はしにくいです。
私も何か他の方法はないかを探してみます。
ちょっと著作権的に、参考したサイトに問い合わせていないため、画像を載せるのは控えさせていただきます。
下記に最高したサイトのURLと簡単にコメントだけを記述します。
1. 台湾大手書店（誠品）の公式サイト：https://www.eslite.com/
ドラップダウンメニューはナビバーの全幅を占めていて、その子要素内容がとても多くあります。空白のところは公告画像などでカバーしているため、子要素に合わせてドロップダウンメニューの幅は変わることがありません。
2. 日本大手書店(角川)の公式サイト：https://www.kadokawa.co.jp/
一つ目と同じような感じで、違うのは、ドロップダウンメニューは全画面の幅を占めるというところです。
ドロップダウンメニューの幅は子要素の内容によって変化することがありません。
3. 日本大手グループ（角川）の公式サイト：https://group.kadokawa.co.jp/
ドロップダウンメニューは二つ目の設計と同じような感じです。
4. 日本大手書店(三省堂)の公式サイト：https://www.books-sanseido.co.jp/
ドロップダウンメニューは子要素項目の横幅で変化しているものの、高さを制限されていないため、無限に下に広げます。
上司は下に無限に広げるナビバーが嫌いです。なんか全部広告のバナーのバーに合わせて綺麗に整えたいそうです。
コードは自分がやりやすい形で書いたり、簡易に色を付けていますが、このような感じでいかがでしょうか？
お望みの仕様を再現できているかと思います。
下記埋込右上部のEDIT ON CODEPENで編集画面に飛べますので.dropdown__list要素を増減して確認してみてください。
See the Pen Untitled by southkey47 (@southkey47) on CodePen.
正直なところ無理矢理実現したところがあるので、追加の仕様やレスポンシブを考えた際に破綻や無理が生じるかもしれません。
@u9908028
Questionerご回答いただき、ありがとうございます。試させていただきます。
