多階層ドロップダウン
どんどん増やしたドロップダウン
矢印アイコンを入れるとき
基本ドロップダウン
基本的なドロップダウンメニューです。
メニュー横並びはdisplay: inline-block;で並べています。
HTML
<ul class=”cdd_menu”>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー１</a>
<ul> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> </ul>
</li>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー１</a>
<ul> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> </ul>
</li>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー１</a>
<ul>
<li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> <li><a href=”#”>メニュー２</a></li> </ul>
</li>
<li><a href=”#”>メニュー１</a></li> <li><a href=”#”>メニュー１</a></li>
</ul>
CSS
ul.cdd_menu a {
text-decoration: none;
color: #646464;
background: transparent;
}
ul.cdd_menu a:hover {
opacity: .5;
transition: .5s;
background: rgba(225,225,225,.8);
}
ul.cdd_menu {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 9999;
background: #EEE;
text-align: center;
}
ul.cdd_menu > li {
display: inline-block;
}
ul.cdd_menu li a {
display: block;
margin: 0;
padding: .5rem 2rem;
}
ul.cdd_menu,
li.cdd_menu-dropdown > ul {
padding: 0;
list-style: none;
}
li.cdd_menu-dropdown > ul {
position: absolute;
background: #CCC;
visibility: hidden;
opacity: 0;
}
li.cdd_menu-dropdown:hover > ul {
visibility: visible;
transition: .5s;
opacity: 1;
}
多階層ドロップダウン
第三階層までのだ階層ドロップダウン。
第三階層目のメニューを横に表示させる為のCSSが増えています。
HTML
<ul class="cdd_menu"> <li class="cdd_menu-dropdown"><a href="#">メニュー１</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー２</a> <ul> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー２</a> <ul> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> </ul> </li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー２</a></li> </ul> </li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> </ul>
CSS
ul.cdd_menu a {
text-decoration: none;
color: #646464;
background: transparent;
}
ul.cdd_menu a:hover {
opacity: .5;
transition: .5s;
background: rgba(225,225,225,.8);
}
ul.cdd_menu {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 9999;
background: #EEE;
text-align: center;
}
ul.cdd_menu > li {
display: inline-block;
}
ul.cdd_menu li a {
display: block;
margin: 0;
padding: .5rem 2rem;
}
ul.cdd_menu,
li.cdd_menu-dropdown > ul {
padding: 0;
list-style: none;
}
li.cdd_menu-dropdown{
position: relative;
}
li.cdd_menu-dropdown > ul {
position: absolute;
background: #CCC;
visibility: hidden;
opacity: 0;
}
li.cdd_menu-dropdown:hover > ul {
visibility: visible;
transition: .5s;
opacity: 1;
}
li.cdd_menu-dropdown > ul > li > ul {
background: #999999;
position: absolute;
left: 100%;
top: 0;
width: 100%;
}
どんどん増やしたドロップダウン
多階層用のソースを増やしていけばどんどん横に広がります。
ですが、一番右側のメニューは…
HTML
<ul class="cdd_menu"> <li class="cdd_menu-dropdown"><a href="#">メニュー１</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー２</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー３</a> <ul> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー３</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー４</a> <ul> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー５</a></li> </ul> </li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー４</a></li> </ul> </li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー２</a> <ul> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー２</a> <ul> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー３</a></li> </ul> </li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー２</a></li> </ul> </li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー１</a></li> </ul>
CSS
ul.cdd_menu a {
text-decoration: none;
color: #646464;
background: transparent;
}
ul.cdd_menu a:hover {
opacity: .5;
transition: .5s;
background: rgba(225,225,225,.8);
}
ul.cdd_menu {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 9999;
background: #EEE;
text-align: center;
}
ul.cdd_menu > li {
display: inline-block;
}
ul.cdd_menu li a {
display: block;
margin: 0;
padding: .5rem 2rem;
}
ul.cdd_menu,
li.cdd_menu-dropdown > ul {
padding: 0;
list-style: none;
}
li.cdd_menu-dropdown{
position: relative;
}
li.cdd_menu-dropdown > ul {
position: absolute;
background: #CCC;
visibility: hidden;
opacity: 0;
}
li.cdd_menu-dropdown:hover > ul {
visibility: visible;
transition: .5s;
opacity: 1;
}
li.cdd_menu-dropdown > ul > li > ul {
background: #999999;
position: absolute;
left: 100%;
top: 0;
width: 100%;
}
矢印アイコンを入れるとき
:afterでfontawesomeのアイコンを入れてみました。
CSS
ul.cdd_menu a {
text-decoration: none;
color: #646464;
background: transparent;
}
ul.cdd_menu a:hover {
opacity: .5;
transition: .5s;
background: rgba(225,225,225,.8);
}
ul.cdd_menu {
width: 1200px;
margin: 0 auto;
position: relative;
z-index: 9999;
background: #EEE;
text-align: center;
}
ul.cdd_menu > li {
display: inline-block;
}
ul.cdd_menu li a {
display: block;
margin: 0;
padding: .5rem 2rem;
}
ul.cdd_menu,
li.cdd_menu-dropdown > ul {
padding: 0;
list-style: none;
}
li.cdd_menu-dropdown{
position: relative;
}
li.cdd_menu-dropdown > ul {
position: absolute;
background: #CCC;
visibility: hidden;
opacity: 0;
}
li.cdd_menu-dropdown:hover > ul {
visibility: visible;
transition: .5s;
opacity: 1;
}
li.cdd_menu-dropdown > ul > li > ul {
background: #999999;
position: absolute;
left: 100%;
top: 0;
width: 100%;
}
li.cdd_menu-dropdown > a::after {
margin-left: 5px;
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
li.cdd_menu-dropdown > ul
> li.cdd_menu-dropdown > a::after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}