- 浏览: 780838 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
<!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=gbk" /> <title>JavaScript下拉菜单</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relative; } #navigation li a:link, #navigation 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; } #navigation li a:hover { color:#fff; background:#2687eb; } #navigation li ul li a:hover { color:#fff; background:#6b839c; } #navigation li ul { display:none; position:absolute; top:40px; left:0; margin-top:1px; width:120px; } #navigation li ul li ul { display:none; position:absolute; top:0px; left:130px; margin-top:0; margin-left:1px; width:120px; } </style> <script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <ul id="navigation"> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目1</a> <ul> <li><a href="http://atf.99bill.com">栏目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="displaySubMenu(this)" onmouseout="hideSubMenu(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> <li><a href="#">栏目2->菜单5</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3</a> <ul> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单1</a> <ul> <li><a href="http://www.google.com">菜单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="#">栏目3->菜单2</a></li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单3</a> <ul> <li><a href="#">菜单3->子菜单1</a></li> <li><a href="#">菜单3->子菜单2</a></li> <li><a href="#">菜单3->子菜单3</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
发表评论
-
10个 DIV+CSS 需要注意的问题
2010-01-11 16:34 8861. 检查HTML元素是否有拼 ... -
常用代码
2009-12-21 16:52 8991.IFRAM自动高度调用 //加入当前页 <ifram ... -
常用js函数
2009-12-15 10:58 10981 父子页面的值传递 两种方式: 1)在父页面可以 ... -
鼠标点按钮,把文本框里的值输入到表格,表格美化
2009-11-06 12:49 1138效果图:往文本框内输入文字,按按钮可以把文本框内的文字输入到上 ... -
可以拖动的表格
2009-11-06 12:46 961效果图:可以用鼠标拖动两个框到页面的任意位置 <html ... -
手动在页面添加值到下拉列表而不刷新的demo
2009-11-06 12:38 1071手动在页面添加值到下拉列表而不刷新的demo 在一个页面中有 ... -
javascript 参数传递 文本框
2009-11-06 12:25 2120javascript 参数传递 文本框 一,最简单的就是同一 ... -
js设置页面背景色,设置背景图片
2009-11-05 16:22 4983<!DOCTYPE HTML PUBLIC " ... -
css 表格 table
2009-11-05 16:17 586css 表格 table table{ border-c ... -
禁止网页上的鼠标,键盘事件
2009-11-05 12:32 922禁止鼠标右键 oncontextmenu='return fa ... -
JavaScript 函数
2009-11-04 15:52 755虽然 JavaScript 有很多用 ... -
在html文件引入其它html文件的几种方法
2009-11-04 15:49 870简介:在论坛中常常有网友问到,可以在一个html的文件当中读取 ... -
div浮动在select上
2009-11-04 15:47 1277<html> <head> <m ... -
CSS自动黄行
2009-10-30 10:23 959自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字 ... -
GIF进度条
2009-10-30 10:21 1681刚才看到javaeye的一个兄弟收集的进度条,很棒,所以收藏下 ... -
http错误代码含义
2009-10-28 12:34 1739<PRE class=java name="c ... -
Window.Open详解
2009-10-21 11:04 706Window.Open详解 一、window.open() ... -
javascript调用父窗口(父页面)的方法
2009-10-21 10:56 1750javascript调用父窗口(父页面)的方法 window. ... -
js窗口&提示大全
2009-10-21 10:52 643//-----------按钮提示框--- ... -
window.open,自动打开新窗口并且自动关闭新窗口,可以作为增加点击率使用
2009-10-21 10:44 1905<HTML> <HEAD> & ...
相关推荐
本主题聚焦于“纯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`...