CSS+JS感应鼠标展开的的二级下拉菜单

最新推荐文章于 2021-05-31 02:46:03 发布
最新推荐文章于 2021-05-31 02:46:03 发布
阅读量90 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zhaozzm/p/4143480.html
版权 
<!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>CSS+JS感应鼠标展开的的二级下拉菜单丨</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    *{margin:0;padding:0;font-style:normal;font-family:宋体;}
    body{text-align:center;font-size:14px;}
    #content{margin:0 auto;width:600px;}
    #content #nav{background:#000000;height:32px;margin-top:10px;}
    #content #nav ul{list-style:none;}
    #content #nav ul li{float:left;width:100px;line-height:32px;position:relative;}
    #nav div{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#000000;float:left;height:0;overflow:hidden;}
    #content #nav li .a{text-decoration:none;color:#00CD00;line-height:32px;display:block;border-right:1px solid #009800;}
    #nav div a{text-decoration:none;color:#00CD00;line-height:26px;display:block;}
    #nav div a:hover{background:#005400;}
    </style>
    </head>
    <body>
    <div id="content">
    <div id="nav">
    <ul id="supnav">
    <li><a href="#" class="a">菜单测试</a>
    <div>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    </div>
    </li>
    <li><a href="#" class="a">网页特效</a>
    <div>
    </a>
    </div>
    </li>
    <li><a href="#" class="a">菜单测试</a>
    <div>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    </div>
    </li>
    <li><a href="#" class="a">菜单测试</a>
    <div>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    </div>
    </li>
    <li><a href="#" class="a">菜单测试</a>
    <div>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="hongshan1998.com.cn">菜单测试</a>
    <a href="http://www.ylxxhs.net/">菜单测试</a>
    </div>
    </li>
    <li><a href="#" class="a">菜单测试</a>
    <div>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    <a href="#">菜单测试</a>
    </div>
    </li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    var supnav=document.getElementById("supnav");
    var nav=document.getElementById("nav");
    var btns=document.getElementsByTagName("li");
    var subnavs=nav.getElementsByTagName("div");
    var paddingbottom=20;
    var defaultHeight=0;
    function drop(obj,ivalue){
    var a=obj.offsetHeight;
    var speed=(ivalue-obj.offsetHeight)/8;
    a+=Math.floor(speed);
    obj.style.height=a+"px";
    }
    window.onload=function(){
    for(var i=0;i<btns.length;i++){
    btns[i].index=i;
    btns[i].onmouseover=function(){
    var osubnav=subnavs[this.index];
    var sublinks=osubnav.getElementsByTagName("a");
    if(osubnav.firstChild.tagName==undefined){
    var itarheight=parseInt(osubnav.childNodes[1].offsetHeight)*sublinks.length+paddingbottom;
    }else{
    var itarheight=parseInt(osubnav.firstChild.offsetHeight)*sublinks.length+paddingbottom;
    }
    clearInterval(this.itimer);
    this.itimer=setInterval(function(){drop(osubnav,itarheight);},30);
    }
    btns[i].onmouseout=function(){
    var osubnav=subnavs[this.index];
    clearInterval(this.itimer);
    this.itimer=setInterval(function(){drop(osubnav,defaultHeight);},30);
    }
    }
    }
    </script>
    </body>
    </html>
    <br><br><br><br><br><br> <br><hr>

 

转载于:https://www.cnblogs.com/zhaozzm/p/4143480.html

weixin_30244681
关注
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
html+css+js实现二级菜单鼠标移动效果
Ariel的博客
10-24 3581
效果图： 大体思路： 鼠标移至头像时，二级菜单出现，鼠标移至二级菜单，可以对子菜单进行选择，鼠标移出子菜单，子菜单消失。 子菜单使用position：absolute绝对定位到父级菜单下方。 &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt; &amp;amp;lt;img src=&amp;quot;img/index/head.png&amp
通用的二级菜单代码(css+javascript)
楚小狂
03-24 1545
其实，无论是什么样的二级菜单，原理都是一样的：  1、每一个一级菜单都会对应一个层，而这个层里放着的就是该一级菜单对应的二级菜单。  2、默认情况下，二级菜单这个层是隐藏的，在CSS中将层的display属性值设为none，可以达到这一目的。  3、当鼠标放在一级菜单上时，将对应的二级菜单层显示出来，在CSS中将层的display属性值设为block，可以达到这一目的。  4、当鼠标从一级
编写一个简单的css二级菜单，鼠标移动二级菜单就消失的问题
forever_ylx的专栏
12-23 2474
二级列表学习
使用HTML+CSS实现鼠标划过的二级菜单栏
weixin_30900589的博客
04-25 266
先上效果图： 1、鼠标没在上面 2、鼠标放在一级菜单上，展开二级菜单 3、鼠标放在二级菜单上 代码：(点击此处预览代码效果) <html> <head> <title>二级菜单测试</title> <meta charset="utf-8"> <style ty...
jquery自动感应多级下拉导航菜单
06-05
在"jQuery自动感应多级下拉导航菜单"中，"自动感应"指的是菜单能够根据用户的鼠标悬停或点击行为自动展开或收起子菜单。这种响应式设计增强了用户体验，使用户能快速找到所需信息。而"多级"则意味着菜单不仅有一级...
较全的JS热门特效基础学习
12-14
JS树可以实现一级、二级甚至无限级节点的展示，通过递归或迭代方法创建节点，同时支持节点的展开与折叠，以及动态加载子节点数据。 2. **菜单特效**：菜单是网页交互的重要部分，JS可以实现动态菜单，如滑动、淡入...
前端 - 面试题总汇
qq_44641053的博客
03-15 2942
前端1. 标签上 alt与 title属性的区别是什么？2. DIV+CSS 布局较 table 有什么优势？3. 介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？4. CSS 选择符有哪些？5. JS 的数据类型有哪些？6. null，undefined 的区别?7. 描述下 JSON 对象的两个很重要的方法8. eval 是做什么的？9. 简述下为何通过 ajax ...
使用css+js实现select横向显示子菜单
weixin_33964094的博客
03-23 1060
效果 思路 用<ul>标签模拟,js和css处理显示和赋值 实现 html 部分 <input id="groupBtn" type="button" value="A集团"/> <ul id="groupName"> <li><a href="javascript:;">A集团</a></li> <...
如何写一个简单的鼠标滑动过的二级菜单
weixin_30402343的博客
03-29 105
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <style type...
鼠标移入侧边栏一级菜单后，二级菜单显示
会飞的猪0629
07-03 6773
就是简简单单的一个小功能，鼠标移入侧边栏的一级菜单后，相对应的二级菜单显示。
Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
life is wonderful
01-08 8750
前面几篇博文都在讲导航菜单和二级下拉式菜单，其实有很多方法都可以实现的，具体的情况还要视情况而定。 在后面学习到jQuery框架之后，会有更丰富的动画效果，由于在学习Ajax和jQuery的初步阶段，对于很多的复杂的导 航菜单和二级下拉式菜单没法做，但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧。        首
javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
weixin_30872789的博客
05-20 576
1. 关键代码：使用 switch 或 if 判断语句，改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ 　　switch(i){ 　　　　case 71: 　　　　　　document.getElementById("TabMenuCon71").style.display="block"; ...
Web前端开发实战1：二级下拉式菜单之CSS实现
热门推荐
life is wonderful
12-30 3万+
二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？ 学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程 还是一样的，今天开始做一些简单的二级下拉式菜单。        横向一级菜单我们见到的很多，如下图所示是：        二级下拉菜单图：        二级下拉菜单是
原生JS+CSS实现一个简单带二级菜单顶部导航
weixin_42776027的博客
06-27 4765
转载地址：https://www.jianshu.com/p/03e7e0637fb0 目标是当鼠标悬浮在导航栏上时，出现指定的二级菜单。 首先先将基本的导航框架写好。 html和css代码 <body> <nav class="clearfix"> <div class="topNavBar"> ...
css中用hover实现二级菜单
weixin_43853424的博客
12-05 4322
css中用hover实现二级菜单 在我们日常生活中，通常会看到下拉菜单会有一些二级菜单，下面就为大家讲解一下如何生成二级菜单。 第一步首先进行一个页面的主要布局，我这里主要用的是ul+li进行嵌套布局，内容如下： 第二部就要给它进行一个格式的编写，让它实现效果： 以上就是一个简单的二级菜单的制作方法，如果大家在做样式的时候感觉选择器用的比较多麻烦，可以起个class类名。下面在附上一张效果图...
html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果
weixin_34824634的博客
05-31 1145
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
使用HTML+CSS+JS实现二级菜单的兼容性代码示例
本文将介绍如何使用HTML、CSS和JavaScript通过嵌套的`<ul>`和`<li>`元素创建一个兼容多种浏览器（包括IE6-9、谷歌和火狐）的简单二级菜单。示例代码包含了一个基本的菜单结构，并展示了如何通过JavaScript控制二级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值