原贴:
http://www.helloxudan.net/2008/04/09/javascript-drop-down-menu.html
演示地址:
http://www.helloxudan.net/js/drop-down-menu/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A</title>
<link href="" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#menutree, #menutree li ul {
list-style-type:none;
}
#menutree {
margin:20px;
}
#menutree li {
float:left;
text-align:center;
position:relative;
}
#menutree li a:link, #menutree li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#menutree li a:hover {
color:#fff;
background:#2687eb;
}
#menutree li ul li a:hover {
color:#fff;
background:#6b839c;
}
#menutree li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
-->
</style>
<script>
function show(li){
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hide(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="menutree">
<li onmouseover="show(this)" onmouseout="hide(this)">
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
</ul>
</li>
</ul>
</body>
</html>
-------------------------------------------
JS下拉菜单
参考《ppk on javascript》
感觉不如上面的实用呀！就当练习js了吧
-------------------------------------------
style.css
* {
padding: 0;
margin: 0;
}
body {
font-family: verdana, sans-serif;
font-size: small;
}
.menutree, .menutree li ul {
list-style-type: none;
}
.menutree {
margin: 20px;
}
.menutree li {
float: left;
text-align: center;
position: relative;
}
.menutree li a:link, .menutree li a:visited {
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c5dbf2;
padding-left: 10px;
}
.menutree li a:hover {
color: #fff;
background: #2687eb;
}
.menutree li ul li a:hover {
color: #fff;
background: #6b839c;
}
.menutree li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
margin-top: 1px;
width: 120px;
}
.menutree li ul.show {
display: block;
list-style-type: none;
}
jsDropdownMenu.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>A</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="../../lib/Apq.js" type="text/javascript"></script>
<script type="text/javascript">
//document.write('<link href="style.css" rel="stylesheet" type="text/css">');
var dropdownMenu = {
dom: com.apq.dom,
evt: com.apq.event,
init: function() {
if(!dropdownMenu.dom.isDOM()) return;
var lists = dropdownMenu.dom.getElementsByClassName("menutree", "ul", document.body);
for (var i=0;i<lists.length;i++) {
lists[i].onmouseover = dropdownMenu.navMouseOver;
lists[i].onmouseout = dropdownMenu.navMouseOut;
var listItems = lists[i].getElementsByTagName('li');
for (var j=0;j<listItems.length;j++) {
var test = listItems[j].getElementsByTagName('ul')[0];
if (test) {
listItems[j].firstChild.onfocus = dropdownMenu.navMouseOver;
listItems[j].relatedItem = test;
}
}
}
dropdownMenu.currentlyOpenedMenus = new Array();
},
navMouseOver: function(e) {
var target = dropdownMenu.evt.getTarget(e);
if (target.nodeName == "UL") return;
while(target.nodeName != "LI") {
target = target.parentNode;
}
dropdownMenu.foldMenuIn(target);
if (target.relatedItem && !target.relatedItem.opened) {
dropdownMenu.dom.addClass(target.relatedItem, "show");
target.relatedItem.opened = true;
dropdownMenu.currentlyOpenedMenus.push(target.relatedItem);
}
},
navMouseOut: function(e) {
var relatedNode = dropdownMenu.evt.getRelatedNode(e);
dropdownMenu.foldMenuIn(relatedNode);
},
foldMenuIn: function(targetNode) {
if (!targetNode) return;
var newCurrentlyOpenedMenus = new Array();
for (var i=0;i<dropdownMenu.currentlyOpenedMenus.length;i++) {
if (!dropdownMenu.dom.containsElement(dropdownMenu.currentlyOpenedMenus[i],targetNode)) {
dropdownMenu.currentlyOpenedMenus[i].className = "";
dropdownMenu.currentlyOpenedMenus[i].parentNode.className = "";
dropdownMenu.currentlyOpenedMenus[i].opened = false;
}
else
newCurrentlyOpenedMenus.push(dropdownMenu.currentlyOpenedMenus[i]);
}
dropdownMenu.currentlyOpenedMenus = newCurrentlyOpenedMenus;
}
};
com.apq.event.addSimpleEvent(window, "load", dropdownMenu.init);
</script>
</head>
<body>
<ul class="menutree">
<li>
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li>
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
本主题聚焦于“纯CSS下拉菜单”，这是一种不依赖JavaScript实现的下拉菜单技术，主要利用CSS（层叠样式表）来创建动态效果。在实际应用中，这种菜单可能不是最通用的解决方案，但对那些希望深入了解CSS特性和动画...
在网页设计中，CSS下拉菜单是一个不可或缺的元素，它为用户提供了一种高效且直观的导航方式。这个压缩包包含了19个精心设计和实现的CSS下拉菜单，每个都有其独特的风格和交互效果，旨在提升用户体验并美化网站界面。...
而CSS下拉菜单则是导航菜单中的一个高级应用，为用户提供更便捷的交互体验。本资源"CSS下拉菜单.rar"显然是关于如何使用CSS来创建动态、响应式的下拉菜单。 在创建CSS下拉菜单时，我们通常会结合HTML和CSS技术，...
这份"纯CSS下拉菜单代码"提供了实现这一功能的简单而实用的方法，尤其适合那些希望避免JavaScript或者jQuery依赖的前端开发者。 纯CSS下拉菜单的实现原理主要基于CSS的选择器、定位以及过渡效果。以下是一些关键...
纯CSS下拉菜单 不需要JS 效果不错！ 从某外国网站上直接弄下来的！
经典的蓝色CSS下拉菜单
纯CSS下拉菜单主要利用CSS的盒模型、定位（positioning）、选择器（selectors）以及过渡（transitions）等特性。下面我们将逐一探讨这些关键知识点： 1. **盒模型**：CSS的盒模型是理解布局的基础，包括content、...
本教程主要关注的是使用`DIV+CSS`创建下拉菜单，这是一种常见的交互式导航元素，对于网站用户体验至关重要。 下拉菜单的设计主要依赖于CSS的`position`属性、`display`属性以及一些过渡和动画效果。在IE6.0及以上...
本篇将深入探讨CSS下拉菜单的设计原理、实现方法以及常见技巧。 首先，理解基本的HTML结构是创建下拉菜单的基础。一个简单的下拉菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素构建，其中`<li>`元素内嵌套另...
纯css下拉菜单兼容主流浏览器IE6+
在网页设计中，CSS下拉菜单是一个常见的交互元素，它为用户提供了一种便捷的方式来访问页面的多层次导航。本文将深入探讨如何使用CSS实现各种下拉菜单效果，以及如何通过优化来提升用户体验。 首先，让我们来看一个...
以上就是一个基本的CSS下拉菜单实现。当然，实际项目中可能需要考虑更多细节，比如响应式布局、多级下拉菜单、鼠标离开时的延迟隐藏等。这需要通过更复杂的CSS选择器和JavaScript来实现。在提供的压缩包文件中，应该...
纯CSS下拉菜单效果的实现主要依赖于CSS的布局、选择器和过渡动画属性。通过巧妙地应用这些技术，我们可以创建出功能完备且具有良好用户体验的下拉菜单，无需JavaScript的介入。对于前端开发者来说，熟练掌握这些CSS...
《CSS下拉菜单设计专家：Visual Infinite Menus深度解析》 在网页设计中，下拉菜单作为导航系统的重要组成部分，其美观性和功能性至关重要。Visual Infinite Menus是一款专注于CSS下拉菜单设计的专业工具，它以其...
在网页设计中，CSS下拉菜单是一个非常常见且实用的功能，它使得网站的导航更加直观、易用。本文将深入探讨“不错的CSS下拉菜单”的实现原理、设计技巧以及优化方法。 一、基本原理 CSS（层叠样式表）是用于控制...
总结一下，创建一个好看的js+css下拉菜单主要涉及以下几个步骤： 1. 设计HTML结构，包括主菜单和子菜单。 2. 使用CSS设置样式，包括隐藏和显示子菜单的逻辑，以及美化菜单的外观。 3. 添加JavaScript（这里使用...
本文将详细探讨如何创建一个支持多种浏览器的纯CSS下拉菜单，以及这种技术的重要性和优势。 首先，理解“纯CSS”意味着我们不依赖JavaScript或者其他外部库来实现下拉菜单的功能，而是完全利用CSS（层叠样式表）来...
### 如何创建CSS下拉菜单：深入解析与实践 在网页设计中，下拉菜单是一种常见的导航元素，它不仅能够节省页面空间，还能提供清晰的导航结构，提升用户体验。本文将详细解读如何利用CSS实现一个功能完备且美观的下拉...
以下将详细介绍标题“css下拉菜单”所涵盖的5种不同样式的下拉菜单，并探讨它们的设计原理和实现方法。 1. **经典悬停展开式下拉菜单** 这是最基础的CSS下拉菜单样式，当鼠标悬停在父级菜单项上时，子菜单会立即...
在实现div+css下拉菜单时，关键知识点包括： 1. **CSS盒模型**：理解CSS的边距、填充、边框以及内容区域如何影响元素尺寸，这对菜单的布局至关重要。 2. **定位（positioning）**：通常使用`relative`、`absolute`...