标准7：导航二级菜单的细节设计要全面_《永易搜建站110项标准》

网站一般都需要有二级导航，设计稿上一定要把这个效果设计出来，这样才方便后续制作环节做个参考（当然，有三级导航、四级导航的也是要设计出来的）。

这里主要设计这两个方面：

1、二级导航的静态样式

2、二级导航的鼠标下拉动画效果

另外，对于二级导航的制作，有一些要求：这个二级导航需要有下拉效果，不能只是一个鼠标放上去突然展示出来的简单效果。一般我们建议是进行下拉缓动（JS、CSS3动画都可以）

要求总结一下就只有一条：下拉过程要有动画效果。

推荐的是superslide的二级菜单效果，代码如下：

  jQuery(".nav").slide({ 
    type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide）
    titCell:".nLi", //鼠标触发对象
    targetCell:".sub", //titCell里面包含的要显示/消失的对象
    effect:"slideDown", //targetCell下拉效果
    delayTime:200 , //效果时间
    triggerTime:0, //鼠标延迟触发时间（默认150）
    returnDefault:false,
  }); 

slideDown效果，相比于纯CSS，没有css3动画的效果，要好得多。因为这有一个展开过程，不会显得那么突兀。

另外，也可以使用css3的动画来制作（尤其是手机网站）：

.header .menu_nav{

   position: absolute;
    top: -357px;
    z-index: 333;
    width: 15rem;
    opacity: 0;
    -webkit-transition: all .5s;
}

这样，通过控制top值来实现菜单下拉的动画，也是可以的。