`
zhaixoahu
  • 浏览: 135788 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript下拉菜单

JavaScriptCSS浏览器XHTMLHTML 
阅读更多

去年我曾经写过一篇 CSS 下拉菜单，其中完全只使用 CSS 实现了导航条鼠标悬停下拉菜单的效果（演示地址）。但是只用 CSS 实现起来比较麻烦，代码较多，而且为了浏览器的兼容性不得不使用了两个 CSS 文件，所以我把它叫做“探究”，实用性并不强。

最近我从 blog 的流量统计中发现，很多网友通过搜索“JS 下拉菜单”关键字访问到了我的那篇文章。不过很遗憾，那篇文章和 JavaScript 一点关系都没有，有误导网友之嫌。所以，昨天我花了一点时间把原来的代码做了一点修改，搞了一个简易版 JavaScript 下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了，因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些，不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好，只需要很少的 JS 代码即可实现，而且可以实现多级下拉菜单的效果（我的示例中给出了二级下拉菜单，可以根据需要按照原来的 HTML 结构逐级添加）。



页面源代码：

Java代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>JavaScript下拉菜单</title>   
  6.     <style type="text/css">   
  7.         * {   
  8.             padding:0;    
  9.             margin:0;   
  10.         }   
  11.         body {   
  12.             font-family:verdana, sans-serif;    
  13.             font-size:small;   
  14.         }   
  15.         #navigation, #navigation li ul {   
  16.             list-style-type:none;   
  17.         }   
  18.         #navigation {   
  19.             margin:20px;   
  20.         }   
  21.         #navigation li {   
  22.             float:left;   
  23.             text-align:center;   
  24.             position:relative;   
  25.         }   
  26.         #navigation li a:link, #navigation li a:visited {   
  27.             display:block;    
  28.             text-decoration:none;    
  29.             color:#000;    
  30.             width:120px;    
  31.             height:40px;    
  32.             line-height:40px;    
  33.             border:1px solid #fff;    
  34.             border-width:1px 1px 0 0;    
  35.             background:#c5dbf2;    
  36.             padding-left:10px;    
  37.         }   
  38.         #navigation li a:hover {   
  39.             color:#fff;   
  40.             background:#2687eb;   
  41.         }   
  42.         #navigation li ul li a:hover {   
  43.             color:#fff;   
  44.             background:#6b839c;    
  45.         }   
  46.         #navigation li ul {   
  47.             display:none;   
  48.             position:absolute;    
  49.             top:40px;   
  50.             left:0;   
  51.             margin-top:1px;   
  52.             width:120px;   
  53.         }   
  54.         #navigation li ul li ul {   
  55.             display:none;   
  56.             position:absolute;    
  57.             top:0px;   
  58.             left:130px;    
  59.             margin-top:0;   
  60.             margin-left:1px;   
  61.             width:120px;   
  62.         }   
  63.     </style>   
  64.     <script type="text/javascript">   
  65.         function displaySubMenu(li) {   
  66.             var subMenu = li.getElementsByTagName("ul")[0];   
  67.             subMenu.style.display = "block";   
  68.         }   
  69.         function hideSubMenu(li) {   
  70.             var subMenu = li.getElementsByTagName("ul")[0];   
  71.             subMenu.style.display = "none";   
  72.         }   
  73.     </script>   
  74. </head>   
  75. <body>   
  76.     <ul id="navigation">   
  77.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  78.             <a href="#">栏目1</a>       
  79.             <ul>   
  80.                 <li><a href="#">栏目1->菜单1</a></li>   
  81.                 <li><a href="#">栏目1->菜单2</a></li>   
  82.                 <li><a href="#">栏目1->菜单3</a></li>   
  83.                 <li><a href="#">栏目1->菜单4</a></li>   
  84.             </ul>   
  85.         </li>   
  86.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  87.             <a href="#">栏目2</a>       
  88.             <ul>   
  89.                 <li><a href="#">栏目2->菜单1</a></li>   
  90.                 <li><a href="#">栏目2->菜单2</a></li>   
  91.                 <li><a href="#">栏目2->菜单3</a></li>   
  92.                 <li><a href="#">栏目2->菜单4</a></li>   
  93.                 <li><a href="#">栏目2->菜单5</a></li>   
  94.             </ul>   
  95.         </li>   
  96.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  97.             <a href="#">栏目3</a>       
  98.             <ul>   
  99.                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  100.                     <a href="#">栏目3->菜单1</a>   
  101.                     <ul>   
  102.                         <li><a href="#">菜单1->子菜单1</a></li>   
  103.                         <li><a href="#">菜单1->子菜单2</a></li>   
  104.                         <li><a href="#">菜单1->子菜单3</a></li>   
  105.                         <li><a href="#">菜单1->子菜单4</a></li>   
  106.                     </ul>   
  107.                 </li>   
  108.                 <li><a href="#">栏目3->菜单2</a></li>   
  109.                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  110.                     <a href="#">栏目3->菜单3</a>   
  111.                     <ul>   
  112.                         <li><a href="#">菜单3->子菜单1</a></li>   
  113.                         <li><a href="#">菜单3->子菜单2</a></li>   
  114.                         <li><a href="#">菜单3->子菜单3</a></li>   
  115.                     </ul>   
  116.                 </li>   
  117.             </ul>   
  118.         </li>   
  119.     </ul>   
  120. </body>   
  121. </html>   
分享到：
| Javascript 控制文本框的默认值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 下拉菜单（各种各样的）

    以下是关于JavaScript下拉菜单的一些关键知识点： 1. HTML结构：下拉菜单的基础结构通常由`&lt;select&gt;`标签构建，其中包含一系列`&lt;option&gt;`标签来定义菜单项。然而，为了实现更复杂的交互和自定义样式，开发者通常会...

    javascript下拉菜单2

    JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示更多的导航选项。在这个名为"javascript下拉菜单2"的资源中，包含了实现这一功能的关键文件：`menu.css`、`menu.js`和`test6.jsp`。接下来，...

    JavaScript下拉菜单模板

    JavaScript下拉菜单模板是一种网页交互元素，用于在有限的空间内展示丰富的导航选项。在网页设计中，下拉菜单常用于网站导航，使用户能够轻松访问多层次的页面结构，而无需占用太多屏幕空间。这种菜单主要由...

    javascript下拉菜单大全

    总结，JavaScript下拉菜单的实现涉及HTML结构、CSS样式和JavaScript交互的综合运用。开发者可以根据需求选择不同的实现方式，从基本的手动编写到利用成熟的库和框架，来创建符合项目需求的、用户友好的下拉菜单。

    javascript下拉菜单源代码

    JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航选项，提高用户界面的可用性和效率。在网页设计中，JavaScript常被用来实现动态效果，如下拉菜单，因为HTML和CSS本身无法实现复杂的交互性。 这个名...

    JavaScript下拉菜单源码

    JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航，增强用户体验。在这个主题中，我们将深入探讨JavaScript在实现下拉菜单中的应用，以及如何通过提供的源码进行自定义和优化。 首先，JavaScript作为...

    javascript下拉菜单

    JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示更多的导航选项。在网页设计中，下拉菜单能够提供良好的用户体验，使用户能够轻松访问多层次的导航结构。本项目提供的"javascript下拉菜单"是一...

    多样式JavaScript下拉菜单

    JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示丰富的导航选项。在网页设计中，下拉菜单能够有效地组织和展示大量的链接，提高用户体验，尤其在移动设备上节省屏幕空间。本教程将深入探讨多样...

    可配置的javascript下拉菜单

    本文将详细解析"可配置的javascript下拉菜单"这一技术，包括其核心特性、实现原理以及如何利用提供的css.css、hack.css、js.js文件进行自定义配置。 1. **核心特性**： - **多级层联**：此下拉菜单支持多级菜单...

    javascript下拉菜单.txt

    ### 标题：javascript下拉菜单 这个标题明确了文档的主题——使用JavaScript实现的下拉菜单功能。 ### 描述：javascript下拉菜单.txt 很实用的js脚本，下载后只需修改一下后缀名即可使用. 这段描述提供了关于该...

    JavaScript下拉菜单内容过长可以上下滑动的3级菜单，适合大多数对菜单的应用场景

    在前端开发中，JavaScript下拉菜单是常见的交互元素，尤其适用于网站导航或复杂选项的展示。本项目提供了一个可上下滑动的3级菜单解决方案，适用于各种需要多层次菜单的场景。这种菜单设计允许用户轻松浏览长内容，...

    纯javascript 下拉按钮菜单插件实现（处理兼容性）

    通过以上的步骤，我们就实现了一个基本的纯JavaScript下拉菜单插件，同时处理了兼容性问题。然而，实际项目中可能还需要进一步优化，比如添加动画效果、防止快速点击时的闪烁现象等。这个简单的例子展示了如何利用...

    html总结 javascript 下拉菜单 个人博客入门学习

    例如，我们可以用JavaScript来实现下拉菜单的动画效果或自定义样式。 在这个案例中，我们看到了"jquery.min.js"，这是jQuery库的压缩文件。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画等功能...

    JavaScript做的下拉菜单

    创建JavaScript下拉菜单的第一步是编写HTML结构。例如： ```html &lt;li&gt;&lt;a href="#"&gt;主菜单项1 &lt;li&gt;&lt;a href="#"&gt;子菜单项1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单项2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单项3&lt;/a&gt;&lt;/li&gt; ...

    Chrome Menu javascript下拉菜单

    Chrome Menu是一种基于JavaScript和CSS实现的交互式下拉菜单，它在网页设计中扮演着重要的角色，为用户提供直观且易于导航的界面元素。这个菜单系统的设计理念是简洁、高效，并且对搜索引擎友好，这意味着它不仅提供...

Magicbox
Global site tag (gtag.js) - Google Analytics