作成したメニュー
htmlおよびCSS
<style> .menu_3d_button{ display:inline-block; margin:0; padding:0; font-size:20pt; } .menu_3d_button>ul{ display:flex; flex-direction:column; align-content:stretch; list-style:none; width:8em; margin:0; margin-left:0.5em; padding:0.2em; } .menu_3d_button>ul>li{ box-sizing:border-box; width:8em; margin:0.1em; /* 隙間を埋めるなら0 */ padding:0; position:relative; } .menu_3d_button>ul>li>a{ position:relative; box-sizing:border-box; display:block; width:8em; height:2em; background:#000; text-decoration: none; padding:0.3em; margin:0; transform:translate(0,0); border:none; top:0; } .menu_3d_button>ul>li>a>span{ font-size:1em; color:#DDD; } .menu_3d_button>ul>li>a:hover{ transform:translate(0.25em,-0.25em); transition: all 0.1s linear; } .menu_3d_button>ul>li>a:active{ transform:translate(0em,0em); transition: all 0.1s linear; } .menu_3d_button>ul>li>a::before{ box-sizing:border-box; content:""; position:absolute; background:#666; width:0.5em; height:2em; left:-0.5em; top:0.25em; border-style:none; transform:skew(0deg, -45deg); } .menu_3d_button>ul>li>a:hover::before{ width:0.75em; left:-0.75em; top:0.375em; transform:skew(0deg, -45deg); transition: all 0.1s linear; } .menu_3d_button>ul>li>a:active::before{ width:0.5em; left:-0.5em; top:0.25em; transform:skew(0deg, -45deg); transition: all 0.1s linear; } .menu_3d_button>ul>li>a::after{ box-sizing:border-box; content:""; position:absolute; background:#333; top:100%; left:-0.25em; width:8em; height:0.5em; border:none; transform:skew(-45deg, 0deg); } .menu_3d_button>ul>li>a:hover::after{ height:0.75em; left:-0.375em; transform:skew(-45deg, 0deg); transition: all 0.1s linear; } .menu_3d_button>ul>li>a:active::after{ height:0.5em; left:-0.25em; transform:skew(-45deg, 0deg); transition: all 0.1s linear; } </style> <nav class="menu_3d_button"> <ul> <li><a href=""><span>Menu 1</span></a></li> <li><a href=""><span>Menu 2</span></a></li> <li><a href=""><span>Menu 3</span></a></li> <li><a href=""><span>Menu 4</span></a></li> <li><a href=""><span>Menu 5</span></a></li> <li><a href=""><span>Menu 6</span></a></li> <li><a href=""><span>Menu 7</span></a></li> </ul> </nav>
縦並び・横並びメニューのサンプル一覧
nav,ul,liタグとCSSを使って縦並びのメニューをつくる
CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る
nav,ul,liタグとCSSを使ってカラフルなボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使ってカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンのカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って横並びのメニューをつくる
CSSでSVGアイコンを下部に固定した横並びのメニューがあるページ作る
nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる