<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:'microsoft yahei';
overflow:hidden;
background:#fff;
}
.w {
width:1200px;
margin:0 auto;
}
a {
text-decoration:inherit;
}
a,li {
list-style:none;
}
.cf:before,.cf:after,.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.cf:after,.clearfix:after {
clear:both;
}
.cf,.clearfix {
clear:both;
*zoom:1;
}
/*导航条*/
#nav {
width:100%;
min-width:1200px;
height:30px;
background:#00a1ea;
margin-top:100px;
}
#nav ul li {
float:left;
}
#nav ul li:first-child {
margin-left:17%;
}
#nav ul li a {
font-size:16px;
color:#fff;
line-height:30px;
padding:0 35px;
display:inline-block;
}
#nav ul li a:hover {
background:#fff000;
color:#00a1ea;
}
#nav ul li.active a {
background:#fff000;
color:#00a1ea;
}
/*banner上面浮层*/
.cat_wrap {
box-shadow:1px 1px 2px #bfbcbc;
box-shadow:0 -4px 8px 0 rgba(7,17,27,.1),0 4px 8px 0 rgba(7,17,27,.1);
background:#fff;
width:180px;
position:absolute;
z-index:999;
top:-30px;
}
.cat_wrap .cat_title {
width:192px;
height:50px;
line-height:50px;
font-size:16px;
background:url(i/juxing.png) no-repeat;
margin-left:-6px;
margin-top:-15px;
background-size:100%;
color:#fff;
text-align:center;
}
.cat_wrap .cat_header {
min-height:450px;
}
.cat_wrap .cat_list div {
background:#fff;
border-left:3px solid transparent;
}
.cat_wrap .cat_list div li {
float:left;
color:#323232;
font-size:14px;
margin:7px 0px;
}
.cat_wrap .cat_list div li:first-child {
margin-left:15px;
margin-right:10px;
}
.cat_wrap .cat_list {
cursor:pointer;
}
.cat_wrap .cat_list div.active {
width:177px;
padding-left:1px;
position:relative;
z-index:999;
border-left:3px solid #00a1ea;
border-top:1px solid #00a1ea;
border-bottom:1px solid #00a1ea;
border-right:none;
}
/*banner浮层滑动显示弹框*/
.cat_subcont {
display:none;
}
.cat_subcont.active {
display:block;
}
.cat_subcont .cat_sublist {
position:absolute;
z-index:998;
top:30px;
left:180px;
padding-top:5px;
min-height:394px;
width:740px;
background:#fff;
border-top:1px solid #f9f9f9;
border-left:1px solid #00a1ea;
border-bottom:1px solid #00a1ea;
border-right:1px solid #00a1ea;
}
.cat_subcont .cat_sublist .fore1 {
width:740px;
}
.cat_subcont .cat_sublist .fore1 .fore_list {
padding:0 20px;
}
.cat_subcont .cat_sublist .fore1 .fore_list h3 {
padding:5px;
border-bottom:1px solid #d3d3d3;
}
.cat_subcont .cat_sublist .fore1 .fore_list h3 a {
font-size:14px;
color:#00a1ea;
}
.cat_subcont .cat_sublist .fore1 .fore_list li {
float:left;
padding:5px;
}
.cat_subcont .cat_sublist .fore1 .fore_list li a {
font-size:12px;
color:#333;
}
.cat_subcont .cat_sublist .fore1 .fore_list li a:hover {
color:#00a1ea;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="nav">
<ul class="w">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">讲师</a></li>
<li><a href="#">在线直播</a></li>
<li><a href="#">网络视频</a></li>
<li><a href="#">实战案例</a></li>
<li><a href="#">内训定制</a></li>
</ul>
</div>
<div class="w clearfix" style="position:relative;">
<!-- banner上面浮层 -->
<div class="cat_wrap">
<div class="cat_header">
<h3 class="cat_title">全部课程</h3>
<div class="cat_list">
<div class="float for1">
<ul class="clearfix">
<li>云计算</li>
<li>大数据</li>
</ul>
</div>
<div class="float for2">
<ul class="clearfix">
<li>移动互联网</li>
<li>架构设计</li>
</ul>
</div>
<div class="float for3">
<ul class="clearfix">
<li>软件测试</li>
<li>产品创新</li>
</ul>
</div>
<div class="float for4">
<ul class="clearfix">
<li>敏捷开发</li>
<li>数据库</li>
</ul>
</div>
<div class="float for5">
<ul class="clearfix">
<li>系统运维</li>
<li>编辑语言</li>
</ul>
</div>
<div class="float for6">
<ul class="clearfix">
<li>办公技能</li>
<li>项目管理</li>
</ul>
</div>
<div class="float for7">
<ul class="clearfix">
<li>人力资源</li>
<li>管理技能</li>
</ul>
</div>
<div class="float for8">
<ul class="clearfix">
<li>营销管理</li>
<li>领导力</li>
</ul>
</div>
<div class="float for9">
<ul class="clearfix">
<li>职业素养</li>
<li>其他</li>
</ul>
</div>
<div class="float for9">
<ul class="clearfix">
<li>职业素养</li>
<li>其他</li>
</ul>
</div>
</div>
</div>
<!-- banner浮层滑动显示弹框 -->
<div class="cat_subcont">
<div class="cat_sublist">
<!-- 浮层左边列表 -->
<div class="fore1">
<div class="fore_list">
<h3><a href="javascript:void(0);">云计算1</a></h3>
<ul class="clearfix">
<li><a href="javascript:void(0);">《云计算基础架构》</a></li>
<li><a href="javascript:void(0);">《云平台》</a></li>
<li><a href="javascript:void(0);">《大数据》</a></li>
<li><a href="javascript:void(0);">《虚拟化技术》</a></li>
<li><a href="javascript:void(0);">《云计算基础架构》</a></li>
</ul>
</div>
<div class="fore_list">
<h3><a href="javascript:void(0);">云计算1</a></h3>
<ul class="clearfix">
<li><a href="javascript:void(0);">《云计算基础架构》</a></li>
<li><a href="javascript:void(0);">《云平台》</a></li>
<li><a href="javascript:void(0);">《大数据》</a></
jQuery网页左侧分类导航菜单
需积分: 16 107 浏览量
2018-01-09
16:11:58
上传
评论 1
收藏 34KB RAR 举报
jqueryWebNav.rar （3个子文件） 
jqueryWebNav i 
juxing.png 703B
index.html 26KB js 
jquery.min.js 91KB资源评论
shu_0233
- 粉丝: 32
- 资源: 22
最新资源
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发，利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法（空间杜宾模型和检验以及结果解释文档）.txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告：内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
