第一步;其实这个菜单的制作主要是用javascript+css制作而成的,javascript其实不难,难在css的定制上!javascript由: mt_dropdownC.js (控制图片的路径) mt_dropdown_initialize.js (存放按钮事件和图片的调用) mt_dropdown_content.js (存放菜单项) 这三个js组成的,下面我一步步地介绍这个菜单的做法。
第二步;我们分析一下mt_dropdown_content.js这个文件里的代码: var menu1 = ms.addMenu(document.getElementById("menu1")); menu1.addItem("- 网络开发","http://www.3dapple.com/net.asp";); menu1 //相当于第一菜单 网络开发 //菜单名 http://www.3dapple.com/net.asp //链接地址 var subMenu0 = menu1.addMenu(menu1.items[0]); subMenu0.addItem("- Asp代码", "http://www.3dapple.com/net1.asp?name=net&;type=asp"); subMenu0 //定义二级菜单 Asp代码 //二级菜单名 http://www.3dapple.com/net1.asp?name=net&type=asp //链接地址 其它不做详细分析,类同!
第三步;分析一下mt_dropdown_initialize.js这个文件里的代码 menu1.onactivate = function() { swapImage("button1", preloaded[1][1].src) }; menu1.ondeactivate = function() { swapImage("button1", preloaded[1][1].src) }; button1 //指页面内定义的第一菜单的按钮名
第四步;我们分析一下mt_dropdownC.js这个文件里的代码,这个文件里定义菜单里所用的相关路径及打开文式
第五步;分析页面按钮,这里只对“精品代码”做一下分析
<a href="script.asp" id=menu1 ><img border=0 height=24 id=button1 name=button1 src="media/dm.jpg" width=94></a> id=menu1 //指定打开第一菜单 id=button1 //调用的图片名 我用“id”这个图片加以控制。其它类同
第六步;css 就不用我告诉大家了 特别附上源文件 希望大家能够喜欢 不过要告诉大家一个缺点就是这个菜单极其耗机器资源!打开速度也没有一般的菜单快,但他好在是三级的,可以动态生成。
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18