当前位置:首页 >> 建站知识 >> 详情
sousuo
sousuo

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

上传时间:2020-05-22             浏览次数:85

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

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

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值来实现菜单下拉的动画,也是可以的。

继续浏览有关 永易搜 建站 建站110项标准 的文章
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们