CSS3可以創建出許多美觀的效果,其中之一就是導航條下拉菜單。下面我們來介紹如何使用CSS3來創建一個漂亮的導航條下拉菜單。
/* CSS樣式代碼 */ /* 導航條樣式 */ nav { background-color: #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } /* 一級菜單樣式 */ nav >ul >li { float: left; position: relative; } nav >ul >li >a { color: #fff; display: block; font-size: 16px; line-height: 60px; padding: 0 20px; } /* 二級菜單樣式 */ nav ul ul { background-color: #444; position: absolute; top: 100%; left: 0; width: 200px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } nav ul li:hover >ul { opacity: 1; visibility: visible; } nav ul ul li { float: none; position: relative; } nav ul ul li a { color: #fff; display: block; font-size: 14px; line-height: 40px; padding: 0 20px; border-bottom: 1px solid #555; } nav ul ul li:last-child a { border-bottom: none; }
通過上面的CSS樣式,我們可以創建出一個基本的導航條和下拉菜單。其中,nav代表導航條,nav >ul >li代表一級菜單,nav >ul >li >a代表一級菜單的鏈接,nav ul ul代表二級菜單,nav ul li:hover >ul代表當鼠標懸停在一級菜單上時,顯示對應的二級菜單。
通過CSS3,我們還可以為下拉菜單添加一些過渡效果。例如,當二級菜單出現時,可以添加一個漸變的效果。下面是相應的CSS3過渡效果代碼:
/* CSS3過渡效果代碼 */ nav ul ul { /* ... */ opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } nav ul li:hover >ul { opacity: 1; visibility: visible; }
通過添加transition屬性,我們可以在顯示和隱藏二級菜單時添加一個漸變效果。
綜上,通過CSS3,我們可以輕松地創建出一個漂亮的導航條和下拉菜單,并且為其添加一些過渡效果來提升用戶體驗。
上一篇css3 帶橫線的標題
下一篇css3 序列幀