UI框架-横向多级导航菜单

最新推荐文章于 2025-08-15 12:15:19 发布

原创

最新推荐文章于 2025-08-15 12:15:19 发布 · 置顶 · 2.5k 阅读

标签

#横向导航 #360UI #jquery #导航

本文介绍如何使用360UI和jQuery技术创建一个功能完善的横向多级导航菜单，适合网页UI设计和前端开发者参考。内容涵盖菜单的层级结构设计、交互实现以及优化技巧。

在页面底部引入脚本

<script language="JavaScript" src="../js/ocscript_h.js" type="text/javascript"></script>

<script language="JavaScript" src="../js/ocscript_h.js" type="text/javascript"></script>

HTML部分

<div style="width:600px;height:30px;background-color:#0e6acd;margin:20px 0 0 20px;">
	<div class="imrcmain0 imgl" style="width:580px;z-index:800;position:relative;"><div class="imcm imde" id="imouter0" class="imouter_h_cus"><ul id="imenus0" class="imenus_h_cus">
	<li class="imatm"  style="width:95px;"><a class="" href="javascript:;"><span class="imea imeam"><span></span></span>一级栏目1</a>
	
		<div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><ul style="">
		<li><a href="javascript:;">二级栏目1</a></li>
		<li><a href="javascript:;">二级栏目2</a></li>
		<li class="dvs"><a href="javascript:;">二级栏目3</a></li>
		<li><a href="javascript:;">二级栏目4</a></li>
		<li><a href="javascript:;"><span class="imea imeas"><span></span></span>二级栏目5</a>
	
			<div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style="">
			<li><a href="javascript:;">三级栏目1</a></li>
			<li><a href="javascript:;">三级栏目2</a></li>
			<li><a href="javascript:;">三级栏目3</a></li>
			</ul></div></div></li>
	
	
		<li><a href="javascript:;"><span class="imea imeas"><span></span></span>二级栏目6</a>
	
			<div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style="">
			<li><a href="javascript:;">三级栏目4</a></li>
			<li><a href="javascript:;">三级栏目5</a></li>
			</ul></div></div></li>
		</ul></div></div></li>
	
	
	<li class="imatm"  style="width:95px;"><a href="javascript:;"><span class="imea imeam"><span></span></span>一级栏目2</a>
	
		<div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style="">
		<li><a href="javascript:;">二级栏目7</a></li>
		<li><a href="javascript:;">二级栏目8</a></li>
		<li><a href="javascript:;">二级栏目9</a></li>
		<li><a href="javascript:;">二级栏目10</a></li>
		<li><a href="javascript:;">二级栏目11</a></li>
		</ul></div></div></li>
	
	
	<li class="imatm"  style="width:95px;"><a href="javascript:;"><span class="imea imeam"><span></span></span>一级栏目3</a>
	
		<div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><ul style="">
		<li><a href="javascript:;">二级栏目12</a></li>
		<li><a href="javascript:;">二级栏目13</a></li>
		</ul></div></div></li>
	
	
	<li class="imatm"  style="width:95px;"><a href="javascript:;">一级栏目4</a></li>
	
	
	</ul><div class="imclear"> </div></div></div>
</div>

<div style="width:600px;height:30px;background-color:#0e6acd;margin:20px 0 0 20px;">
	<div class="imrcmain0 imgl" style="width:580px;z-index:800;position:relative;"><div class="imcm imde" id="imouter0" class="imouter_h_cus"><ul id="imenus0" class="imenus_h_cus">
	<li class="imatm"  style="width:95px;"><a class="" href="javascript:;"><span class="imea imeam"><span></span></span>一级栏目1</a>
	
		<div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;

最低0.47元/天解锁文章