Magic Line

參考範例:CSS-TRICK

ul#nav
 li.current ABOUT
 li.2 STORY
 li INFO
 li TICKETS
 //li#line
ul
 position: relative

li
 display: inline-block
 padding: 0px
 margin-right: 10px
 color: #a3a3a3
 transition-duration: 0.5s
 font-size: 26px
 position: relative
 &:hover
  color: #000
//下底線樣式
#line
 position: absolute
 //初始位置(可以去console帶函數算出來)
 left: 40px
 width: 90px
 border-bottom: 3px solid #000
//加入下底線
$("#nav").append("<li id='line'></li>");

//滑鼠觸發
//hover(移進去的動作, 移出後的動作);
$("li").hover(
 //移入
 function() {
 $("#line").stop().animate({
 left: $(this).position().left,
 width: $(this).width()
 })
 },

 //移出
 function() {
 $("#line").stop().animate({
 left: "40px",
 width: "90px"
 })
 }
);

原生版本

var nav = document.querySelector("#nav");
var createLine = document.createElement("li");
createLine.id = "line";

nav.appendChild(createLine);
var now = document.querySelector("#now");
var li = document.querySelectorAll(".li");
for (i = 0; i < li.length; i++) {
 li[i].addEventListener("mouseover",
 function() {
 createLine.style.left = this.offsetLeft + "px";
 createLine.style.width = this.offsetWidth + "px";
 }
 );
 li[i].addEventListener("mouseout",
 function() {
 createLine.style.left = now.offsetLeft + "px";
 createLine.style.width = now.offsetWidth + "px";
 }
 )
}

Display

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *