多階層ドロップダウン
どんどん増やしたドロップダウン
矢印アイコンを入れるとき
基本ドロップダウン
基本的なドロップダウンメニューです。
メニュー横並びはdisplay: inline-block;
で並べています。
HTML
<ul class=”cdd_menu”>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー1</a>
<ul> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> </ul>
</li>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー1</a>
<ul> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> </ul>
</li>
<li class=”cdd_menu-dropdown”><a href=”#”>メニュー1</a>
<ul>
<li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー2</a></li> </ul>
</li>
<li><a href=”#”>メニュー1</a></li> <li><a href=”#”>メニュー1</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="#">メニュー1</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー2</a> <ul> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー2</a> <ul> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> </ul> </li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</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="#">メニュー1</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー2</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー3</a> <ul> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー3</a> <ul> <li class="cdd_menu-dropdown"><a href="#">メニュー4</a> <ul> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> </ul> </li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> </ul> </li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー2</a> <ul> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li class="cdd_menu-dropdown"><a href="#">メニュー2</a> <ul> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> </ul> </li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</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; }