この記事は2017年9月4日に書かれたもので、内容が古い可能性がありますのでご注意ください。
サイト作成で重要なグローバルナビゲーションを作成しました。
javascriptで動きを加えることもできますが、今回はCSSのみでシンプルなものを作成します。
デモページを作成しましたのでこちらからご確認ください。※PCで閲覧してください。
DEMO
HTML
<ul id="menulist"> <li> <a href="#">Menu Item</a> </li> <li class="have_submenu"> <a href="#">Menu Item</a> <ul> <li> <a href="#">Sub-Menu Item</a> </li> <li> <a href="#">Sub-Menu Item</a> </li> <li> <a href="#">Sub-Menu Item</a> </li> </ul> </li> <li> <a href="#">Menu Item</a> </li> <li> <a href="#">Menu Item</a> </li> <li> <a href="#">Menu Item</a> </li> <li> <a href="#">Menu Item</a> </li> </ul>
CSS
//親要素のCSS #menulist { max-width: 1200px; margin: 0 auto; border-left: 1px solid #999999; display: flex; flex-wrap: wrap; } #menulist li { flex: 0 auto; position: relative; border-right: 1px solid #999999; padding: 10px 30px; cursor: pointer; } #menulist li.have_submenu { padding: 10px 45px 10px 30px; } #menulist li:hover { background-color: #999999; } #menulist li a { color: #ffffff; } //子要素のCSS #menulist ul { position: absolute; z-index: 9999; top: 100%; left: 0; margin: 0; padding: 0; } #menulist li ul{ opacity: 0; visibility: hidden; transition: .5s; } #menulist li:hover ul{ top: 100%; visibility: visible; opacity: 1; } #menulist li ul li { width: 100%; background-color: #999999; border-bottom: 1px solid #999999; } #menulist li ul li:hover { background-color: #797979; } //▼アイコンのCSS #menulist li.have_submenu > a:after { content: ''; display: inline-block; position: absolute; top: 53%; right: 13%; width: 0; height: 0; margin-top: -5px; border-top: 6px solid #ffffff; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; }
デモページでは子要素がフェードインされるようになっていますが、「transition: .5s;」を削除すればフェードインをなしにすることが可能です。
ぜひお試しください。
デモページを作成しましたのでこちらからご確認ください。※PCで閲覧してください。
DEMO