js下拉菜单，支持所有浏览器

最新推荐文章于 2023-09-22 15:45:07 发布
最新推荐文章于 2023-09-22 15:45:07 发布
阅读量157 收藏
点赞数
文章标签： xhtml javascript ViewUI

js下拉菜单
演示地址:http://www.corange.cn/demo/3701/index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Drop-Down Menu</title>
<link rel="stylesheet" type="text/css" href="css/default.css">

<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{ 
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose; 
// -->
</script>

</head>
<body>

<ul id="sddm">
<li><a href="#" οnmοuseοver="mopen('m1')" οnmοuseοut="mclosetime()">Home</a>
<div id="m1" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">
<a href="#">HTML DropDown</a>
<a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">DropDown Menu</a>
<a href="#">CSS DropDown</a>
</div>
</li>
<li><a href="#" οnmοuseοver="mopen('m2')" οnmοuseοut="mclosetime()">Download</a>
<div id="m2" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX dropdown</a>
<a href="#">DIV dropdown</a>
</div>
</li>
<li><a href="#" οnmοuseοver="mopen('m3')" οnmοuseοut="mclosetime()">Order</a>
<div id="m3" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#" οnmοuseοver="mopen('m4')" οnmοuseοut="mclosetime()">Help</a>
<div id="m4" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">
<a href="#">Download Help File</a>
<a href="#">Read online</a>
</div>
</li>
<li><a href="#" οnmοuseοver="mopen('m5')" οnmοuseοut="mclosetime()">Contact</a>
<div id="m5" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
</ul>
<div style="clear:both"></div>

</body>
</html>
请演示地址查看下载css文件 

iteye_1931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css下拉菜单代码（用纯css实现下拉菜单）
web前端开发博客
04-11 6509
用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。 css下拉菜单代码： <style> ul { list-style: none; margin: 0; padding: 0; } ul li a { display: block; text-decorat.
css下拉菜单全代码
m0_65076170的博客
11-11 822
快来看看吧
css自学框架之二级下拉菜单
最新发布
zhaoyang314的博客
09-22 921
用纯CSS实现鼠标经过后出现下拉菜单，二级下拉菜单，简单实用。
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 3031
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
如何使用CSS实现一个下拉菜单？
官方推荐
08-14 6350
如何使用CSS实现一个下拉菜单？
一个css与js结合的下拉菜单支持主流浏览器
10-25
是一个css和js结合的下拉菜单，经测试支持主流浏览器，比较适合企业站，需要的朋友可以参考下
JavaScript简单下拉菜单实例代码
10-23
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航结构，通常用于网站的顶部导航栏。在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。 首先，HTML结构是...
原生JS实现导航下拉菜单效果
11-27
【标题】：原生JS实现导航下拉菜单效果 【描述】：本示例旨在创建一个响应式的导航下拉菜单，其特点是一级菜单项下的二级菜单会在鼠标悬停时展开，且二级菜单的宽度与浏览器视口相同。实现这个功能主要依赖于...
JavaScript非常小巧的JS下拉菜单代码，兼容多个浏览器
05-18
总的来说，实现一个兼容多种浏览器的JavaScript下拉菜单涉及了JavaScript基础、DOM操作和事件处理，同时还需要关注兼容性问题，以确保在不同浏览器上都有良好的表现。通过逐步理解和实践，你可以掌握这一实用的前端...
关于HTML+CSS来实现一个简单下拉菜单
qq_58426125的博客
08-07 4539
【代码】关于HTML+CSS来实现一个简单下拉菜单。
CSS3横向导航下拉菜单代码.zip
07-04
CSS3横向导航下拉菜单代码是一款红色样式风格的网站导航，鼠标经过的时候下拉显示二级菜单。
案例：新浪下拉菜单.html
06-09
仿js新浪下拉菜单，点击导航栏出现下边相关的内容，主要是通过对元素节点的操作来实现，主要是原生的js写出来的
HTML5+CSS3实现的自定义下拉框菜单效果源码
08-31
自定义下拉框取代了传统的Select样式，用不一样的风格来让select更加美观。这款CSS3下拉框具有3D立体的卡片折叠动画效果，非常酷。
带搜索功能的纯js的下拉框组件，兼容几乎所有浏览器
06-05
带搜索功能的select组件，支持IE8以上及其他浏览器，输入字符自动匹配，可以去博客看看具体细节：https://blog.csdn.net/u010554942/article/details/80593194
多级CSS3下拉菜单导航.zip
07-16
多级CSS3下拉菜单导航是一款基于CSS3和Javascript代码实现的清新响应式多级折叠下拉导航菜单。
前端基础小案例-仿新浪网页下拉菜单
weixin_51983027的博客
12-06 496
前端基础小案例-仿新浪网页下拉菜单，基于HTML，css，javascript实现
新浪微博下拉菜单制作（DOM小练习）
weixin_44566194的博客
08-28 1044
运用 DOM 操作元素知识点，记住鼠标的各类事件，利用 for 循环 处理事件，该项练习考察HTML+CSS+JavaScript 的运用，首先用 HTNL 准备几个盒子模型，一开始想到下拉菜单用到标签 select 中的 option ，但经过实践，决定采用 和 标签 还有链接标签 。★★★ 欢迎批评指正！............
简洁版的新浪滑动下拉菜单
HIRAETHZY的博客
04-25 154
【代码】简洁版的新浪滑动下拉菜单。
css实现下拉菜单
ybh756784818的博客
04-12 9135
css实现下拉菜单的具体步骤，前端小白的个人理解
ifix 制作下拉菜单
08-26
6. 测试和调试：在浏览器中测试下拉菜单的功能和外观。确保菜单的各个部分都能正确显示和工作。 7. 最后的优化和改进：根据需要，可以进一步优化下拉菜单的外观和功能。可以调整样式、添加动画效果或使用插件来增强...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值