当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该导航菜单使用一个nav元素来作为容器，里面放置一个div作为包裹元素，导航菜单使用无序列表来制作。

```html
<nav class="navigation">
  <div class="wrapper">
    <ul class="navigation-list ul-reset">
      <li class="navigation-item ib">
        <a href="#" class="navigation-link">
          Home
        </a>
      </li>
      <li class="navigation-item ib">
        <a href="#" class="navigation-link">
          About
        </a>
      </li>
      <li class="navigation-item ib">
        <a href="#" class="navigation-link">
          Contact
        </a>
      </li>
      <li class="navigation-item ib">
        <a href="#" class="navigation-link">
          FAQ
        </a>
      </li>
      <li class="navigation-item ib">
        <a href="#" class="navigation-link">
          More
        </a>
      </li>
    </ul>
  </div>
</nav> 
```
#####  CSS样式
整个导航菜单采用弹性布局，宽度为视口宽度的80%。在视口宽度小于1024像素时，菜单的宽度为视口宽度的90%。

```html
.wrapper {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
} 
@media only screen and (max-width:1024px) {
  .wrapper {
    width: 90%;
  }
}                 
菜单项使用内联显示方式：

.ul-reset {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.ib {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}    
```              
鼠标滑过导航菜单项时的下划线使用使用超链接的:before伪元素来制作。开始是它的宽度为0，使用绝对定位，位于超链接的左侧位置。

```html
.navigation {
  background-color: #eee;
  font-weight: 700;
}
 
.navigation-list {
  font-size: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
 
.navigation-item {
  font-size: 1.2rem;
}
 
.navigation-link {
  display: block;
  position: relative;
  padding: 5px 20px;
  text-decoration: none;
  color: #333;
  -webkit-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}
 
.navigation-link:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px;
}
 
.navigation-link:before {
  left: 0;
}
.navigation-link:before {
  -webkit-transition: width .2s ease-in-out;
  transition: width .2s ease-in-out;
}
```
在鼠标滑过菜单项时，:before伪元素的宽度被修改为100%，同时颜色修改为绿色。

```html
.navigation-link:hover {
  color: #009688;
}
 
.navigation-link:hover:before {
  width: 100%;
}    
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果