jQuery 菜单 水平菜单的实现
2024-08-31 22:21:08
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/try.js" ></script>
<style>
ul li {
list-style: none;
}
ul {
padding:0;
margin: 0;
}
.main {
float:left;
margin-right: 5px;
background-image: url(img/2.PNG);
background-repeat:repeat-x;
width:100px; }
li {
background-color: #eeeeee;
}
a {
display: block;
text-decoration: none;
width:80px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
}
.main a {
color: white;
background-image:url(img/向右箭头.png);
background-repeat: no-repeat;
background-position:2px center ;
background-size:20px;
}
.main li a{
color:black ;
background-image: none;
}
.main ul {
display: none;
} </style> </head>
<body>
<ul>
<li class="main">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>
js
$(document).ready(function(){
$(".main").hover(function() {
$(this).children("ul").slideToggle();
})
});
效果：
最新文章
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
- phpQuery—基于jQuery的PHP实现
- ASP.NET页面优化性能提升方法记录
- UVa 11039 (排序+贪心) Building designing
- 论坛类应用双Tableview翻页效果实现
- Silverlight 图表下载到Excel文件中
- vue 全局插槽 全局插座
- 第六节《Git克隆》
- sentinel-dashboard安装、运行（ubuntu）
- IIS安装、配置 发布网站 报错解决方案
- Flex labelFunction 用法
- Oracle EBS INV更新保留
- 【合集】TiDB 源码阅读系列文章
- Windows环境搭建ElasticSearch 5.*并配置head
- Hadoop HBase概念学习系列之HBase里的长表VS宽表VS窄表（十五）
- RobotCraft 2017 第二届国际机器人学暑期学校 2nd Edition of International Robotics Summer School
- Zabbix基本功能使用手册
- 在建立与服务器的连接时出错。在连接到 SQL Server 2005 时,在默认的设置下 SQL Server 不允许进行远程连
- ADO.NET实体框架Entity Framework模型-基于元数据解析
- LightOJ 1336 - Sigma Function