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

  • 82
  • 0
  • CSS
  • 2020-05-25

the css menu effect of ReoNa official web site

https://www.reona-reona.com/ 
 

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

https://www.reona-reona.com/ 


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,這很簡單就不累述