频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
Web前端开发实战5:导航菜单(二)
2016-01-04 09:22:57         来源:连宏伟(博客)  
收藏   我要投稿

四伸缩菜单之垂直方向

制作原理:我们还是在原来的水平导航菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。最简单的方法

还是使用CSS样式的方法实现,制作菜单的方法很多,找到适合自己的即可。

代码:

 


 

效果展示:

初始化状态或鼠标离开的状态:

\

鼠标放在相应的元素上的状态:

\

五伸缩菜单之水平方向(JavaScript方法)

制作原理:我们还是上述菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。由于这种伸缩变化相对麻烦

我们使用JS或jQuery来实现。

代码:

 






<script type="text/javascript">
window.onload=function(){
    var aLists=document.getElementsByTagName("a");
	//遍历每个li元素
	for(var i=0;iseover=function(){
		          var that=this;
			  //清除定时器
			  clearInterval(this.time);
			  //设置定时器
			  that.time=setInterval(function(){
			         that.style.width=that.offsetWidth+8+"px";
				 if(that.offsetWidth>=120){
				    clearInterval(that.time);
				 }
			  },30)
	     }
		 
	     aLists[i].onmouseout=function(){
		          clearInterval(this.time);
		          var that=this;
			  that.time=setInterval(function(){
			         that.style.width=that.offsetWidth-8+"px";
				 if(that.offsetWidth<=90){
				    that.offsetWidth="90px";
				    clearInterval(that.time);
				 }
			  },30)
	    }
	}
}
</script>

 

 

效果展示:

初始化状态或鼠标离开的状态:

\

鼠标放在相应的元素上的状态:

\

六伸缩菜单之水平方向(jQuery方法)

和上面使用JavaScript方法实现的区别是:

 

  
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
    //使用jQuery库中的hover()方法实现鼠标放上去和离开时触发事件
        $("a").hover(
	        function(){
		//使用jQuery库中的animate()方法实现菜单伸缩动画变换
		$(this).stop().animate({"width":"120px"},200);
		},
		
		function(){
		    //使用jQuery库中的animate()方法实现菜单伸缩动画变换
		    $(this).stop().animate({"width":"90px"},200);
		}
	)
})
</script>

 

效果还是和上面的一模一样的。

 

 

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 前端 实战 菜单
上一篇:面向对象的设计模式(九),适配器模式
下一篇:干货,pomelo启动流程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站