Web前端开发实战5：导航菜单(二)

        四伸缩菜单之垂直方向

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

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

       代码：

     

	
网站首页
	
课程大厅
	
学习中心
	
经典案例
	
关于我们
    

       效果展示：

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

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

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

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

我们使用JS或jQuery来实现。     

       代码：

     

	
网站首页
	
课程大厅
	
学习中心
	
经典案例
	
关于我们
    

       效果展示：

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

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

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

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

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