top类型的导航栏样式

最新推荐文章于 2023-04-23 21:57:42 发布

往事不堪回首..

最新推荐文章于 2023-04-23 21:57:42 发布

阅读量794

点赞数

分类专栏：前端集文章标签： css html javascript

本文链接：https://blog.csdn.net/qq3892997/article/details/122132223

版权

前端集专栏收录该内容

44 篇文章 1 订阅

订阅专栏

类似CF中鼠标滑过活动列表


<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>水平导航</title>

<style type="text/css">
	body{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
    letter-spacing: 0;
    min-width: 1200px;
    color: #333333;
}

.hl_nav{
    background-color: #117fbd;
    position: relative;
    color: #fff;
    min-width: 1200px;
  	height: 36px; 
}
.hl_nav a{
    display: block;
    text-decoration: none;
}
.hl_nav .shade{
    position: absolute;
    width: 100%;
    height: 200px;
    top: 64px;
    left: 0;
    z-index: 1;
    background-color: #EEEEEE;
    opacity: 0.9;
    filter: alpha(opacity=90);
    box-shadow: 0 5px 15px #CCCCCC;
    display: none;
    border-bottom: #ffffff solid 1px;
    border-bottom: rgba(255,255,255,0.3) solid 1px;
}
.hl_nav .nav_list{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -600px;
    z-index: 2;
    padding: 0;
    list-style: none;
     /*  width: 960px; 有多少权限相应的就多长的下拉框，限制死了反而难看*/
    overflow: hidden;
    height: 36px;
    background-color:#808080;
    opacity:0.9; 
}
.hl_nav .nav_list>li{
    padding: 0;
    float: left;
    margin: 0;
    width: 120px;
    text-align: center;
    height: 264px;
}
.hl_nav .nav_head{
    height: 36px;
    line-height: 36px;
    color: #ffffff;
    font-size: 14px;
    background-color: #117fbd;
}
.hl_nav .nav_head .icon{
    font-size: 18px;
}
.hl_nav .item{
    height: 32px;
    line-height: 28px;
    color: #fff;
}
.item:hover{
	 background-color:#e61919;
}

.hl_nav .nav_list:hover{
    height: 450px;
}
.hl_nav .nav_list:hover + .shade{
    display: block;
}
.hl_nav .nav_list>li.highlight:hover{
    background-color: #ffffff;
}
.hl_nav .nav_list>li:hover .nav_head,.hl_nav .nav_list>li.active .nav_head{
    background-color: #e61919;
}
.hl_nav .nav_list>li.right{
    float: right;
}
</style>
</head>
<body>
		<div > 
			<nav class="hl_nav">
			    <ul class="nav_list">
					<li ><a href="#"  class="nav_head" >报表查询</a> 
							<a class="item" href="#" onclick="ajaxUserResignListReport();">离职报表</a>
							<a class="item" href="#" onclick="ajaxUserLeaveReport();">离岗报表</a>
							<a class="item" href="#" onclick="ajaxSkillRecordReport();">技能履历报表</a>
							<a class="item" href="#" onclick="toDynamicLib();">CP成品动态在库</a>
							<a class="item" href="#" onclick="ajaxUserPostListReport();">人员基础信息报表</a>
							<a class="item" href="#" onclick="ajaxDailyReportMain()">每日生产日报报表</a>
							<a class="item" href="#" onclick="ajaxReport4mMain();">4M报表一般查询</a>
							<a class="item" href="#" onclick="ajaxReport4mRecent();">本人三天内4M报表</a>
					</li>
					
					<li><a href="#" onclick="ajaxOtherPage() " class="nav_head">外部系统</a></li>	
					<li th:if="${session.navmenuValid == '1'}"><a href="#"  class="nav_head">Master管理</a>					
						<a class="item" th:if="${session.postValid == '1'}" href="#" onclick="ajaxPostRelation()">岗位管理</a>
						<a class="item" th:if="${session.membertypeValid == '1'}" href="#"  onclick="ajaxMemberType()">职务管理</a>
						<a class="item" th:if="${session.mIsMachine == '1'}" href="#" onclick="ajaxMachineGroup();">机种管理</a>
						<a class="item" th:if="${session.mIsResetPw == '1'}" href="#" onclick="ajaxResetPW()">密码重置</a>
						<a class="item" th:if="${session.masterValid == '1'}" href="#" onclick="ajaxMenuPerm();">菜单权限管理</a>							
						<a class="item" th:if="${session.resignValid == '1'}" href="#" onclick="ajaxResignCommon();">离职原因管理</a>
					</li>					
						
					<li th:if="${session.userpermis == 1}"><a class="nav_head" href="#" onclick="ajaxOperationLog()">操作日志</a></li>
					<li th:if="${session.mIsInventory == '1'}"><a class="nav_head" href="#">成品管理</a>
					 	<a class="item" href="#" onclick="toReceive();">接收管理</a>
					    <a class="item" href="#" onclick="toWarehousing();">入库管理</a>
						<a class="item" href="#" onclick="toOutbound();">出库管理</a>
						<a class="item" href="#" onclick="toDynamicLib();">动态在库</a>
					</li>
						
										
				</ul>
			</nav>
		</div>
</body>

</html>

往事不堪回首..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
top类型的导航栏样式

类似CF中鼠标滑过活动列表<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=n..
复制链接

扫一扫