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

以下文章由澳大利亚纽卡斯尔创意机构Headjam的前端开发人员jamesnowland撰写。James在这里创建了一个相当简单的小效果,但是您可能认为它需要一点JavaScript。相反,它使用了一些巧妙的选择器用法,我将介绍使用同级选择器和伪元素来创建仅限CSS的菜单指示符的创造性方法,这通常是使用JavaScript实现的。 下面是我们将要创建的内容: 我们将此分解为三个步骤: - 基本结构和样式 - 构建指示符 - 创建指示符移动 在整个示例中,我们还将利用scs来利用Sass提供的变量和函数,这些变量和函数使事情更易于长期维护。步骤1:基本结构和样式设置 首先,让我们使用基本的无序列表结构为菜单设置HTML。我们还可以标记基类名称来启动操作。 Nothing too fancy so far. We have the 元素具有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来构建指示符: 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步:使指示器移动现在设置好指示器,当光标悬停在菜单项上时,它需要能够移动。请看~选择器的强大功能,它将用于匹配标记中第一个子元素和最后一个子元素之间的任何元素。 现在,默认情况下元素上设置了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依赖项的动画菜单指示器。

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子::在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码(Source)更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期:2020-09-02 17:44:16 浏览:1127

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩:在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点:#说明#参数#源码说明(Description)钩子名的动态部分,$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数(Parameters)参数类...

日期:2020-09-02 17:44:20 浏览:1032

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this->id_data[‘base’]}", WP_Customize_Setting $this )动作钩子::在调用WP_Customize_Setting::save()方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_data...

日期:2020-08-15 15:47:24 浏览:775

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this->id_data[‘base’]}", mixed $default )过滤器::过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_date['base'],指的是设置...

日期:2020-08-15 15:47:24 浏览:866

get_comment_author_url

过滤钩子:过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期:2020-08-10 23:06:14 浏览:903

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩:启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码(Source)更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期:2020-08-02 09:56:09 浏览:848

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩:在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分$_GET['updated']引用了非默认的...

日期:2020-08-02 09:56:03 浏览:834

pre_wp_is_site_initialized

过滤器::过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期:2020-07-29 10:15:38 浏览:809

WordPress 的SEO 教学:如何在网站中加入关键字(Meta Keywords)与Meta 描述(Meta Description)?

你想在WordPress 中添加关键字和meta 描述吗?关键字和meta 描述使你能够提高网站的SEO。在本文中,我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述?关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时,可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯,可以参考Google的说明。Meta 关键字和描...

日期:2020-10-03 21:18:25 浏览:1619

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化,意思近于「关键字自然排序」、「网站排名优化」。简言之,SEO是以搜索引擎(如Google、Bing)为曝光媒体的行销手法。例如搜寻「wordpress教学」,会看到本站的「WordPress教学:12个课程…」排行Google第一:关键字:wordpress教学、wordpress课程…若搜寻「网站架设」,则会看到另一个网页排名第1:关键字:网站架设、架站…以上两个网页,每月从搜寻引擎导入自然流量,达2万4千:每月「有机搜...

日期:2020-10-30 17:23:57 浏览:1262