html+css+js实现四种导航条的制作

今天为大家介绍四种不同的形式的导航条,在网页制作中想制作比较好看的菜单导航条,那么看看哪种形式是你的喜爱。

第一种,垂直菜单导航条的制作

代码:



 
 
 
 
 
 
  垂直菜单的制作
 
 
 
   


 

效果如下:

html+css+js实现四种导航条的制作_第1张图片

第二种,伸缩菜单导航条制作(需要用到js,记得引入.js文件)

代码:



 
 
 
 
 
 
  伸缩菜单的制作——水平方向
 
 
 
 
   

 
 

效果如下:

第三种,水平导航条的制作



 
 
 
 
 
 
  水平菜单的制作
 
 
 
   


 

效果如下:

第四种、圆角菜单的制作

代码:



 
 
 
 
 
 
  Document
 
 
 
   


 

效果如下:

注:导航条的颜色根据需求可以进行更改。

你可能感兴趣的:(html+css+js实现四种导航条的制作)