创建基于JavaScript的水平导航下拉菜单 (转)

最新推荐文章于 2024-07-11 16:50:01 发布
最新推荐文章于 2024-07-11 16:50:01 发布
阅读量658 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： javascript 产品 function border 浏览器 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangchunhan/article/details/6314449
版权

 

转自http://blog.csdn.net/tanghw/archive/2008/11/01/3192932.aspx

 

在Web应用上创建一个下拉菜单，可以有多种方法。有些基于CSS来实现，有些基于JavaScript来实现。这两种方法各有优劣。基于CSS的实现只使用CSS技术，比较好掌握，但不容易应付比较复杂，如多级菜单的情况，而且往往还需要采用各种hacks来应付不同浏览器的怪癖。而基于JavaScript的实现，原则上还需要CSS来负责页面的表现，但使用JavaScript来与用户交互。应该说，CSS属于表现层，JavaScript属于行为层，遵循关注点分离的原则，像下拉菜单这种动态情况还应使用JavaScript来实现更为合适。

本文使用基于JavaScript的技术来实现了水平导航下拉菜单，支持3级菜单，但在本文的后面，您可以看到，本文所用的方法，原则上并不仅限于3级菜单。这个实现有以下特点：

  1. 使用DOM接口，在各种浏览器上均可获得很好支持。
  2. 采用无干扰模式，HTML页面简单明了。
  3. 支持多级菜单。
  4. 算法高效，封装性强。

下图是这种菜单的最终效果图。


 
要实现这个菜单，需要三个文件协同工作：index.html, style.css以及h_nav_menu.js。

先看index.html文件。

<?xml version="1.0" encoding="UTF-8"?>

<!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>基于JavaScript的水平导航下拉菜单</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <script type="text/javascript" src="js/h_nav_menu.js"></script>
    </head>
    <body>
        <div id="banner">
            <h1>Demo -- 基于JavaScript的水平导航下拉菜单</h1>
        </div>
        
        <div id="navigation">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">产品</a>
                    <ul>
                        <li><a href="">最新设备</a>
                            <ul>
                                <li><a href="">十核电脑</a></li>
                                <li><a href="">无线打印机</a></li>
                            </ul>
                        </li>
                        <li><a href="">其它设备</a>
                            <ul>
                                <li><a href="">台式机</a></li>
                                <li><a href="">笔记本</a></li>
                            </ul>
                        </li>
                        <li><a href="">耗材</a>
                            <ul>
                                <li><a href="">打印机耗材</a></li>
                                <li><a href="">其它耗材</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">技术支持</a>
                    <ul>
                        <li><a href="">软件开发</a>
                            <ul>
                                <li><a href="">Java</a></li>
                                <li><a href="">C++</a></li>
                                <li><a href="">Ruby</a></li>
                            </ul>
                        </li>
                        <li><a href="">数据库</a></li>
                    </ul>
                </li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
        
        <div id="mainContent">
            <p>这个页面演示了如何制作水平导航下拉菜单。</p>
        </div>
        
        <div id="footer">
            <p>Copyright Sarkuya 2008</p>
        </div>
    </body>
</html&
最低0.47元/天 解锁文章
唐朝月软
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用 JavaScript 构建带有下拉菜单的响应式导航栏
我的博客，不一样的自我表达
05-28 3267
aria-label带有 id 和汉堡包的按钮，aria-haspopup设置为“true”，aria-expanded设置为“false”。这些标签将使我们能够使屏幕阅读器更容易访问此按钮。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。这意味着当 dropdown1单击数据集为的按钮时，divid 为的元素dropdown1将记录到控制台，按钮则相反dropdown2。现在，只要下拉菜单可见，该aria-expanded属性就会设置为 true，而在折叠时，它会设置为 false。
JavaScript实现下拉菜单
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-30 265
JavaScript实现下拉菜单
创建基于JavaScript的水平导航下拉菜单
Sarkuya的编程园地
10-31 1万+
在Web应用上创建一个下拉菜单，可以有多种方法。有些基于CSS来实现，有些基于JavaScript来实现。这两种方法各有优劣。基于CSS的实现只使用CSS技术，比较好掌握，但不容易应付比较复杂，如多级菜单的情况，而且往往还需要采用各种hacks来应付不同浏览器的怪癖。而基于JavaScript的实现，原则上还需要CSS来负责页面的表现，但使用JavaScript来与用户交互。应该说，CSS属于表现
利用JS实现网页的导航(nav)图
qq_62881798的博客
03-07 1354
效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; list-style: none } #contain
原生JS实现导航下拉菜单效果
11-27
【描述】：本示例旨在创建一个响应式的导航下拉菜单，其特点是一级菜单项下的二级菜单会在鼠标悬停时展开，且二级菜单的宽度与浏览器视口相同。实现这个功能主要依赖于JavaScript的事件处理（mouseout和mouseover）...
jQuery宽屏通栏下拉菜单导航代码.zip
07-04
【jQuery宽屏通栏下拉菜单导航代码】是一款基于JavaScript库jQuery实现的创新设计，旨在为网站提供一种仿微软风格的蓝色大气、全屏覆盖的导航菜单效果。这个功能强大的菜单系统不仅美观，而且交互性强，能提升用户...
HTML5 Bootstrap响应式手机导航下拉菜单代码.zip
07-11
在这个"HTML5 Bootstrap响应式手机导航下拉菜单代码"压缩包中，包含了一个实现移动设备友好型导航菜单的实例。下面将详细探讨这个主题。 首先，HTML5是超文本标记语言的最新版本，引入了许多新特性，如语义化标签...
jQuery阿里巴巴顶部导航栏下拉菜单.zip
07-04
【jQuery阿里巴巴顶部导航栏下拉菜单】是一种常见的网页交互效果，广泛应用于网站的导航结构中，为用户提供便捷的浏览体验。这个压缩包中包含的资源是实现这一效果的代码示例，具体表现为当用户将鼠标悬停在导航栏的...
基于jQuery实现二级下拉菜单效果
11-24
总结来说，创建基于jQuery的二级下拉菜单涉及以下关键知识点： 1. HTML结构：构建一级菜单和二级菜单的层级关系。 2. CSS样式：通过CSS控制菜单的外观和默认隐藏二级菜单。 3. jQuery事件：利用`$(document).ready...
06-CSS基础
weixin_55101030的博客
09-19 218
css基础
CSS属性和盒模型知识总结（03）
yihjh的博客
10-25 178
字体样式 字体样式 字体样式 font-family 字体类型 可以显示操作系统上安装的字体 英文的字体 ，只影响英文 中文的字体，即影响中文，又影响英文 设置混合字体时，英文在前，中文在后 *建议不要去设置罕见的字体，读者可能没有这个形式的字体。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> &l..
仿京东搜索框html的onfocus和onblur使用
weixin_44210750的博客
09-25 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { b
前端入门篇（四十六）JS应用1二级下拉菜单问题记录
m0_63174811的博客
04-02 693
讨论2：将底部的边框设置为none，并加高菜单的高度（从42px加为43px），遮住li边框的下边缘（毛刺）也将悬浮时的下边框去掉，以符合下拉菜单最终的效果.nav-list {background-color: #808080;height: 43px;}.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;border:1px solid
如何使用原生js来实现下拉菜单
weixin_75115821的博客
09-27 1384
下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！
JavaScript（js）网页--下拉菜单制作
热门推荐
Dreamer
11-19 1万+
JavaScript（js）网页–下拉菜单制作 在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。 设计简单的下拉菜单栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
原生JavaScript技术，jQuery实现下拉菜单
weixin_46433198的博客
07-28 1439
利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同。作为选择器，在函数中选中对应元素。来决定何时显示，何时隐藏下拉菜单。设置下拉菜单div的样式是否可见。实现下拉菜单的下滑与收起。
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
最新发布
Allen-
07-11 665
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
JavaScript 网页导航栏下拉菜单
06-07
好的，我可以帮你解答关于 JavaScript 网页导航栏下拉菜单的问题。 首先，你需要在 HTML 中创建一个导航栏，可以使用 `<nav>` 标签来创建。然后，在导航栏中添加一个下拉菜单的按钮，可以使用 `<button>` 标签，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值