悬停时的导航滑动线 - 当没有项目是“当前”或“选定”时

Question

我的主导航栏上有一条滑动线，因此将线悬停动画/滑动到您从当前位置（应该是当前页面）悬停的项目。

示例：https://codepen.io/moy/pen/Yjqrqo

我遇到的问题是，当菜单项上没有 current_menu_item 类时它会中断。

80% 的时间会有一个“已选择”菜单项，但在某些情况下，当您在条款、隐私、联系（页脚链接）页面上没有可关联的主要导航项时。

理想情况下，当没有选定项目时，我希望线条在悬停时淡入，然后从那里滑动。然后，如果您不单击任何内容并再次离开菜单，则该行将淡出。但我愿意接受建议。

$(function() {
    var $el, leftPos, newWidth, $mainNav = $(".site-nav__list");
    $mainNav.append("<div class='site-nav__line'></div>");
    var $magicLine = $(".site-nav__line");
    $magicLine
        .width($(".current-menu-item").width())
        .css("left", $(".current-menu-item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $(".site-nav__list li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

/* MIXIN */

@mixin clearfix() {
	
	&:before,
	&:after {
		content: "";
		display: table;
	}
	
	&:after {
		clear: both;
	}
}

/* Body */

body {
  background: #f9f9f9;
  margin: 0;
  padding: 5px 0 0;
}

/* Header */

.page-head {
	background: white;
  border-top: 2px solid #ddd;
	box-sizing: border-box;
  @include clearfix;
	padding: 0 30px;
	position: relative;
	width: 100%;
}

.page-head__logo {
	background-image: none;
	float: left;
	padding: 0;
	text-shadow: none;
	width: 200px;
}

/* Nav */

.site-nav {
	display: block;
  float: right;
	text-align: center;
  width: auto;
}

.site-nav__list {
  list-style: none;
	margin: 0;
	padding: 0;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}

.site-nav__list li {
	background: none;
  display: inline-block;
	margin: 0;
	padding-left: 0;
	text-transform: uppercase;
	
	&.current-menu-item {}
}

.site-nav__list a {
	box-sizing: border-box;
	display: block;
	font-weight: 900;
	padding: 30px 15px;
	transition: color .15s;
	text-shadow: none;
  
  &:hover {
    color: red;
  }
}

/* Underline */

.site-nav__line {
  background: red;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-head">
    <a href="#" class="page-head__logo">Logo Here </a>
    <nav class="site-nav">
        <ul class="site-nav__list">
            <li class="site-nav__item current-menu-item"><a href="#" class="site-nav__link">Home</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Looooonger Title</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Company</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Login</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link amp">Apply</a></li>
        </ul>
    </nav>
</header>

Answer 1

就在关于列表项之前，添加具有anchor 标记且样式为display:none 的li 标记可以解决此问题。

<li class="site-nav__item current-menu-item"><a href="#" style="display:none"></a></li>

在不属于主菜单项的页面中使用这个额外的项目应该很有用。

Answer 2

当没有current-menu-item 时，您将得到$(".current-menu-item a").position() 作为undefined。然后控制台报错

无法读取undefined 的“左”属性

因此，您必须检查current-menu-item 是否存在于width() 和css() 方法中，如下所示。

var $magicLine = $(".site-nav__line"),
    $currentMenu = $(".current-menu-item"); //added this line

$magicLine
    .width($currentMenu.length ? $currentMenu.width() : 0) //chnaged this line
    .css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0) //chnaged this line
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

快速移动鼠标问题更新：
要在没有current_menu_item 时淡入该行，您必须对hover 事件进行一些更改。对于快速鼠标移动问题，您可以使用setTimeout 和clearTimeout。

var hoverOut;

$(".site-nav__list li a").hover(function() {
  clearTimeout(hoverOut);

  $el = $(this);
  leftPos = $el.position().left;
  newWidth = $el.parent().width();

  if (!$magicLine.width()) {
    $magicLine.stop().hide().css({
      left: leftPos,
      width: newWidth
    }).fadeIn(400);
  } else {
    $magicLine.stop().animate({
      opacity: 1,
      left: leftPos,
      width: newWidth
    });
  }
}, function() {
  hoverOut = setTimeout(function() {
    if (!$currentMenu.length) {
      $magicLine.fadeOut(400, function() {
        $magicLine.css({
          left: $magicLine.data("origLeft"),
          width: $magicLine.data("origWidth")
        });
      });
    } else {
      $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
      });
    }
  }, 400);
});

更新的笔链接： https://codepen.io/anon/pen/RBZwbZ

Answer 3

当您没有.current-menu-item 时，$(".current-menu-item").width() 和 $(".current-menu-item a").position().left 将返回 undefined 以使其崩溃。这里我对你的代码做了一点改动。

$(".site-nav__list li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });

有

$(".site-nav__list li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    if ($magicLine.width() >0) {
      $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
      });
    } else {
      $magicLine.width(newWidth).css("left", leftPos).fadeIn(3000);
    }
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

还有

$magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
});

与

if ($currentMenu.length) {
       $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
       } else {
        $magicLine.fadeOut('slow'); 
       }

$(function(){
	var $el, leftPos, newWidth,
        $mainNav = $(".site-nav__list");
    
    $mainNav.append("<div class='site-nav__line'></div>");
    var $magicLine = $(".site-nav__line"),
        $currentMenu = $(".current-menu-item");
  
    $magicLine
        .width($currentMenu.length ? $currentMenu.width() : 0)
        .css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

 $(".site-nav__list li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        if ($magicLine.width() >0) {
          $magicLine.show().stop().animate({
            left: leftPos,
            width: newWidth
          });
        } else {
          $magicLine.width(newWidth).css("left", leftPos).fadeIn(3000);
        }
    }, function() {
   if ($currentMenu.length) {
       $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
       } else {
        $magicLine.fadeOut('slow'); 
       }
        
            
    });
});

/* MIXIN */

@mixin clearfix() {
	
	&:before,
	&:after {
		content: "";
		display: table;
	}
	
	&:after {
		clear: both;
	}
}

/* Body */

body {
  background: #f9f9f9;
  margin: 0;
  padding: 5px 0 0;
}

/* Header */

.page-head {
	background: white;
  border-top: 2px solid #ddd;
	box-sizing: border-box;
  @include clearfix;
	padding: 0 30px;
	position: relative;
	width: 100%;
}

.page-head__logo {
	background-image: none;
	float: left;
	padding: 0;
	text-shadow: none;
	width: 200px;
}

/* Nav */

.site-nav {
	display: block;
  float: right;
	text-align: center;
  width: auto;
}

.site-nav__list {
  list-style: none;
	margin: 0;
	padding: 0;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}

.site-nav__list li {
	background: none;
  display: inline-block;
	margin: 0;
	padding-left: 0;
	text-transform: uppercase;
	
	&.current-menu-item {}
}

.site-nav__list a {
	box-sizing: border-box;
	display: block;
	font-weight: 900;
	padding: 30px 15px;
	transition: color .15s;
	text-shadow: none;
  
  &:hover {
    color: red;
  }
}

/* Underline */

.site-nav__line {
  background: red;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <header class="page-head">

    <a href="#" class="page-head__logo">Logo Here </a>

    <nav class="site-nav">
      <ul class="site-nav__list">
        <li class="site-nav__item "><a href="#" class="site-nav__link">Home</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Looooonger Title</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Company</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Login</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link amp">Apply</a></li>
      </ul>
    </nav>

  </header>
</body>