悬停时的导航滑动线-当没有项目为“当前"或“选定"时 [英] Navigation sliding line on hover - when no item is 'current' or 'selected'

查看：53 发布时间：2021/5/14 20:25:03 javascript jquery html css sass

本文介绍了悬停时的导航滑动线-当没有项目为“当前"或“选定"时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的主导航上有一条滑动线，因此，将鼠标悬停在该行上会使其从当前位置(应该是当前页面)移动到/滑过该项目.

我遇到的问题是，菜单项中断时没有 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({左:leftPos，宽度:newWidth});}， 功能() {$ magicLine.stop().animate({左:$ magicLine.data("origLeft")，宽度:$ magicLine.data("origWidth")});});});

 /* MIXIN */@mixin clearfix(){& ;:之前，& ;:之后{内容: "";显示:表；}&:{之后清楚:两者；}}/* 身体 */身体 {背景:#f9f9f9;边距:0;填充:5px 0 0;}/*标头*/.page-head {背景:白色；border-top:2px实心#ddd;框大小:border-box；@include clearfix;填充:0 30px;职位:相对宽度:100％;}.page-head__logo {背景图片:无；向左飘浮;填充:0;文本阴影:无；宽度:200像素；}/*导航*/.site-nav {显示:块；浮动:正确；文本对齐:居中；宽度:自动;}.site-nav__list {列表样式:无；边距:0;填充:0;职位:相对顶部:自动；左:自动；宽度:自动;}.site-nav__list li {背景:无；显示:inline-block;边距:0;padding-left:0；文本转换:大写；& .current-menu-item {}}.site-nav__list a {框大小:border-box；显示:块；字体粗细:900；填充:30px 15px;过渡:颜色.15秒；文本阴影:无；&:hover {红色;}}/*下划线*/.site-nav__line {背景:红色；内容: "";显示:块；高度:2px；位置:绝对；顶部:-2px；左:0；宽度: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">此处登录</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">关于</a></li>< li class ="site-nav__item">< a href =#" class ="site-nav__link"> Looooonger标题</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">关于</a></li>< li class ="site-nav__item">< a href =#" class ="site-nav__link">登录</a></li>< li class ="site-nav__item">< a href =#" class ="site-nav__link amp"> Apply</a></li></ul></nav></header>

解决方案

如果没有 current-menu-item ，您将获得 $(.current-menu-item a").position()为 undefined .然后控制台中的错误

无法读取 undefined
的属性"left"

因此，您必须检查 width()&中是否存在 current-menu-item . css()方法如下.

  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());

快速更新鼠标移动问题:
要在没有 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();如果(！$ magicLine.width()){$ magicLine.stop().hide().css({左:leftPos，宽度:newWidth}).fadeIn(400);} 别的 {$ magicLine.stop().animate({不透明度:1左:leftPos，宽度:newWidth});}}， 功能() {hoverOut = setTimeout(function(){如果(！$ currentMenu.length){$ magicLine.fadeOut(400，function(){$ magicLine.css({左:$ magicLine.data("origLeft")，宽度:$ magicLine.data("origWidth")});});} 别的 {$ magicLine.stop().animate({左:$ magicLine.data("origLeft")，宽度:$ magicLine.data("origWidth")});}}，400)；});

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

I have a sliding line on my main navigation, so on hover the line animates/slides to the item you've hovered over from it's current position (which should be the current page).

Example: https://codepen.io/moy/pen/Yjqrqo

The problem I'm having is when there is no current_menu_item class on a menu item it breaks.

80% of the time there will be a 'selected' menu item but there are some instances when you're on terms, privacy, contact (footer links) pages where there isn't a main nav item to relate to.

Ideally when there isn't a selected item I'd like the line to fade in on hover, then slide about from there. Then if you don't click anything and leave the menu again the line will fade out. But I'm open to suggestions.

$(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>

解决方案

When there is no current-menu-item you will get $(".current-menu-item a").position() as undefined. And then the error in console

Cannot read property 'left' of undefined

So you have to check that current-menu-item is exist or not in width() & css() method like following.

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());

UPDATE FOR MOVING MOUSE QUICKLY ISSUE:
To fade in the line when there isn't a current_menu_item you have to make some change in hover event. and for quick mouse move issue you can use setTimeout and 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);
});

UPDATED PEN LINK: https://codepen.io/anon/pen/RBZwbZ

这篇关于悬停时的导航滑动线-当没有项目为“当前"或“选定"时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

悬停时的导航滑动线-当没有项目为“当前"或“选定"时 [英] Navigation sliding line on hover - when no item is 'current' or 'selected'

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

悬停时的导航滑动线-当没有项目为“当前"或“选定"时 [英] Navigation sliding line on hover - when no item is &#39;current&#39; or &#39;selected&#39;

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

悬停时的导航滑动线-当没有项目为“当前"或“选定"时 [英] Navigation sliding line on hover - when no item is 'current' or 'selected'

登录关闭