[CSS] ReoNa 官網的選單CSS效果

2020-05-20

5442
0
CSS
2020-05-25

the css menu effect of ReoNa official web site

刀劍神域ED 女歌手Reona官網的CSS選單效果程式碼備份


li{/*偽元素容器*/
  position:relative;/*因為偽元素是absolute*/
}
li:before {/*偽元素*/
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;/*預設線條要靠右下角，可依據自己工作需求調整靠底距離容器的大小*/
    width: 0;/*待會變成100%，目前先隱藏*/
    height: 1px;/*線條粗細，依據自己工作需求調整*/
    background: #fff;/*線條顏色*/
    transition: 0.3s ;
 
}

/*線條要做的事*/
li:hover:before {
    left: 0;/*變成靠左*/
    width: 100%;/*線條由左至右動態畫線*/ 
}

說明：

1.官網的偽元素是定義在<li>裡，如果工作上的選單是<a>的話，也可以定義在<a>裡面

2.before或after兩者偽元素都可以用，挑一個即可。

3.官網是hover，但手機沒有JS hover事件，所以可以改寫成這樣↓ ，加入active class來做效果的切換

4.此動態效果，不只選單Menu、也可應用在tab的切換

li.active:before {
    left: 0;/*變成靠左*/
    width: 100%;/*線條由左至右動態畫線*/ 
}

↑只是這樣要靠jQuery來監聽使用者click事件追加<li>的active class，這很簡單就不累述

回首頁