菜单导航 滚动轮播 Tab选项卡 表单按钮 表格图层 时间日期 窗口特效 图片特效 焦点图 视频播放 在线客服 显示隐藏 特殊样式 其他常用 纯css flash特效 jquery特效 广告代码 相册 插件 仿大型网站

鼠标经过弹性显示下拉菜单

鼠标经过弹性显示下拉菜单
关键字:导航菜单,下级,多级,弹性
文件大小: 39 KB
来源:网上收集
更新时间:2011-05-31

下载说明

本站所有资源仅供学习与参考,请勿用于商业用途。

热门推荐

纯css 个人模板 企业模板 html5 响应式模板

特效介绍

第一步;其实这个菜单的制作主要是用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”这个图片加以控制

相关特效

查看更多特效分类

导航