文本/链接

Material Design 风格鼠标滑过导航菜单特效

阿里云


这是一款 Material Design 风格鼠标滑过导航菜单特效。该导航菜单特效简单实用,可以制作出非常漂亮的鼠标滑过导航菜单时的下划线动画效果。

使用方法

该导航菜单使用一个<nav>元素来作为容器,里面放置一个<div>作为包裹元素,导航菜单使用无序列表来制作。

也想出现在这里?联系我们
创客主机
  1. <nav class="navigation">
  2.   <div class="wrapper">
  3.     <ul class="navigation-list ul-reset">
  4.       <li class="navigation-item ib">
  5.         <a href="#" class="navigation-link">
  6.           Home
  7.         </a>
  8.       </li>
  9.       <li class="navigation-item ib">
  10.         <a href="#" class="navigation-link">
  11.           About
  12.         </a>
  13.       </li>
  14.       <li class="navigation-item ib">
  15.         <a href="#" class="navigation-link">
  16.           Contact
  17.         </a>
  18.       </li>
  19.       <li class="navigation-item ib">
  20.         <a href="#" class="navigation-link">
  21.           FAQ
  22.         </a>
  23.       </li>
  24.       <li class="navigation-item ib">
  25.         <a href="#" class="navigation-link">
  26.           More
  27.         </a>
  28.       </li>
  29.     </ul>
  30.   </div>
  31. </nav>

CSS 样式

整个导航菜单采用弹性布局,宽度为视口宽度的 80%。在视口宽度小于 1024 像素时,菜单的宽度为视口宽度的 90%。

  1. .wrapper {
  2.   width: 80%;
  3.   margin-right: auto;
  4.   margin-left: auto;
  5.   padding-right: 20px;
  6.   padding-left: 20px;
  7. } 
  8. @media only screen and (max-width:1024px) {
  9.   .wrapper {
  10.     width: 90%;
  11.   }
  12. }

菜单项使用内联显示方式:

  1. .ul-reset {
  2.   padding-left: 0;
  3.   margin-top: 0;
  4.   margin-bottom: 0;
  5.   list-style: none;
  6. }
  7. .ib {
  8.   display: -moz-inline-stack;
  9.   display: inline-block;
  10.   zoom: 1;
  11.   *display: inline;
  12.   vertical-align: top;
  13. }

鼠标滑过导航菜单项时的下划线使用使用超链接的:before 伪元素来制作。开始是它的宽度为 0,使用绝对定位,位于超链接的左侧位置。

  1. .navigation {
  2.   background-color: #eee;
  3.   font-weight: 700;
  4. }
  5.  
  6. .navigation-list {
  7.   font-size: 0;
  8.   padding-top: 10px;
  9.   padding-bottom: 10px;
  10. }
  11.  
  12. .navigation-item {
  13.   font-size: 1.2rem;
  14. }
  15.  
  16. .navigation-link {
  17.   display: block;
  18.   position: relative;
  19.   padding: 5px 20px;
  20.   text-decoration: none;
  21.   color: #333;
  22.   -webkit-transition: color .2s ease-in-out;
  23.   transition: color .2s ease-in-out;
  24. }
  25.  
  26. .navigation-link:before {
  27.   content: "";
  28.   position: absolute;
  29.   bottom: 0;
  30.   width: 0;
  31.   border-bottom: solid 2px;
  32. }
  33.  
  34. .navigation-link:before {
  35.   left: 0;
  36. }
  37. .navigation-link:before {
  38.   -webkit-transition: width .2s ease-in-out;
  39.   transition: width .2s ease-in-out;
  40. }

在鼠标滑过菜单项时,:before 伪元素的宽度被修改为 100%,同时颜色修改为绿色。

  1. .navigation-link:hover {
  2.   color: #009688;
  3. }
  4.  
  5. .navigation-link:hover:before {
  6.   width: 100%;
  7. }

Material Design 风格鼠标滑过导航菜单特效

已有 354 人购买
  • 6i2b
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!