使用css+js制作水平菜单

最新推荐文章于 2024-05-22 13:34:30 发布
最新推荐文章于 2024-05-22 13:34:30 发布
阅读量9.1w 收藏 2
点赞数 3
分类专栏： js CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014646662/article/details/49965463
版权
CSS 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

当鼠标移到一级菜单上



<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>水平菜单</title>
<script type="text/javascript">
function show(id){
document.getElementById(id).style.display="block";
}
function hide(id){
document.getElementById(id).style.display="none";
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#caidan{
width: 800px;
margin: 50px auto;
}
#caidan ul{
list-style: none;
}
#caidan ul li.mu {
width: 110px;
height: 40px;
line-height: 40px;
background-color: orange;
text-align: center;
float: left;
position: relative;
}
.caidan{
background-color: #cfc;
width: 120px;
position: absolute;
padding-top: 10px;
display: none;
}
.inner{
text-align: center;
background-color: #fcf;
}
</style>
</head>
<body>
<div id="caidan">
<ul>
<li class="mu"  οnmοuseοver="show('cd1')" οnmοuseοut="hide('cd1')" >一级菜单
<div id="cd1"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
<li class="mu"  οnmοuseοver="show('cd2')" οnmοuseοut="hide('cd2')" >一级菜单
<div id="cd2"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
<li class="mu"  οnmοuseοver="show('cd3')" οnmοuseοut="hide('cd3')" >一级菜单
<div id="cd3"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
<li class="mu"  οnmοuseοver="show('cd4')" οnmοuseοut="hide('cd4')" >一级菜单
<div id="cd4"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
<li class="mu"  οnmοuseοver="show('cd5')" οnmοuseοut="hide('cd5')" >一级菜单
<div id="cd5"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
<li class="mu"  οnmοuseοver="show('cd6')" οnmοuseοut="hide('cd6')" >一级菜单
<div id="cd6"class="caidan">
<div class="inner">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>


周天祥
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript制作菜单
zhj的博客
05-19 1152
用mouseover和mouseout代替css的hover功能 通过闭包和addEventListener设置鼠标mouseover和mouseout事件：循环执行函数(function(ind){})(i)来绑定每个菜单项的事件 for (var i = 0; i < y1.length; i++) { y1[i].addEventListener("mouseover"...
《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip
05-25
《网页设计与制作项目教程...同时，不断练习编写代码，对照源码分析，逐步提高自己的网页设计和制作水平。这本教程不仅适合初学者入门，也对有一定基础的学习者提供进阶实践的机会，是一份宝贵的教育资源。
Css+JQuery 菜单.rar
05-26
Css+JQuery技术：制作一个菜单，可以做成水平菜单，也可以做成垂直菜单，要求： 1) 至少做到二级菜单 2) 两级菜单可以采用不同的布局方式 3) 可以使用JavaScript或其他方式实现菜单项的响应事件
5款DIV+CSS导航菜单(四)
kaddisher的专栏
11-16 786
dropline-水平三级横向弹出菜单http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">dropline-水平三级横向弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:749px; h
使用HTML+CSS+JavaScript实现导航栏
最新发布
2301_81034686的博客
05-22 490
使用简单的HTML+CSS+JavaScript知识，我们可以设置简单的网页导航栏菜单项点击时高亮转移，使得用户清楚自己所在的网页的内容区域。除了这种方法，我们还可以使用其他前端知识实现这种效果。
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
10-01 2万+
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu摘要: 本文介绍了使用 CSS 编写适用于 Opera, Firefox, IE 的多风格弹出菜单说明:编写 CSS 弹出菜单的要点不外乎当鼠标移到目标上时, 显示出隐藏的标签. 要隐藏的标签使用 display:none; 属性进行隐藏. 触发显示隐藏标签主要使用 :hover 属性, 并用 display:block; 
06，JavaScript自定义菜单
bingliang514csdn的博客
11-19 344
06，JavaScript自定义菜单
JS案例：在浏览器实现自定义菜单
07-24 1597
​ 分享一下之前公司实现自定义菜单的思路，禁用浏览器右键菜单，使用自定义的菜单将其代替，主要功能有：鼠标右键调出菜单，双击选中/取消选中标签，新建标签，删除标签，调整位置，调整大小，取消拖拽，关闭菜单
js实现的折叠式菜单
wangyining070205的博客
06-11 4500
用js实现的折叠式菜单
几款纯div+css制作的弹出菜单标准且无js
yjp2006的专栏
06-14 757
1.内容不会挤跑 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" l
css结合js制作下拉菜单示例代码
10-26
本文将详细介绍如何通过CSS（层叠样式表）和JavaScript结合来制作下拉菜单，并提供示例代码供参考。 首先，我们来看CSS部分。CSS用于定义下拉菜单的样式和布局。在提供的代码中，`ul#navmenu-h`是根菜单的ID选择器...
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
纯div+css制作的弹出菜单
03-15
纯div+css 弹出菜单 水平三级横向弹出菜单
使用CSS3制作响应式导航菜单的方法
12-13
本教程将详细讲解如何利用CSS3实现一个无需JavaScript的响应式导航菜单，适用于各种移动和桌面浏览器，包括IE。 首先，我们需要创建HTML结构。在示例中，使用了标签，这是HTML5中的语义化标签，用于定义导航链接的...
仿CmsEasy网站横向二级JS+CSS导航菜单
06-06
综上所述，“仿CmsEasy网站横向二级JS+CSS导航菜单”是一个结合了CSS样式和JavaScript交互的网页组件，它通过优雅的过渡效果和良好的交互设计，为用户提供了一种高效的导航方式。理解和掌握这种菜单的制作方法，对于...
使用JS制作水平弹出式菜单
程序员小白的博客
12-05 1881
用JavaScript写一个水平弹出式菜单
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）
热门推荐
lurenxie的博客
05-08 2万+
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强...
js做滑动菜单
halo1416的博客
09-25 941
首先，先来一张效果图： 其次，总结一下需要注意的地方： 整个代码都需要写在 window.onload 事件中，因为页面加载完毕 ,才能拿到html元素，否则会报错； 事件注册以后，在里面拿不到  lis[i]  和  遍历数组的索引，所有在事件函数内只能用 this 或者事件源 event.target； 因为原因2，所有需要把菜单的索引存下来，然后到事件注册后取出索引； tabI...
css导航栏横向二级菜单
11-05
这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到的二级导航栏有很多链接，不仅有垂直的链接，还有很多水平的链接。下面我们将学习如何制作水平的二级导航栏。 首先，我们需要创建一个HTML结构，其中包含一个主菜单和一个子菜单。然后，我们使用CSS样式来设置菜单的外观和布局。最后，我们使用jQuery来添加交互效果，例如当鼠标悬停在菜单上时显示子菜单。 以下是一个简单的示例代码，可以帮助你更好地理解如何创建水平的二级导航栏： ```html <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our Team</a></li> <li><a href="#">Our Story</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> ``` ```css nav ul { list-style: none; margin: 0; padding: 0; background-color: #333; } nav ul li { display: inline-block; position: relative; } nav ul li a { display: block; padding: 0 10px; line-height: 40px; color: #fff; text-decoration: none; } nav ul li:hover > ul { display: block; } nav ul ul { display: none; position: absolute; top: 40px; left: 0; width: 100%; background-color: #333; } nav ul ul li { display: block; } nav ul ul li a { padding: 0 20px; line-height: 30px; } ``` ```javascript $(document).ready(function() { $('nav ul li').hover( function() { $(this).children('ul').slideDown(200); }, function() { $(this).children('ul').slideUp(200); } ); }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值