JQuery横向、纵向菜单显示

最新推荐文章于 2024-08-10 07:18:04 发布

肖红

最新推荐文章于 2024-08-10 07:18:04 发布

阅读量1.4k

点赞数 1

分类专栏： B/S

本文链接：https://blog.csdn.net/xh921/article/details/38459987

版权

本文介绍如何使用JQuery实现横向和纵向菜单的显示效果。通过HTML嵌套ul和li创建菜单结构，利用CSS控制样式，JS处理动态显示。在JS中，主要涉及.show(), .hide(), .toggle(), .slideDown(), .slideUp()等方法来控制菜单的可见性，同时讲解了如何改变菜单图标和鼠标样式。" 127085099,15317158,PLSQL基础教程：用户管理与权限操作,"['数据库', 'PLSQL', 'SQL']

摘要由CSDN通过智能技术生成

在实际应用中，横向和纵向的菜单除了在CSS样式中有些不同之外，其他的JS文件和HTML文件编写没有什么区别，很容易相互转换。界面上的菜单我们通过嵌套ul和li来表示，通过css对菜单的简单样式进行控制，通过JS对菜单的动态显示效果进行设置。重点学习js文件中对菜单的显示和隐藏的样式设置。

纵向菜单设置：

HTML代码：

<ul>
	<li class="main">
		<a href="#">菜单项1</a>
			<ul>
				<li><a href="#">子菜单项11</a></li>
				<li><a href="#">子菜单项12</a></li>
			</ul>
	</li>
	<li class="main">
		<a href="#">菜单项2</a>
			<ul>
				<li><a href="#">子菜单项21</a><li>
				<li><a href="#">子菜单项22</a><li>
			</ul>
	</