学习从实践开始之jQuery插件开发:菜单插件开发

前言：

　　从软件到网站，菜单可以说是无处不在。在传统应用软件开发中，一般都有现成的控件可以使用；但是在网页开发时，基本上要靠开发人员自己动手设计。虽然这不是多么高深的技术，但对于新手来说还是颇有难度。如果你是一个新手，我希望你能从本文中学到东西；如果你是高手，我希望你能留下你宝贵的意见和建议

一.要做什么插件？
　　我想要实现一个可以在网站或WEB应用系统中使用，可以灵活的定制外观、简单、易于使用、方便扩展、稳定的菜单插件。它可以被用在网站主导航条上，亦可以用在管理后台。

二.想要的效果是什么？
　　平时菜单处于收起状态，当鼠标移入显示其下级菜单，以此类推；可以方便的使用html标签设置菜单的结构，也可以使用数组动态生成。

三.设计一下功能

 

• 对图片的说明

1. 菜单项默认的状态。
2. 拥有下级菜单且鼠标移入时的状态。
3. 间隔（起到分组的效果）
4. 拥有下级菜单，鼠标未移入时的状态。
5. 竖排拥有下级菜单且鼠标移入时的状态。
6. 获得焦点时的状态。

• 其他功能

1. 菜单所有状态的样式均通过CSS控制，可以根据需要灵活修改。
2. 通过HTML和javascript两种方式生成菜单。
3. 为菜单项指定点击回调函数和跳转地址（当指定回调函数时，不设置URL地址，而是将URL地址传入回调函数）。

四.如何实现功能？
　　 1.使用CSS样式控制外观。
　　　　 *为了避免CSS命名冲突，我们需要为插件确定一个名字空间，其下所有样式都在该命名空间下。

　　2.菜单标签的选择
　　　　*一般来说实现菜单的标签多数会选择列表标签<ul><li></li></ul>来实现，我们也不例外。

　　　　菜单项：<li><a href="链接地址"><span>菜单项显示名称</span></a></li>
　　3.控制UL标签的显示方式
　　　　*使用CSS去掉符号和缩进
　　　　*使用CSS横向排列，横向排列有两种方法：
　　　　　　(1).用的比较多的是浮动排列（float:left;）;但是这种方式有个最大的问题是会破坏页面结构，我不是很喜欢这种方式。
　　　　　　(2).使用内联（display:inline-block）的方式;目前已知的问题是低版本浏览器可能支持的不太好，这个问题网络上有专门的文章讨论，这里我就不再赘述了。
　　　　*当我在使用这种方式是出现了一个小问题，就是块与块之间有大概10px的空隙。我删除掉HTML代码里标签之间的空隙（换行）后，这些空隙消失了；这虽然可以解决问题，但是缺破坏了代码的结构，可读性差；如果是动态生成的还能接受。所以我想到了另一种解决办法，那就是设置每一个块(<li>标签)的的左边距为-10px;同时设置<ul>的左内距为10px，perfect!!!

 

五.浏览器兼容
　　未在IE6和IE7下进行相关测试。
六.功能实现和调用

样式控制

 

插件代码

 

调用JS代码

 

HTML

 

七.下载

点击这里 下载使用例子，和所有文件。