1

如何使我的菜单的悬停状态“红色淡入淡出”以自然运动水平移动（如图像中的示例）？

这是我在jsFiddle中制作的菜单，用于尝试学习如何降低运动。我正在尝试模拟http://www.fullyillustrated.com/菜单在其悬停状态时的工作方式，蓝色条跟随鼠标到下一个链接以及下面发布的导航栏图像的图像。

来自 Smashing Magazines Smart Transitions UX 文章 

#menu {
   background: #181818;
   height: 120px;
   width: 500px;
}
#menu .center {
   display: table;
   height: 120px;
   width: 500px;
}
#menu ul.menu-center {
   display: table-cell;
   vertical-align: middle;
}
#menu ul li {
   display: inline;
}
#menu li a {
   color: #FFF;
   padding: 0 50px 0 50px;
   height: 120px;
}
#menu li a:hover {
   background: red;
   transition: .25s linear;
   -webit-transition: .25s linear;
   -moz-transition: .25s linear;
   padding: 50px 50px 50px 50px;
}
4

2 回答 2

2

我认为您要实现的目标必须使用 Javascript 来完成……只是为了确保我知道您在问什么：

  • 您有一个栏，当您将鼠标悬停在导航中的链接上时，它会动画到活动锚点，并且与锚点大小相同。

这是我创建的小提琴，以展示我认为您要问的内容：

http://jsfiddle.net/Dm9Eu/2/

如果您在访问Fully Illustrated 时查看浏览器的Web 检查器，您会看到导航有一个gutter 元素，其中包含一个span#highlight，它是包含锚点的导航ul 的整个宽度。

当您将鼠标悬停在锚点上时，span#highlight 的左侧位置会发生变化。

您可以使用 javascript 设置一个函数，在悬停时获取锚点的左侧位置，在 span#highlight 上设置该位置并使用 css3 您可以将转换设置为“左”，它应该模拟您想要的效果。

HTML：

<div id="header">
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
</ul>
<div id="gutter">
    <span id="highlight"></span>
</div>    
</div>

CSS：

#header {
    position: relative;
}
#menu {
    width: 100%;
    height: 120px;
    background: #181818;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li {
    margin: 0;
    padding: 0;
    float: left;
}
#menu li a {
    color: #FFF;
    margin: 0;
    padding: 50px;
    display: block;
}

#highlight {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background: #f00;
    transition: all .5s;
}

JS：

var doc = 文档；

var anchors = doc.getElementById('menu').getElementsByTagName('a');
var highlight = doc.getElementById('highlight');

for(var i = 0, len = anchors.length; i < len; i++) {
    anchors[i].addEventListener('mouseover', function(e) {
        var target = e.target;
        highlight.style.width = target.offsetWidth + 'px';
        highlight.style.left = target.offsetLeft + 'px';
    });

    anchors[i].addEventListener('mouseout', function(e) {
        var target = e.target;
        var storeNeg = '-' + highlight.style.width;
        console.log(storeNeg);
        highlight.style.left = storeNeg;
    });
}

只是一些注意事项：

  • 我是用 vanilla JS 做的，所以如果你关心浏览器的兼容性，你可以使用像 jQuery <= 1.9 这样的库。

  • 我会用js在页面上注入排水沟，因为如果js被禁用，就不需要它了。

希望能帮助/回答您的问题！

于 2013-11-01T12:36:26.953 回答
0

我不确定我是否已经准确回答了这个问题，但是，这里是：

在这里小提琴：http: //jsfiddle.net/xcRGR/4/

#menu li a {
  color: #FFF;
  padding: 50px 0 50px 0; <- amended
  margin: 0 50px 0 50px; <- New
  display: inline-block; <- NEW
}
#menu li a:hover {
  background: red;
  transition: .25s linear;
  -webit-transition: .25s linear;
  -moz-transition: .25s linear;
  padding: 50px 50px 50px 50px; <- amended
  margin: 0; <- NEW
  width: auto;
}

我基本上在按钮上添加了一些边距，将填充更改为水平而不是垂直并转换了边距，因此边距（水平）的减少被填充的增加所占据。

于 2013-11-01T09:12:31.890 回答