【免费】javacriptemenu架构资源-CSDN下载

共5个文件

htm：3个

js：1个

gif：1个

需积分: 0 171 浏览量更新于2008-12-17 收藏 34KB RAR 举报

JavaScript 菜单架构是一种在网页中创建交互式菜单的技术，它主要依赖于JavaScript语言来实现动态效果和用户交互。JavaScript菜单通常用于网站导航，帮助用户更方便地浏览和访问网站的不同部分。以下是对JavaScript菜单架构的详细说明： 1. **基础概念**：JavaScript是一种轻量级的解释型编程语言，常用于网页和网络应用开发，为用户提供动态、实时的交互体验。在菜单架构中，JavaScript负责处理用户的点击事件，控制菜单的显示和隐藏，以及添加各种动画效果。 2. **HTML结构**：菜单的基础是HTML元素，通常由`<ul>`（无序列表）和`<li>`（列表项）组成。每个`<li>`元素代表一个菜单项，可以通过嵌套`<ul>`来创建多级子菜单。 3. **CSS样式**：CSS（层叠样式表）用于定义菜单的视觉样式，如字体、颜色、布局和过渡效果。通过CSS，可以实现菜单的响应式设计，使其在不同设备上都能良好展示。 4. **JavaScript事件处理**：在JavaScript中，我们可以为菜单项绑定点击事件监听器。当用户点击菜单项时，对应的JavaScript函数会被执行，这些函数可以控制其他菜单项的显示或隐藏，实现菜单的展开和折叠。 5. **DOM操作**：Document Object Model（DOM）是HTML和XML文档的抽象表示，JavaScript通过DOM API可以直接操作页面上的元素。在菜单架构中，我们需要通过DOM来获取或修改菜单元素的状态，比如改变其可见性或CSS类。 6. **动画效果**：为了提高用户体验，菜单的展开和收缩通常会加入动画效果。JavaScript库如jQuery提供了丰富的动画方法，如fadeIn()和slideToggle()，可以轻松实现这些效果。 7. **跨浏览器兼容性**：不同的浏览器可能对某些JavaScript特性支持程度不同，因此在编写菜单架构时要考虑跨浏览器兼容性。可以使用像jQuery这样的库来简化这一过程，或者使用现代JavaScript语法并配合polyfills来确保老版本浏览器的支持。 8. **响应式设计**：随着移动设备的普及，菜单架构应具有响应式设计，能适应不同屏幕尺寸。这通常涉及检测窗口大小变化并相应调整菜单布局，例如，将多级菜单转换为汉堡菜单在小屏幕上显示。 9. **无障碍性**：良好的菜单架构还需要考虑无障碍性，确保使用辅助技术（如屏幕阅读器）的用户也能方便地导航。这包括添加合适的`aria`属性，确保键盘导航流畅，以及确保菜单项的逻辑顺序正确。 10. **模块化和可重用性**：为了代码的可维护性和复用性，可以将菜单组件封装为JavaScript模块。这样，可以在多个页面或项目中轻松引入和使用相同的菜单结构。以上是关于JavaScript菜单架构的核心知识点，通过理解和实践这些原理，开发者可以创建出功能强大、用户体验优秀的网站导航菜单。在实际开发中，可以根据具体需求选择合适的方法和工具，如使用现有的JavaScript库（如Bootstrap或Materialize）或者自定义实现，以满足项目的特定需求。

收起资源包目录

menu.rar （5个子文件）

鼠标事件.htm 2KB

prototype-1.6.0.2.js 123KB

多级菜单.htm 8KB

简单菜单.htm 3KB

botton_gif_080.gif 2KB

身份认证购VIP最低享 7 折!

30元优惠券

资源推荐

资源预览

资源评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="prototype-1.6.0.2.js"></script> <script type="text/javascript"> var MenuItem = Class.create({ initialize:function(element){ this.element = $(element); this.items = null; this.closeTimeoutId = null; this.menu = null; this.childMenu = null; this.depth = 0; this.parent = null; }, addItem:function(menuItem){ if(!this.items) this.items = []; menuItem.parent = this; menuItem.depth = this.depth + 1; menuItem.menu = this.menu; this.items.push(menuItem); }, isParentOf:function(childItem){//判断当前item是不是childItem的parent var temp = childItem; while(temp.parent){ if(temp.parent == this) return true; temp = temp.parent; } return false; }, topItem:function(){ var temp = this; while(temp){ if(temp.depth == 0) return temp; temp = temp.parent; } return temp; }, render:function(){ var self = this; function elementMouseOver(e){ //关闭所有兄弟菜单 var items = self.parent?self.parent.items:self.menu.rootItems; items.each(function(item){ if(self != item) item.closeAll(); }); self.clearCloseTimeout(); if(self.depth == 0){ self.childMenu.setStyle({ "top":self.element.cumulativeOffset().top + self.element.getHeight() + "px", "left":self.element.cumulativeOffset().left + "px" }); }else{ self.childMenu.setStyle({ "top":self.element.cumulativeOffset().top + "px", "left":self.element.cumulativeOffset().left + self.element.getWidth() + "px" }); } // var temp = self; while(temp){ temp.open(); temp = temp.parent; } //self.childMenu.show(); self.menu.currentItem = self; } this.element.observe("mouseover",elementMouseOver.bindAsEventListener()); function elementMouseOut(e){ //关闭当前的子菜单 self.timeoutClose(); } this.element.observe("mouseout",elementMouseOut.bindAsEventListener()); this.childMenu = $(document.createElement("ul")); this.childMenu.setStyle({ "position":"absolute", "display":"none", "top":"0px", "left":"0px", "margin":"0px" }); if(this.menu.childMenuClassName) this.childMenu.addClassName(this.menu.childMenuClassName); function childMenuMouseOver(e){ var target = e.element(); var relatedTarget = e.relatedTarget || e.fromElement; if(!$(relatedTarget).descendantOf(self.childMenu) && $(relatedTarget) != self.childMenu){ self.clearCloseTimeout(); } } this.childMenu.observe("mouseover",childMenuMouseOver.bindAsEventListener()); function childMenuMouseOut(e){ var target = e.element(); var relatedTarget = e.relatedTarget || e.toElement; if(!$(relatedTarget).descendantOf(self.childMenu) && $(relatedTarget) != self.childMenu){ //关闭所有的菜单 var temp = self; while(temp){ temp.timeoutClose(); temp = temp.parent; } } } this.childMenu.observe("mouseout",childMenuMouseOut.bindAsEventListener()); $A(this.items).each(function(item,index){ item.render(); var li = $(document.createElement("li")); li.appendChild(item.element); self.childMenu.appendChild(li); }); if(!this.items) return; document.body.appendChild(this.childMenu); }, open:function(){ this.clearCloseTimeout(); if(this.childMenu) this.childMenu.show(); }, close:function(){ if(this.childMenu) this.childMenu.hide(); }, closeAll:function(){ this.close(); if(!this.items)return; this.items.each(function(item){ item.closeAll(); }); }, clearCloseTimeout:function(){ clearTimeout(this.closeTimeoutId); this.closeTimeoutId = null; }, timeoutClose:function(){ var self = this; this.clearCloseTimeout(); this.closeTimeoutId = setTimeout(close,500);//这里不能直接用this.close或者self.close function close(){ self.close(); } } }); var Menu = Class.create({ initialize:function(childMenuClassName){ this.rootItems = []; this.currentItem = null;//当前展开的MenuItem this.childMenuClassName = childMenuClassName; }, addItem:function(rootItem){ rootItem.depth = 0; rootItem.parent = null; rootItem.menu = this; this.rootItems.push(rootItem); }, render:function(){ this.rootItems.each(function(item,index){ item.render(); }); } }); function winLoad(){ function createItemElement(text){ var a = document.createElement("a"); a.href = "javascript:void(0);"; var textNode = document.createTextNode(text); a.appendChild(textNode); return a; } var menu = new Menu("childMenu"); //item1 var item1 = new MenuItem($("item1")); menu.addItem(item1); var item11 = new MenuItem(createItemElement("item 1-1")); item1.addItem(item11); var item12 = new MenuItem(createItemElement("item 1-2")); item1.addItem(item12); var img = new Image(); img.src = "botton_gif_080.gif"; var a = document.createElement("a"); a.href = "javascript:void(0);"; a.appendChild(img); var item13 = new MenuItem(a); item1.addItem(item13); var item131 = new MenuItem(createItemElement("item 1-3-1")); item13.addItem(item131); var item1311 = new MenuItem(createItemElement("item 1-3-1-1")); item131.addItem(item1311); var item132 = new MenuItem(createItemElement("item 1-3-2")); item13.addItem(item132); var item14 = new MenuItem(createItemElement("item 1-4")); item1.addItem(item14); var item141 = new MenuItem(createItemElement("item 1-4-1")); item14.addItem(item141); var item1411 = new MenuItem(createItemElement("item 1-4-1-1")); item141.addItem(item1411); var item142 = new MenuItem(createItemElement("item 1-4-2")); item14.addItem(item142); //item2 var item2 = new MenuItem($("item2")); menu.addItem(item2); var item21 = new MenuItem(createItemElement("item 2-1")); item2.addItem(item21); var item22 = new MenuItem(createItemElement("item 2-2")); item2.addItem(item22); var item23 = new MenuItem(createItemElement("item 2-3")); item2.addItem(item23); menu.render(); } if(window.attachEvent){ window.attachEvent("onload",winLoad); }else if(window.addEventListener){ window.addEventListener("load",winLoad,false); }else{ window.onload = winLoad; } </script> <style type="text/css"> body{font-size:14px;font-family:Arial;font-weight:bold;} ul,ul li{padding:0px;margin:0px;list-style:none;} a{text-decoration:none;font-size:14px;} a img{border:none;} #container{width:960px;margin:0px auto;height:500px;} #menu{height:36px;background:#940000;} #menu li{margin:0px;float:left;cursor:pointer;} #menu li a{display:block;padding:10px 20px;color:white;} #menu li a:hover{background:#B70100;color:#F0F0F0;} .childMenu{background:#B70100;border:solid 2px #6A321B;} .childMenu li{margin:5px;} .childMenu li a{display:block;padding:5px 15px;color:white;text-align:center;} .childMenu li a:hover{background:#940000;color:#F0F0F0;} </style> </head> <body> <div id="container"> <ul id="menu"> <li id="item1"><a href="javascript:void(0);">Menu1</a></li> <li id="item2"><a href="javascript:void(0);">Menu2</a></li> <li id="item3"><a href="javascript:void(0);">Menu3</a></li> <li id="item4"><a href="javascript:void(0);">Menu4</a></li> <li id="item5"><a href="javascript:void(0);">Menu5</a></li> <li id="item6"><a href="javascript:void(0);">Menu6</a></li> </ul> </div> </body> </html>