当前位置：首页 > 网页特效 > 导航菜单

20种炫酷的菜单线条动画特效UI设计效果

分类：导航菜单日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
所有的菜单都具有相同的HTML结构：

```html
<section class="section section--menu" id="Prospero">
 
  <h2 class="section__title">Prospero</h2>
 
  <nav class="menu menu--prospero">
 
    <ul class="menu__list">
      <li class="menu__item menu__item--current">
        <a class="menu__link">Home</a>
      </li>
      <li class="menu__item">
        <a class="menu__link">Who we are</a>
      </li>
      <li class="menu__item">
        <a class="menu__link">What we offer</a>
      </li>
      <li class="menu__item">
        <a class="menu__link">Our news</a>
      </li>
      <li class="menu__item">
        <a class="menu__link">Contact us</a>
      </li>
    </ul>
     
  </nav>
 
</section> 
```             
menu__item--current class类用于标识当前被选择的项。各个效果中的nav元素都有自己的class类，用于制作不同的线条效果。

##### CSS样式 
所有菜单的共同CSS样式如下。

```html
.menu {
  line-height: 1;
  margin: 0 auto 3em;
}
 
.menu__list {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.menu__item {
  display: block;
  margin: 1em 0;
}
 
.menu__link {
  font-size: 1.05em;
  font-weight: bold;
  display: block;
  padding: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.menu__link:hover,
.menu__link:focus {
  outline: none;
}            
```
菜单使用flexbox来进行布局，并为链接提供了一些通用样式。由于IE浏览器不支持flexbox，所以在IE中菜单的布局会出现错位的情况。

下面是第一种菜单线条效果Prospero的CSS样式：

```html
/* Prospero */
.menu--prospero .menu__link {
  position: relative;
  display: block;
  margin: 0 1.5em;
  padding: 0.75em 0;
  text-align: center;
  color: #b5b5b5;
  transition: color 0.3s;
}
 
.menu--prospero .menu__link:hover,
.menu--prospero .menu__link:focus {
  color: #929292;
}
 
.menu--prospero .menu__item--current .menu__link {
  color: #d94f5c;
}
 
.menu--prospero .menu__link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #d94f5c;
  transform: scale3d(0, 1, 1);
  transition: transform 0.1s;
}
 
.menu--prospero .menu__item--current .menu__link::before {
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.3s;
}            
```    
在这个效果中，只是简单的使用伪元素来制作一个线条，然后使它从中间开始扩展。它被使用绝对定位放置在链接的下方，初始化时在X方向上被缩小为0。当用户点击了一个菜单项的时候，线条有0变为1。

web299.com

20种炫酷的菜单线条动画特效UI设计效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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