使用:focus-within实现下拉菜单效果
生活随笔
收集整理的這篇文章主要介紹了
使用:focus-within实现下拉菜单效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考這個網站
源代碼：
<html> <style> /*General cleanup */ *, *:before, *:after {-webkit-box-sizing: border-box;box-sizing: border-box; }html, body {font-family: helvetica, arial, sans-serif;font-size: 18px;margin: 0;padding: 0; }nav ul, nav ol {list-style: none;padding: 0;margin: 0; }.sr-only {position: absolute;clip: rect(1px, 1px, 1px, 1px);font-size: 1px; }/*Demo */ .show-nav {position: fixed;top: 0;right: 0; }.nav__list {background: #fafafa;border-bottom: 1px solid #444;text-align: center;position: relative;z-index: 2; }.nav__list > li {display: inline-block; }.nav__list a {display: block;padding: 20px;position: relative;z-index: 2; }.nav__list a:hover, .nav__list a:focus {background: #222;color: #fff; }.has-drop {position: relative; }.nav__list__drop {left: 0;margin: 0;position: absolute;text-align: left;top: 100%;opacity: 0;-webkit-transform: translateY(-20px);transform: translateY(-20px);height: 1px;-webkit-transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;transition: transform .2s ease-in-out, opacity .1s ease-out;transition: transform .2s ease-in-out, opacity .1s ease-out, -webkit-transform .2s ease-in-out;overflow: hidden;z-index: 1; }.nav__list__drop {background: #fafafa;border: 1px solid #444;border-top: 0;min-width: 100%; }.nav__list__drop a {padding: 12px 20px;white-space: nowrap; }.nav__list a:focus + .nav__list__drop, .has-drop:hover .nav__list__drop, .nav__list__drop:focus-within {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);height: auto;z-index: 1; }/*1. This right here, the :focus-within pseudo-classremoves the need for all the JS that was in theoriginal version of this pen, to reveal thedropdown menus on keyboard focus of the primary <a>or any of the visually hidden <a>s of the drop downmenus. */ </style> <div class="page"><header role="banner" aria-label="Primary"><nav role="navigation" aria-label="Primary" id="nav" class="nav"><ul id="nav_inner" class="nav__list"><li class="has-drop"><a href="#!">下拉菜單</a><ul class="nav__list__drop"><li><a href="#!">子菜單1</a></li><li><a href="#!">子菜單2</a></li></ul></li><li><a href="#!">普通鏈接</a></li><li class="has-drop"><a href="#!">下拉菜單2</a><ul class="nav__list__drop"><li><a href="#!">子菜單1 的名字稍微有點長</a></li><li><a href="#!">子菜單 2</a></li></ul></li></ul></nav></header></div> </html>最后的效果：
總結
以上是生活随笔為你收集整理的使用:focus-within实现下拉菜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WLS
- 下一篇： win7关机命令_win7cmd关机命令