经典实用带图片精彩导航栏菜单代码资源-CSDN下载

共24个文件

gif：9个

css：5个

html：5个

需积分: 10 177 浏览量 2009-04-15 17:27:50 上传评论收藏 26KB RAR 举报

"经典实用带图片精彩导航栏菜单代码"是一个关于网页设计的资源，它包含了一组用于构建高效导航栏的HTML代码。这样的导航栏菜单通常在网站开发中扮演着重要角色，因为它可以帮助用户轻松地浏览网站的不同部分，提高用户体验。提到的“很经典的导航栏菜单”意味着这个代码示例可能具有广泛的应用性和适应性。开发者指出在实际项目中使用过，并且没有级数限制，这意味着它可以支持多级下拉菜单，适合于构建层次结构复杂的大型网站或应用。作为“系统内嵌实用”，它可能设计得足够灵活，能够无缝集成到各种网页布局中，无论是在横向还是纵向排列的界面中。中的“图片”暗示了这个导航栏可能包含图像元素，可能是图标或者背景图，这些图像可以增强菜单的视觉吸引力，使其更易于识别和点击。而“导航栏”和“菜单”是网页设计的基本组成部分，它们通常位于页面顶部，包含链接到主要页面或功能的按钮。【压缩包子文件的文件名称列表】揭示了资源的结构： 1. `horizontal.html` 和 `vertical.html` 可能是两种不同的布局示例，分别展示水平和垂直方向的导航栏实现。 2. `index.html` 通常是网站的主页，可能会包含一个使用该导航栏代码的示例。 3. `skin-1.html` 暗示可能存在多种皮肤或样式，这可能是为了展示不同的外观和感觉，允许开发者根据需要自定义导航栏的视觉效果。 4. `mark.html` 可能是一个注释或标记文件，解释代码的某些部分或提供使用指南。 5. `src` 文件夹可能包含了源代码，如CSS和JavaScript文件，用于控制导航栏的样式和交互。 6. `skin` 文件夹可能包含了其他皮肤或主题的资源。 7. `images` 文件夹很可能包含了与导航栏相关的图像文件，如图标、背景图等。 8. `data` 文件夹可能包含了用于动态生成菜单的数据，如JSON格式的菜单结构。综合以上信息，这个压缩包提供了一个全方位的导航栏解决方案，包括不同布局、可定制的皮肤以及可能的数据驱动功能。对于网页设计师和前端开发者来说，这是一个有价值的资源，可以帮助他们快速创建功能强大且视觉吸引人的导航栏。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （24个子文件）

vertical.html 4KB

src

menu.js 6KB

sl.js 7KB

skin

style-mark.css 877B

style-vertical.css 852B

demo.css 638B

style-skin-1.css 826B

style.css 820B

mark.html 3KB

images

1.gif 1KB

out.gif 176B

over.gif 180B

7.gif 1006B

Thumbs.db 11KB

4.gif 1KB

3.gif 1KB

5.gif 1KB

2.gif 1KB

6.gif 1KB

index.html 4KB

data

data.xml 1KB

mark.xml 2KB

skin-1.html 3KB

horizontal.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title> Context Menu </title> <link rel="stylesheet" type="text/css" href="skin/style-skin-1.css" /> <link rel="stylesheet" type="text/css" href="skin/demo.css" /> <script type="text/javascript" src="src/sl.js"></script> <script type="text/javascript" src="src/menu.js"></script> </head> <body> <div id="DownLoader"> <p style="text-align:right;">Copy @:<a href="http://www.scriptlover.com">脚本爱好者</a></p> <div class="download-title">模式切换</div> <div class="download-content"> <p> <a href="index.html">右键文档模式</a>  |  <a href="skin-1.html">默认皮肤A模式</a>  |  <a href="horizontal.html" class="text-decoration">横排菜单模式</a>  |   <a href="vertical.html">竖排菜单模式</a>  |   <a href="mark.html">前缀图标模式</a> </p> </div> <div class="download-title">菜单演示</div> <div style="margin-left:100px;height:200px;"> <style type="text/css"> .hor { list-style:none; margin:0; } .hor li { float:left; line-height:20px; width:146px; margin:1px; padding:2px; cursor:default; } </style> <ul class="hor"> <li id="tempA" onmouseover="{this.className = 'over'}" onmouseout="{this.className = 'out'}" class="out"> 菜单项A </li> <li id="tempB" onmouseover="{this.className = 'over'}" onmouseout="{this.className = 'out'}" class="out"> 菜单项B </li> <li id="tempC" onmouseover="{this.className = 'over'}" onmouseout="{this.className = 'out'}" class="out"> 菜单项C </li> </ul> <br style="clear:both;" /> </div> <div class="download-title">菜单特色</div> <div class="download-content"> <p>如果你有任何的意见或建议，请到scriptlover.com上面留言。</p> <ol> <li>支持无限级菜单</li> <li>xml方式书写菜单</li> <li>完全自定义菜单项</li> <li>一个文档可实例化多个对象</li> <li>多种显示模式</li> <li>可支持灵活切换皮肤</li> <li>多浏览器兼容(ie6+ ,firefox ,sarari ,opera?)</li> </ol> </div> <div class="download-title">调用说明</div> <div class="download-content"> <p><strong><i>Menu类的属性和方法：</i></strong></p> <ol> <li>属性width:控制菜单宽度，默认为180px</li> <li>属性xml:菜单数据源文件</li> <li>属性xmlString:数据xml串</li> <li>属性trigger:触发弹出菜单的对象</li> <li>方法init:初始化对象的属性和方法</li> <li>方法show:显示主菜单，接受参数为"当前事件源"</li> </ol> <p>xml和xmlString属性两者设定其一就可以；trigger对象可不设定，那么可调show方法显示菜单。</p> <p><strong><i>xml描述文件节点及属性：</i></strong></p> <ol> <li>节点root:文档根节点</li> <li>节点menu:描述一个菜单</li> <li>节点ul:描述一个菜单项组合</li> <li>节点li:描述一个菜单项</li> <li>属性enabled:为false，那么该菜单为无效状态</li> <li>属性id:节点id</li> <li>属性child:指向的子菜单id</li> </ol> <p><strong><i>xml描述文件中为节点添加事件：</i></strong></p> <p>最终li元素将会在html文档中解析为li元素，且它的属性都会全部被解析，因此可用下列方法添加：</p> <ol> <li>直接在li节点中写属性，比如onclick="{alert('clicked me')}"。</li> <li>可以给li元素一个id，然后在脚本中为元素添加事件。</li> </ol> </p> </div> </div> <script type="text/javascript"> //<![CDATA[ /*@tempA*/ sampleA = new Menu(); sampleA.width = 150; sampleA.xml = "data/data.xml"; sampleA.init(); document.getElementById("tempA").onclick = function(e){ sampleA.show(e ,"left"); }; document.getElementById("tempB").onclick = function(e){ sampleA.show(e ,"left"); }; document.getElementById("tempC").onclick = function(e){ sampleA.show(e ,"left"); }; //]]> </script> </body> </html>

评论收藏

内容反馈