`
xzknet
  • 浏览: 310093 次
  • 性别: Icon_minigender_1
  • 来自: 河南
文章分类
社区版块
存档分类
最新评论

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

阅读更多

使用方法:
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中加入定位标签:<a id = "lnkDir" href = template所在目录相对于根目录的位置></a>。例如:
template文件:normalPage.dwt存在于站点的templates目录,这需要在normalPage.dwt中加入。
<a id="lnkDir" href="../."></a>
显示菜单:
最后使用,MainMenu的show()命令显示菜单。
例如:
main.show()
用户可以自定义菜单的显示方法。通过定义fShow(id)函数.函数原型如下
fShow(id)
这里id时将要显示的菜单(div元素)的id号。可以通过这个id号控制菜单。定义mfShow(id)可以改变主菜单的显示方法。
注释:
有子菜单的菜单项后的箭头图标文件名必须为arrow.gif文件,如果我提供的箭头颜色和您希望的不符请更改这个文件。
CSS样式的定义:
定义您自己的菜单样式,请修改menu.css,其中
.sMenuItem 为菜单项被选中时的样式
.nMenuItem 为菜单项未被选中时的菜单样式
.mnuTitle 为主菜单的标题样式
.nMenuBk 为菜单背景层样式

 

想看源代码?点这里下载吧

http://download.csdn.net/source/726478

 

分享到:
评论

相关推荐

    多种多级竖向下拉导航菜单集合

    “竖向”则意味着菜单项沿着垂直方向排列,这是网页设计中常见的一种布局方式。相比横向布局,竖向布局可以更有效地利用屏幕空间,特别是在移动设备上,能保持良好的可读性和触控友好性。 “下拉”导航菜单是一种...

    jquery实现红色竖向多级向右展开的导航菜单效果

    多级菜单意味着菜单可以包含若干层级的子菜单,本例中通过嵌套和标签实现了多级结构,并且通过CSS设置了子菜单向右展开的效果。这显示了如何使用基本的Web技术构建复杂的导航结构。 5. 对比传统的导航菜单实现方式...

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    通过本文的介绍,我们了解了如何使用jQuery和CSS来实现一个实用的多级竖向展开树形菜单。无论是在项目开发中快速搭建出漂亮的导航,还是为了实现一个具有交互性的展示效果,这样的技术实现都是非常有价值和实用的。...

    CSS+js无限级折叠导航菜单

    总的来说,"CSS+js无限级折叠导航菜单"技术是一种高效且实用的方法,它结合了CSS的样式控制和JavaScript的动态特性,能够创建出美观且交互性强的多级菜单,无论是在大型网站还是小型项目中都有广泛的应用。...

    jquery横向和竖向支持三级、四级下拉导航菜单

    本文将深入探讨如何使用jQuery实现一个既支持横向又支持竖向的,可扩展到三级甚至四级的下拉导航菜单。这种菜单不仅提高了用户体验,也使网站结构更加清晰。 首先,我们需要理解jQuery的基础。jQuery是一个轻量级的...

    好看的下拉菜单

    在网页设计和开发中,下拉菜单是一种常见的交互元素,用于提供多级导航或大量选项的简洁展示方式。"好看的下拉菜单"通常指的是那些既功能完备又具有美观设计的下拉菜单,它们能提升用户体验,使用户更容易找到并访问...

    精典的三级树型菜单,拿来就可以用的。

    例如,`三级竖向展开-收缩导航菜单-网页特效观止-网页特效代码JsCode_CN.htm`这个文件名可能就是包含实现这种功能的JavaScript代码的HTML页面。在JavaScript中,可以使用DOM操作、事件监听等方式来实现菜单的交互...

    水平竖弹向上多级弹出菜单特效代码

    - 多级菜单:利用伪类(`:hover`、`:active`等)和嵌套选择器来处理不同层级菜单的显示和隐藏逻辑。 2. JavaScript部分: - 事件监听:使用`addEventListener`方法监听用户的鼠标悬停或点击事件,触发相应的回调...

    jquery实现可横向和竖向展开的动态下滑菜单效果

    这意味着导航菜单不仅可以在水平方向上展开(如普通的下拉菜单),还可以在垂直方向上展开(类似侧边栏)。这种多方向的展开方式为页面内容的组织提供了更大的灵活性。 实现这种效果,我们利用了几个关键的jQuery...

    html垂直手风琴.zip

    HTML垂直手风琴是一种网页设计元素,主要用于在有限的空间内展示多级信息。它通过折叠和展开的方式,使得用户可以按需查看详细内容,从而提高用户体验。这种效果常见于导航菜单、FAQs(常见问题解答)和部分详情展示...

Global site tag (gtag.js) - Google Analytics