簡單帶底線跟隨效果的CSS3下拉式功能表特效

簡要教程

這是一款使用純CSS3製作的帶底線跟隨效果的下拉式功能表特效。該下拉式功能表通過CSS3 transform和transition來製作底線跟隨效果和下拉式功能表效果。

使用方法

HTML結構

該下拉式功能表使用<nav>元素來包裹一個無序列表。

<nav>  <ul id="main">    <li>首頁</li>    <li>關於我們</li>    <li>項目分類      <ul class="drop">        <p>        <li>scss</li>        <li>jquery</li>        <li>html</li>        </p>      </ul>    </li>    <li>聯絡我們</li>    <p id="marker"></p>  </ul></nav>

CSS樣式

整個菜單ul#mian的定位方式採用相對定位方式。display顯示為內聯區塊層級元素。功能表項目通過padding來設定尺寸，並設定最小寬度min-width為120像素。

#main {  position: relative;  list-style: none;  background: #6BBE92;  font-weight: 400;  font-size: 0;  text-transform: uppercase;  display: inline-block;  padding: 0;  margin: 50px auto;}#main li {  font-size: 0.8rem;  display: inline-block;  position: relative;  padding: 15px 20px;  cursor: pointer;  z-index: 5;  min-width: 120px;}li {  margin: 0;}

在HTML結構中，ul.drop是下拉式功能表組件。它的定位方式採用絕對位置。它裡面的p元素使用translate函數在Y軸上移動-100%，使它隱藏起來（.drop上使用了overflow:hidden）。

.drop {  overflow: hidden;  list-style: none;  position: absolute;  padding: 0;  width: 100%;  left: 0;  top: 48px;}.drop p {  -webkit-transform: translate(0, -100%);  -moz-transform: translate(0, -100%);  -ms-transform: translate(0, -100%);  transform: translate(0, -100%);  -webkit-transition: all 0.5s 0.1s;  -moz-transition: all 0.5s 0.1s;  -ms-transition: all 0.5s 0.1s;  transition: all 0.5s 0.1s;  position: relative;}.drop li {  display: block;  padding: 0;  width: 100%;  background: #3E8760 !important;}

#marker是底線元素。它也使用絕對位置。並為所有動畫設定了0.35秒的動畫過渡效果。

#marker {  height: 6px;  background: #3E8760 !important;  position: absolute;  bottom: 0;  width: 120px;  z-index: 2;  -webkit-transition: all 0.35s;  -moz-transition: all 0.35s;  -ms-transition: all 0.35s;  transition: all 0.35s;}

在滑鼠滑過功能表項目#main li元素時，根據nth-child來判斷當前滑鼠滑過哪個功能表項目。然後將該功能表項目中的子功能表的Y軸位置恢複為0，顯示下拉式功能表，同時根據不同的功能表項目來設定translate函數的X方向移動值來移動底線。

#main li:nth-child(1):hover ul p {  -webkit-transform: translate(0, 0);  -moz-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);}#main li:nth-child(1):hover ~ #marker {  -webkit-transform: translate(0px, 0);  -moz-transform: translate(0px, 0);  -ms-transform: translate(0px, 0);  transform: translate(0px, 0);} #main li:nth-child(2):hover ul p {  -webkit-transform: translate(0, 0);  -moz-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);}#main li:nth-child(2):hover ~ #marker {  -webkit-transform: translate(120px, 0);  -moz-transform: translate(120px, 0);  -ms-transform: translate(120px, 0);  transform: translate(120px, 0);} #main li:nth-child(3):hover ul p {  -webkit-transform: translate(0, 0);  -moz-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);}#main li:nth-child(3):hover ~ #marker {  -webkit-transform: translate(240px, 0);  -moz-transform: translate(240px, 0);  -ms-transform: translate(240px, 0);  transform: translate(240px, 0);} #main li:nth-child(4):hover ul p {  -webkit-transform: translate(0, 0);  -moz-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);}#main li:nth-child(4):hover ~ #marker {  -webkit-transform: translate(360px, 0);  -moz-transform: translate(360px, 0);  -ms-transform: translate(360px, 0);  transform: translate(360px, 0);}

以上就是簡單帶底線跟隨效果的CSS3下拉式功能表特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

相關文章：

CSS下拉式功能表簡單製作方法介紹

CSS 下拉式功能表

CSS 下拉式功能表詳解

