js实现 导航栏二级菜单hover下拉效果

最新推荐文章于 2022-10-10 22:32:12 发布
最新推荐文章于 2022-10-10 22:32:12 发布
阅读量5.6k 收藏 12
点赞数 1
分类专栏： 二级导航栏hover下拉 javascript 小功能 文章标签： js 二级导航栏hover下拉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Inuyasha1121/article/details/45671517
版权 
<html>
<head>
<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);
        if(ddmenuitem)ddmenuitem.style.visibility = 'visible';

}

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

// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
    
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
</script>
</head>
<body>
  <div class="headerTop">
   <ul id="navmenu">
    <li><a href="#" οnmοuseοver="mopen('m1')" οnmοuseοut="mclosetime()" disabled="disabled">m1<span class="downArrow"></span></a>
        <div id="m2" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">    
          <a href="#" class="none">m1-1</a>
          <a href="#" class="none">m1-2</a>
        </div>
    </li>
    <li><a href="#" οnmοuseοver="mopen('m2')" οnmοuseοut="mclosetime()" disabled="disabled">m2<span class="downArrow"></span></a>
        <div id="m2" οnmοuseοver="mcancelclosetime()" οnmοuseοut="mclosetime()">    
          <a href="#" class="none">m2-1</a>
          <a href="#" class="none">m2-2</a>
        </div>
    </li>
  </ul>
 </div>

</body>
</head>

Inuyasha1121
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js悬浮二级菜单代码_JavaScript实现下拉二级菜单详解
weixin_39537049的博客
11-21 1239
下拉菜单最终效果如图：实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果初始时可以改变 1.display：none;使其隐藏2.height：0px;改变高度使其隐藏 -->加上下面代码可以实现菜单的**上升下拉逐渐出现动画效果**transition: height 2s ease;3.opacity：0；改变透明度使其隐藏-->加上下...
html用js实现导航栏的二级菜单，自动伸缩。。。
热门推荐
ITzhongzi的博客
07-12 1万+
效果图：：、 代码如下：： 动画菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #333; text-decoration: none } ul{ list-style: none; } .nav {height: 30px; border-bottom: 5px solid #
JS实现导航条效果——current跟随鼠标hover移动
dibengcheng6179的博客
06-26 459
<!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> ...
js下拉菜单，支持所有浏览器
corange代码演示
09-05 157
js下拉菜单演示地址:http://www.corange.cn/demo/3701/index.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;tit...
hover下拉菜单
weixin_56815226的博客
10-10 344
【代码】hover下拉。
一级菜单hover进入二级菜单，二级菜单不消失
qq_34485818的博客
05-28 1万+
在写分级菜单时遇到问题：      设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失       根据一二级菜单DOM关系提出不同思路：               一级菜单包裹二级菜单                   一级菜单 二级菜单
php+jQuery实现的三级导航栏下拉菜单显示效果
10-19
这里的`$('.nav > li')`选择器选取一级菜单的`<li>`元素，`hover`函数定义了鼠标进入和离开时的行为，`find('.sub-menu')`找到对应的二级菜单，`slideToggle`则实现了平滑的展开和折叠效果。 **4. CSS样式设计：** ...
jquery实现黑色导航二级下拉菜单
06-06
创建一个导航栏的基础HTML结构，包含一级菜单项和隐藏的二级菜单项： ```html <li><a href="#">首页</a></li> 产品 <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">...
hover鼠标悬停导航滑动显示二级下拉菜单
06-04
这个模式允许用户在鼠标悬停在一级菜单项上时，二级菜单会以滑动效果出现，提供更多的子选项。 首先，我们需要了解HTML基础结构。在`index.html`文件中，二级下拉菜单通常由`<ul>`和`<li>`元素构建。一级菜单项是`...
jq实现下拉菜单效果 jq二级菜单效果.zip
06-19
在需要二级菜单的`<li>`元素内部，我们再嵌套一个`<ul>`来存放二级菜单项。例如： ```html <li><a href="#">菜单1</a></li> 菜单2 <li><a href="#">子菜单2.1</a></li> <li><a href="#">子菜单2.2</a></li...
JavaScript实现简单的二级导航菜单实例
12-07
本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下： <!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23
js实现二级菜单
05-31
js实现导航栏二级菜单，极丑，极简单，有详细的中文注释，主要是说明原理供自己备用，感兴趣者、初学者可下载，高手飘过。
js实现二级导航功能
12-11
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{text-decoration: none;} *{margin: 0;padding: 0;box-sizing: border-box;font-family: "微软雅黑";} li{list-style-type: none;} .box{width: 220px;height: 477px;margin-top: 110px;margin-left
js二级导航菜单代码实例
Return_KB的博客
01-10 5955
分享一个比较简单的二级导航菜单效果。 鼠标悬浮菜单能够出现二级菜单，代码实例如下: 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052
用js（hover ）+css实现下拉框效果（有效果图）
qq_38215042的博客
01-16 1695
效果图 test.html &amp;amp;lt;div class=&amp;quot;daohang&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;&amp;quot;&amp;amp;gt;首页&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;div class=
js+css二级导航
菜鸡奋斗ing的博客
07-01 744
效果 <!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> <meta http-equiv="Conten
js实现二级导航
weixin_38269675的博客
03-29 2680
贴下效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 导航栏 --> <style> .page{ width: 960px; ...
使用JS完成注册页面表单校验
qq_41485882的博客
09-08 1704
使用JS完成注册页面表单校验 1.技术分析 使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！ 使用 向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象) 2.步骤分析 第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数 第二步：聚焦事件绑定的函数中(获取span给出提示信息) 第三步...
<Java Web学习初级阶段>JavaScript实现注册页面的表单验证
拂晓弄尘影的博客
09-12 9342
代码实现： 表单验证 //初始化页面 function initform(){ //第一个文本框获取焦点 //document.getElementById("username").focus(); //产生验证码 getCode(); } //产生验证码 function getCode(){ var code = String(Math.round(M
php移动端导航栏二级菜单,HTML+CSS简单实现导航栏二级下拉菜单
最新发布
05-15
HTML+CSS实现导航栏二级下拉菜单的方法如下： HTML部分： ```html <nav> <ul> <li><a href="#">菜单一</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a> <ul> <li><a href="#">子菜单四</a></li> <li><a href="#">子菜单五</a></li> </ul> </li> </ul> </nav> ``` CSS部分： ```css nav ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; } nav li { display: inline-block; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav li:hover { background-color: #555; } nav li:hover ul { display: block; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #333; } nav ul ul li { display: block; } nav ul ul li a { color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul ul li:hover { background-color: #555; } ``` 以上代码实现了一个简单的导航栏，其中菜单项包括三个主菜单和两个子菜单，通过CSS设置子菜单的样式和位置，实现了下拉菜单的效果。在hover主菜单时，子菜单显示，移开则隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值