Javascript实现网页上的多级菜单(竖着)

简介: 使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption

使用方法:
1,包含menu.js和menu.css

2,用创建主菜单类
   main = new MainMenu(10,50,"My Menu");
这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。
之后用MenuItem类建立菜单项
MenuItem的源型如下:
   function MenuItem(_parent,_caption, _url, _target,_style, _image,_templatePos,_description)其中,_parent为父菜单项,例如:

Item1 = new MenuItem(main,"Ken_xu'Page","http://blog.csdn.net/xzknet"
   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");建立了一个main的菜单项,又如
   Item2 = new MenuItem(Item1,"Ken_xu'Page","http://blog.csdn.net/xzknet"
   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");建立一个Item1的子菜单项
其他参数:
_caption为菜单项的标题,new当_caption为“-”时可显示分割线。
url为其连接目的地
_target为文档读取的位置(同a标签的target属性)
_style可以添加菜单项的特殊CSS属性
_image为显示在菜单文字前小图标的路径
_description为菜单注释(同a标签的title属性)。
特别说明:
_templatePos 用于和Dreamweaver结合制作网页时。当需要使用template机制,而_url又需要在网页中相对定位时。设置_templatePos为true并且需要在dreamweaver的template中加入定位标签:。例如:
template文件:normalPage.dwt存在于站点的templates目录,这需要在normalPage.dwt中加入。

显示菜单:
最后使用,MainMenu的show()命令显示菜单。
例如:
main.show()
用户可以自定义菜单的显示方法。通过定义fShow(id)函数.函数原型如下
fShow(id)
这里id时将要显示的菜单(div元素)的id号。可以通过这个id号控制菜单。定义mfShow(id)可以改变主菜单的显示方法。
注释:
有子菜单的菜单项后的箭头图标文件名必须为arrow.gif文件,如果我提供的箭头颜色和您希望的不符请更改这个文件。
CSS样式的定义:
定义您自己的菜单样式,请修改menu.css,其中
.sMenuItem 为菜单项被选中时的样式
.nMenuItem 为菜单项未被选中时的菜单样式
.mnuTitle 为主菜单的标题样式
.nMenuBk 为菜单背景层样式

 

相关文章
|
4月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
282 1
|
5月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
5月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
93 5
|
4月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
59 1
【JavaScript】网页交互的灵魂舞者
|
3月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
59 2
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
5月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
266 0
|
4月前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
587 0

热门文章

最新文章