javaScript 下拉菜单

最新推荐文章于 2024-04-02 06:20:55 发布
最新推荐文章于 2024-04-02 06:20:55 发布
阅读量85 收藏
点赞数
文章标签： javascript xhtml ViewUI
使用css设置下拉菜单
html文件 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>A DOM drop-down menu</title>
    <link rel="stylesheet" type="text/css" href="dropDown.css" />
    <script type="text/javascript" src="dropDown.js"></script>
</head>
<body>
    <h1>Menu Test</h1>
    <ul id="menu">
    <li class="menu"><a href="#">Home</a></li>
    <li class="menu"><a href="#">Products</a>
        <ul>
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Support</a>
        <ul>
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Employment</a>
        <ul>
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Contact</a>
        <ul>
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
        </ul>
    </li>
        </ul>
</body>
</html>
css文件 
#menu {
  Position:absolute;
}
    #menu li {
    float:left;
    list-style-type:none;
    width:100px;
    background-color:silver;
    }
        #menu li ul {
            background-color:silver;
            margin:0px;
            padding:0px;
        }
            #menu li ul li {
            padding:0px;
            margin:0px;
            float:none;
            list-style-type:none;
            width:80px;
            }

使用脚本来设置下拉菜单
设置菜单：
SetupMenu()函数在页面加载时运行，然后配置下拉菜单。这主要包括隐藏子菜单和配置一些事件处理程序。改函数将使用一个循环来查看页面里的所有<li>元素，如果它们具有一个值为menu的class属性，就会被看做菜单的一部分。下面代码将为链接设置事件处理程序，并隐藏子菜单。
thelink=findChild(items[i[,"A");
thelink.οnmοuseοver=ShowMenu;
if(ul=findChild(items[i[),"UL"))
{
ul.style.dispaly="none";
}
显示子菜单：
ul=findChild(thelink,"UL");
if(!ul)return;
ul.style.display="block";
隐藏子菜单：
ul=findChild(thelink,"UL");
if(!ul)return;
ul.style.display="none";
下拉菜单完整JavaScript程序： 
var t = false,current;
function SetupMenu()
{
    if (!document.getElementsByTagName) return;
    items = document.getElementsByTagName("li");
    for (i = 0; i < items.length; i++)
    {
        if (items[i].className != "menu") continue;
        thelink = findChild(items[i], "A");
        thelink.onmouseover = ShowMenu;
        thelink.onmouseout = StartTimer;
        if (ul = findChild(items[i], "UL"))
        {
            ul.style.display = "none";
            for (j = 0; j < ul.childNodes.length; j++)
            {
                ul.childNodes[j].onmouseover = ResetTimer;
                ul.childNodes[j].onmouseout = StartTimer;
            }
        }
    }
}
function findChild(obj, tag)
{
    cn = obj.childNodes;
    for (k = 0; k < cn.length; k++)
    {
        if (cn[k].nodeName == tag) return cn[k];
    }
    return false;
}
function ShowMenu(e)
{
    if (!e) var e = window.event;
    thislink = (e.target) ? e.target : e.srcElement;
    ResetTimer();
    if (current) HideMenu(current);
    thislink = thislink.parentNode;
    current = thislink;
    ul = findChild(thislink, "ul");
    if (!ul) return;
    ul.style.display = "block";
}
function HideMenu(thelink)
{
    ul = findChild(thelink, "UL");
    if (!ul) return;
    ul.style.display = "none";
}
function ResetTimer()
{
    if (t) window.clearTimeout(t);
}
function StartTimer()
{
    t = window.setTimeout("HideMenu(current)",200);
}
window.onload = SetupMenu;


iteye_4537
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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 264
JavaScript实现下拉菜单
仿京东搜索框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
用JavaScript实现下拉菜单
我的专栏
01-04 677
下拉式菜单 *{margin: 0px; padding: 0px;}/*去掉默认边距*/ #menu{background: #eee; width: 600px; height: 40px; margin: 0 auto; margin-top:100px; }
JavaScript 下拉菜单实现代码
10-29
本示例将详细介绍如何使用JavaScript和CSS来创建一个动态的下拉菜单。 首先，我们来看HTML结构。一个基本的下拉菜单通常包含一个主级`<ul>`标签，其中嵌套着若干个`<li>`元素，每个`<li>`可能包含一个次级`<ul>`...
JavaScript简单下拉菜单实例代码
10-23
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航结构，通常用于网站的顶部导航栏。在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。 首先，HTML结构是...
JavaScript下拉菜单功能实例代码
10-20
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示多个选项，用户可以通过点击一个按钮或链接来展开或收起这些选项。在本实例中，我们将探讨如何使用JavaScript实现一个下拉菜单功能。 首先，...
javascript下拉菜单
09-11
实现了简单的javascript下拉菜单，适合初学者
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。 那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()
javascript+css 下拉菜单
11-24
javascript+css 下拉菜单javascript+css 下拉菜单
《javascript实现下拉框表单美化的详细实例教程》源码
04-01
本文件属于文章《javascript实现下拉框表单美化的详细实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
如何使用原生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原生实现二级联动下拉菜单，前端面试资料集合
2301_79098686的博客
04-01 655
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】中…(img-4TPE0kJG-1711950814920)]CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript实现下拉菜单操作
weixin_45650502的博客
09-23 3276
JavaScript实现下拉菜单操作 案例分析： （1）该操作分为两个部分，导航栏和下拉菜单部分，因此需要使用嵌套，一共使用两对ul和li标签，外面的ul构成导航栏框架，在li里面一一对应另一对ul和li,在内层中书写对应的下拉菜单项； （2）在导航栏中，每个li都需要添加鼠标经过效果，因此需要用到循环注册鼠标事件； （3）核心思想：添加点击事件，当鼠标经过 li 里面的第二个孩子（内层的ul)时，使ul显示出来，当鼠标离开时，再将对应的ul隐藏起来。 完整代码如下： <!DOCTYPE html&g
javascript案例10——下拉菜单
努力、拼搏、奋进
05-07 8338
一、案例描述 鼠标经过导航栏出现下拉菜单。 二、案例效果演示 三、案例局部代码 css代码： <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } ul { list-style: none; } .nav { text-align: center;

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值