1. 首页
  2. css

使用CSS选择器创建动画菜单指示器

以下文章由澳大利亚纽卡斯尔创意机构Headjam的前端开发人员jamesnowland撰写。James在这里创建了一个相当简单的小效果,但是您可能认为它需要一点JavaScript。相反,它使用了一些巧妙的选择器用法,我将介绍使用同级选择器和伪元素来创建仅限CSS的菜单指示符的创造性方法,这通常是使用JavaScript实现的。

下面是我们将要创建的内容:

我们将此分解为三个步骤:

  • 基本结构和样式
  • 构建指示符
  • 创建指示符移动

在整个示例中,我们还将利用scs来利用Sass提供的变量和函数,这些变量和函数使事情更易于长期维护。

步骤1:基本结构和样式设置

首先,让我们使用基本的无序列表结构为菜单设置HTML。我们还可以标记基类名称来启动操作。

<ul>

Nothing too fancy so far. We have the <ul>元素具有PrimaryNav类名,该类名充当其中列表项的容器,每个元素具有Nav-item类。

定义变量

此导航的一个关键特性是填充基于容器的空间的最大宽度在菜单项的数量上。在这种情况下,我们将在SCS中设置一个$menu-items变量,然后用它来计算标记中每个.Nav-item$width值。

我们还添加了一个$indicator-color变量来定义您猜到的将用于菜单悬停指示器的颜色。

// Menu Item Variables// The number of items in the menu$menu-items: 5;// We multiply it by 1% to get the correct % unit$width: (100/$menu-items) * 1%;// Colors$background-color: #121212;$indicator-color: #e82d00;

从这里开始设置样式,我们可以为菜单创建基本样式:

// The parent container.PrimaryNav {// Remove the bullet points by defaultlist-style: none;// Center all the things!margin: 50px auto;// The nav will never exceed this width and what our calculated percentages related back to max-width: 720px;padding: 0;width: 100%;}// The menu items.Nav-item {background: #fff;display: block;float: left;margin: 0;padding: 0;text-align: center;// Our current calculation of 5 items will generate 20%width: $width;// The first item in the menu&:first-child {border-radius: 3px 0 0 3px;}// The last item in the menu&:last-child {border-radius: 0 3px 3px 0;}// If the menu item is active, give it the same color as the indicator&.is-active a {color: $indicator-color;}a {color: $background-color;display: block;padding-top: 20px;padding-bottom: 20px;text-decoration: none;&:hover {color: $indicator-color;}}}

步骤2:构建指示器

我们将以使用多个类的方式来标记它。我们可以使用.PrimaryNav类来完成同样的任务,但是添加另一个类名将允许更大的灵活性。

我们已经有了.PrimaryNav类,它包含主要的导航样式。现在让我们创建.with-indicator来构建指示符:

<ul>

This is where we can use CSS in place of what we would normally accomplish in JavaScript. We know that adding a class to an element on hover is JavaScript territory, but let\"s see how we can do this in CSS alone.

The tricky part is getting the menu items to communicate to each other. In an unordered list, the first list item (:first-child)可以通过兄弟选择器+~与第二个子级进行对话,但是第二个子级列表项不能与第一个子级进行对话(不能像CSS那样在DOM中倒退)。

结果是列表项中最好的侦听器是:last-child。最后一个孩子能听到其兄弟姐妹的所有:hover:active状态。这使它成为设置指示器的最佳选择。

我们使用最后一个子元素的:before:after元素创建红色指示器。:before元素将使用一个CSS三角形和负边距将其居中。

// The hover indicator.with-indicator {// The menu is \"relative\" to the absolute position last-child pseudo elements.position: relative;.Nav-item:last-child {&:before, &:after {content: \"\";display: block;position: absolute;}// The CSS Triangle&:before {width: 0;height: 0;border: 6px solid transparent;border-top-color: $color-indicator;top: 0;left: 12.5%;// Fix the offset - may vary per usemargin-left: -3px;}// The block that sits behind the text&:after {width: $width;background: $indicator-color;top: -6px;bottom: -6px;left: 0;z-index: -1;}}}

第3步:使指示器移动现在设置好指示器,当光标悬停在菜单项上时,它需要能够移动。请看~选择器的强大功能,它将用于匹配标记中第一个子元素和最后一个子元素之间的任何元素。

现在,默认情况下<ul>元素上设置了position:relative,这意味着指示器与第一项齐平。我们可以通过修改left位置将指示器从一个项目移动到另一个项目,由于所有菜单的宽度都相等,我们知道要将指示器向下移动一个位置,:before:after:last-child选择器的偏移量必须等于.Nav-item的宽度。还记得我们方便的$width变量吗?我们可以在left属性上使用它。

这是我们在普通CSS中设置的方式:

**32***

让我们用Sass实现这个动态:

**33***

值得注意的是,三角形:before在这个left偏移之上有一个额外的半宽度偏移。

现在让我们添加一些动画和另一个Sassfor循环,这样我们就可以根据我们所在的页面初始化指示器的位置。当你在物品上方移动时,指示灯将移动。但是,一旦你鼠标离开它就会回到is-active状态。一个漂亮整洁的JavaScript自由制作菜单指示器的方法。

// We had to use !important to make the hovers overide for when the :last-child is-active or hovered@for $i from 1 through $menu-items-loop-offset {// When the menu is :hover make the indicator line up with it..Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after {left:($width*$i)-$width !important;}.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{left:($width*$i)+($width/2)-$width !important;}} // end @for loop// make sure the last-child talks to itself.Nav-item {&:last-child {&:hover, &.is-active {&:before {left: (100%-$width)+($width/2) !important;}&:after{left: 100%-$width !important;}}}}

最后的结果

就在这里!没有JavaScript依赖项的动画菜单指示器。

使用CSS选择器创建动画菜单指示器 为WP2原创文章,链接:https://www.wp2.cn/css/%e4%bd%bf%e7%94%a8css%e9%80%89%e6%8b%a9%e5%99%a8%e5%88%9b%e5%bb%ba%e5%8a%a8%e7%94%bb%e8%8f%9c%e5%8d%95%e6%8c%87%e7%a4%ba%e5%99%a8/

发表评论

您的电子邮箱地址不会被公开。