你的位置:首页 > 软件开发 > Java > JavaScript实战(带收放动画效果的导航菜单)

JavaScript实战(带收放动画效果的导航菜单)

发布时间:2016-08-13 18:00:09
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊!( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html )今天是第 ...

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊!

( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html )

今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-))

JavaScript实战(带收放动画效果的导航菜单)

动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!

如何实现呢?

第一步:用什么来实现菜单?HTML代码设计如下

JavaScript实战(带收放动画效果的导航菜单)

 

未应用样式之前是这个样子的:很古老吧!!!

JavaScript实战(带收放动画效果的导航菜单)

 

第二步:CSS样式。鼠标hover改变所有目标的背景和字体颜色,直接用CSS的transition和:hover,而其他的CSS样式布局就不全部列举了,大家自己动手吧,主要注意以下几点:

    #ul{      ....      z-index: 100;    }    #ul li{      display: inline-block;      position: relative;      top: 0;      left: -25px;      width: 10%;      min-width: 70px;      height: 30px;      text-align: center;      line-height: 30px;      border: 1px solid gray;      border-radius:10px;      background-color: aliceblue;      cursor: pointer;      -webkit-transition: all ease-in-out 0.3s;      -moz-transition: all ease-in-out 0.3s;      -ms-transition: all ease-in-out 0.3s;      -o-transition: all ease-in-out 0.3s;      transition: all ease-in-out 0.3s;    }    #ul li:hover{background-color: aquamarine;color: red;}    ...    .show-hide:hover{background-color: beige}    .a-div{      background-color: aquamarine;      border-radius:10px;      color: black;      display: none;      opacity: 0    }    .a{      z-index: -1;      display: block;      ...    }           
答案肯定是有的,利用事件的冒泡机制!在父元素ul标签上添加事件监听,而在监听函数里直接改变触发事件的元素样式就可以了,就这么简单!代码如下:
var ul = document.getElementById('ul');ul.addEventListener('mouseover',listener1,false);ul.addEventListener('mouseout',listener2,false);ul.addEventListener('click',listener3,false);
第四部:主角登场!实现listener1、listener2、listener3监听函数。不过,IE9以下不支持getComputedStyle方法,IE的Element对象有currentStyle属性;如果你对CSS的处理不是很熟悉,看看我的总结:用原生JS读写CSS样式的方法总结

原标题:JavaScript实战(带收放动画效果的导航菜单)

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。