Javascript实现透明下拉菜单

最新推荐文章于 2024-04-20 13:50:15 发布

mecho

最新推荐文章于 2024-04-20 13:50:15 发布

阅读量2k

点赞数

分类专栏： html/css js/jquery 文章标签： javascript menu stylesheet url 资讯 image

js/jquery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html/css

9 篇文章 0 订阅

订阅专栏

在网上找了一堆的菜单的实现，好像没有什么用，自已再去分析了一个菜单实现的例子，把它折分开了，现共享给大家！菜单可以在最上层，不用担心会在图片下面，提供源代码给直接使用！

说明：
下载附件后，里面有两个目录(Menu和Images)

Menu目录里包括三个JS文件，其中：

Menu_Content.js: 菜单内容，所有的菜单在这里面添加即可（小提示，可用asp或php直接构成哦）

Menu_func.js: 菜单实现的函数库，主要的程序存放处，不用修改！直接使用
(里面有定义图片名称的哦，这里可设定不同的图片效果)

Menu_init.js: 菜单初始处理用

Image:图片目录：存放的是菜单栏的背景图片和菜单效果处的图片

另有样式表: Mt_style.css和index.html

Mt_style.css：定义菜单透明度，图片效果，菜单文字样式定义

index.html：使用的效果

使用方法：
1. 请参照index.html,打开menu_content.js里制作好菜单
if (mtDropDown.isSupported()) {

var ms = new mtDropDownSet(mtDropDown.direction.down, 0, 0, mtDropDown.reference.bottomLeft);

        var menu1 = ms.addMenu(document.getElementById("menu1"));
        menu1.addItem("- 公司简介","about.asp"); // send no URL if nothing should happen onclick
        menu1.addItem("- 公司文化","Culture.asp"); // send no URL if nothing should happen onclick
        menu1.addItem("- 组织机构","Structure.asp");
        menu1.addItem("- 成长历程","History.asp");
        menu1.addItem("- 联系我们","Contact.asp");

//第二菜单
        var menu2 = ms.addMenu(document.getElementById("menu2"));
        menu2.addItem("- 企业新闻", "news.asp");
        menu2.addItem("- 业内资讯", "yenews.asp"); // send no URL if nothing should happen onclick

        mtDropDown.renderAll();
    }

2. 在index.html中的<head>之图片加入menu_func.js和menu_init.js两个文件
<SCRIPT language=javascript src="Menu/Menu_func.js"></SCRIPT>
<SCRIPT language=javascript src="Menu/Menu_init.js"></SCRIPT>

3. 加入样式表 Mt_style.css
<LINK href="mt_style.css" type=text/css rel=stylesheet>

4. 在< body>标签加入menu_init.js中的初始化函数init()
<BODY οnlοad=init();>

5. 加入菜单，这里使用了一个id=menuBar的<div>
<div align="center" id="menubar">
<a href="index.asp">首页</a>
<a href="about.asp" id=menu1>团队简介</a>
<a A href="news.asp" id=menu2>新闻资讯</a>
<a href="Product.asp" id=menu3>产品展示</a>
</div>

如使用所示，事实直接在需要添加菜单的地方与menu_content.js中的menu相同
然后再完成的地方加入菜单内容构造js即可！我这里是加在<div>之后
<SCRIPT language=javascript src="Menu/Menu_content.js"></SCRIPT>

BTW
在源代码menu_func.js中看到，另有打开菜单的方式可供选择:
mtDropDown.direction = {down:1,right:2};

使用时直接在new之内写入即可:
var ms = new mtDropDownSet(mtDropDown.direction.down, 0, 0, mtDropDown.reference.bottomLeft);

原文：http://www.id521.cn/thread-5081-1-1.html

mecho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现透明下拉菜单

在网上找了一堆的菜单的实现，好像没有什么用，自已再去分析了一个菜单实现的例子，把它折分开了，现共享给大家！菜单可以在最上层，不用担心会在图片下面，提供源代码给直接使用！说明：下载附件后，里面有两个目录(Menu和Images)Menu目录里包括三个JS文件，其中：Menu_Content.js: 菜单内容，所有的菜单在这里面添加即可（小提示，可用asp或php直接构成哦）Menu_
复制链接

扫一扫