多语言展示
当前在线:1644今日阅读:27今日分享:41

如何用jquery制作动画二级下拉菜单

jquery的动画二级下拉菜单制作过程。
工具/原料
1

jquery

2

Dreamweaver

分析
1

首先,分析一下程序主题。利用jquery更改html元素的css,更改显示方式或长宽等,来达到菜单展开的动态效果。

2

为了减少图片甚至不利用图片制作菜单,我们需要用div+css来达到代替图片的目的,同时,jquery的作用由切换图片变为更改div的css属性。

HTML部分
1

我们需要一些层DIV,来达到二级或多级菜单的效果。代码如下:--------------------------------------------------------------------------------         

  •            
                 
                   
                                     
                 
               
             
  • --------------------------------------------------------------------------------这时一个
  • ,表示一级菜单的显示,即第一层。

  • 2

    --------------------------------------------------------------------------------         

  •            
                 
                   
                                     
                 
               
               
                 
                   
                                     
                 
               
             
  • --------------------------------------------------------------------------------这是一个二级菜单的列表,用
  • 包裹。如图。

    3

    开始的

    部分,如图所示,这部分是最重要的,就是他们的id层不能错,否则会导致菜单列表顺序错乱。

    4

    二级菜单其实就是div和ul列表的结合。

    样式表
    1

    样式表的部分主要是说一下排布,一级二级的菜单排布。至于圆角矩形的菜单制作就不再提了。

    2

    只要你的盒子排布做的准确,字体图片的样式就都可以自定义了。

    JS代码
    1

    js的代码主要是修改元素的css,和一些事件响应。

    2

    最后,这里有一个常见错误,就是将jquery文件的引入位置放在了后面,导致报错。