javascript DOM 带下拉子菜单的导航菜单

最新推荐文章于 2023-01-02 09:11:46 发布
最新推荐文章于 2023-01-02 09:11:46 发布
阅读量886 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/8476512
版权

<!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>
    <style type="text/css">
        body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
        a { color: #000; text-decoration: none; }
        a:hover { color: #F00; }
        #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
        #menu ul { list-style: none; margin: 0px; padding: 0px; }
        #menu ul li { float:left; margin-left:2px;}
        #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}
        #menu ul li a#current { font-weight:bold; color:#fff;}
        #menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
        #menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
        #menu ul li ul li a { background:none;}
        #menu ul li ul li a:hover { background:#333; color:#fff;}
        #menu ul li:hover ul { display:block;}
        #menu ul li.sfhover ul { display:block;}
    </style>
    <script type="text/javascript"><!--    //--><![CDATA[//><!--
        function menuFix() {
            var sfEls = document.getElementById("menu").getElementsByTagName("li");
            for (var i = 0; i < sfEls.length; i++) {
                sfEls[i].onmouseover = function () {
                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                }
                sfEls[i].onMouseDown = function () {
                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                }
                sfEls[i].onMouseUp = function () {
                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                }
                sfEls[i].onmouseout = function () {
                    this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),
    "");
                }
            }
        }
        window.onload = menuFix;
        //--><!]]>
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a id="current" href="#">首页</a></li>
            <li><a href="#">网页版式</a>
                <ul>
                    <li><a href="#">自适应宽度</a></li>
                    <li><a href="#">固定宽度</a></li>
                </ul>
            </li>
            <li><a href="#">web教程</a>
                <ul>
                    <li><a href="#">新手入门</a></li>
                    <li><a href="#">视频教程</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </li>
            <li><a href="#">web实例</a></li>
            <li><a href="#">常用代码</a></li>
        </ul>
    </div>
</body>
</html>

永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp导航条 下拉菜单
11-11
jsp有下拉的导航条 自己写的，仅供参考，不好请留言
jquery下拉子菜单导航菜单代码.zip
07-11
《jQuery下拉子菜单导航菜单代码详解》 在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了方便快捷的页面跳转途径。而具备下拉子菜单的导航菜单更是提升了用户体验，使得复杂的网站结构得以清晰地展现。...
导航栏下拉菜单制作
Hero_123456的专栏
11-13 983
为了美化网页做了一个导航栏的下拉菜单，仅供参考。PS不到家,代码有点乱。仅提供一个思路。 以下是源码： http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> DZ *{     margin:0;     padding:0;     border:0;     } div{     margin:300px;
js html导航栏,JavaScript HTML DOM 导航
weixin_39869432的博客
06-07 104
子节点和节点值DOM 处理中的一种常见错误是认为元素节点中包含文本。实例：DOM 教程(上面例子中的)元素节点 不包含文本。它包含了值为 "DOM 教程" 的文本节点。文本节点的值能够通过节点的 innerHTML 属性进行访问：var myTitle = document.getElementById("demo").innerHTML;访问 innerHTML 属性等同于访问首个子节点的 n...
Dom编程（有子菜单的导航条 和 选项卡）
程序员
08-08 479
选项卡： tab *{ margin:0; padding:0; } #tab{ width:312px; margin:100px auto; } #tab ul{ list-style:none; } #tabControl{ border-top:solid 2px #206f96; width:310px; display:table; } #tabCo
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）
Clover的博客
05-27 594
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）@[TOC](JavaScript学习笔记（DOM 导航、节点、集合、节点列表）)DOM节点节点关系：在节点之间导航子节点和节点值1. 取出h1元素中的文本并复制到P元素中：(第一种)2. 取出h1元素中的文本并复制到P元素中：(第二种)3. 取出h1元素中的文本并复制到P元素中：(第三种)JavaScript HTML DOM 元素（节点）添加和删除节点(HTML元素)创建新的HTML元素-insertBefore()删除已有HTML元素（
jquery带二级下拉子栏目导航代码.zip
07-11
【jQuery二级下拉子栏目导航】是Web前端开发中常用的一种交互设计，它使得网站的导航菜单更加直观、易用，特别是在内容丰富的大型网站中，能够有效地组织和展示多级菜单结构。本代码资源提供了带预览图的二级下拉...
jquery带二级下拉子栏目导航代码.rar
07-04
【标题】"jquery带二级下拉子栏目导航代码.rar"是一个使用jQuery库实现的二级下拉菜单导航栏的代码资源。这个导航栏设计用于网站头部，帮助用户方便地浏览和访问网站的多级分类内容。 在网页设计中，二级下拉菜单是...
jQuery鼠标悬停下拉导航菜单
04-07
本文将深入探讨“jQuery鼠标悬停下拉导航菜单”这一主题，旨在教你如何利用jQuery创建一个功能强大且用户体验优秀的卷帘式鼠标悬停滑动下拉导航菜单。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了...
js dom 操作实例图解
bcbobo21cn的专栏
07-02 1450
以下操作的是www.ibm.com； 下面是在js调试控制台中操作； 根据id和name获取元素对象；获取对象后获取值用getAttribute； 遍历一个元素的属性集合，输出属性的名字和值； 遍历一个元素的子节点，输出子节点的id，name; 遍历一个元素的子节点，输出其id，和子节点类型；子节点类型没获取到；
导航条下拉菜单的实现及思路
m0_63622279的博客
01-02 1343
导航条的导航项话，最简单的对于初学者就使用float浮动，使其导航项横向排列，当然如果学了flex,gird布局，这些会更简单实现。下拉菜单的思路其实就是其父盒子选择，从而使它的子盒子显示，并且还要将下拉菜单脱离文档流，从而自定义其宽高。 好嘞，话不多说，上代码！ CSS部分 今天的分享到此结束啦，各位uu，点个赞再走QAQ…
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
CSS样式定义
痞子51998
05-14 1786
分类： 主要的 master.css 模块 module.css 主题 themes.css 专栏 columns.css 文字 font.css 补丁 mend.css 打印 print.css 一．文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 头部：表单
DOM实用小例子与编程技巧
Callback_heaven
03-03 308
实用小例子1：使用DOM实现简单的伸缩二级菜单&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;1. 实现伸缩二级菜单&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;link rel="stylesheet" href="css/1.
导航栏,菜单栏下拉简单实现
Jachin的博客
09-21 2万+
导航栏,菜单栏下拉简单实现兼容ie
html纯css实现导航栏下拉菜单（带下拉三级菜单）
后生丶的博客
06-02 4万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;庄稼汉&lt;/title&gt; &lt;style&gt; * { margin: 0;
html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作
weixin_42548893的博客
05-31 1万+
html导航栏下拉菜单如何制作发布时间：2020-09-26 15:29:13来源：亿速云阅读：88作者：小新小编给大家分享一下html导航栏下拉菜单如何制作，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！我们要说的是html导航栏下拉菜单的制作，先看一个完整的实例代码：.dropdown {position: relative;display: inline-block;}.drop...
纯CSS的导航下拉菜单
热门推荐
前端成长之路
04-04 4万+
写在案例前： 本案例并非原创，百度一搜“css下拉菜单”一定能看见一模一样的案例，而且不止一个，所以就仿照这个案例又自己做了一遍，并且总结一下自己遇到的一些问题结合思考给出的解决办法，虽然不知道原作者是谁，但是还是要在这里感谢一下原作者，给了我不止一点思路。废话不多说，上图。 <nav> <ul> <li><a href="#">导航一<
html导航栏下拉菜单怎么做,css制作导航栏下拉菜单及问题
weixin_42217306的博客
06-03 5797
http://js.jirengu.com/qegovoxize/1/edit?html,css,output这个是放在jsbin上的代码。一、我的思路CSS制作下拉菜单，主要是运用了样式hover。原来下拉菜单设置的样式是display:none；当一级菜单hover时，下拉菜单从display：none转变为display：block。在设置当一级菜单：a标签被hover时，下拉菜单的样式，我...
html中导航菜单是个超链接，该如何优化
最新发布
04-26
导航菜单的超链接可以通过以下几种方式进行优化： ...5. 引入下拉子菜单，更好地展示多层级导航：将导航菜单变成下拉菜单，更好地呈现多级层级的页面导航。 这是我目前的回答，是否您还需要了解更多的内容？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值