一款实用的jQuery网站左侧分类导航菜单，鼠标悬停在每个导航菜单文字上面时，自动在右侧显示其对应的子菜单内容，可以设置多个层级菜单，整体样式效果还是比较大气的，喜欢的童鞋请收下吧。
页面的head部分，设置好页面元素的样式，部分代码如下：
* {
margin:0;
padding:0;
}
body {
font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
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;
}页面的body部分，用了多div嵌套和无序列表ul标签，部分代码如下：
<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 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></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>
</div>
<!-- 省略部分演示代码 -->
<div class="cat_sublist">
<!-- 浮层左边列表 -->
<div class="fore1">
<div class="fore_list">
<h3><a href="javascript:void(0);">云计算10</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);">云计算10</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>
<li><a href="javascript:void(0);">《云计算基础架构》</a></li>
<li><a href="javascript:void(0);">《云计算基础架构》</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>页面的底部，需引入jQuery库，并设置好鼠标悬停事件的响应，代码如下：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//banner左侧内容栏
$(function(){
var thisTime;
//鼠标离开左侧内容栏
$('.cat_wrap .cat_list .float').mouseleave(function(even){
thisTime = setTimeout(thisMouseOut,1000);
});
//鼠标点击左侧内容栏 滑动出弹层
$('.cat_wrap .cat_list .float').mouseenter(function(){
$(this).addClass("active").siblings().removeClass("active");
clearTimeout(thisTime);
var thisUB = $('.cat_wrap .cat_list .float').index($(this));
if($.trim($('.cat_subcont .cat_sublist').eq(thisUB).html()) != ""){
$('.cat_subcont').addClass('active');
$('.cat_sublist').hide();
$('.cat_sublist').eq(thisUB).show();
}else{
$('.cat_subcont').removeClass('active');
}
});
//函数——执行鼠标离开左侧内容栏的动作
function thisMouseOut(){
$('.cat_subcont').removeClass('active');
$('.cat_wrap .cat_list .float').removeClass('active');
}
$('.cat_subcont').mouseenter(function(){
clearTimeout(thisTime);
$('.cat_subcont').addClass('active');
});
$('.cat_subcont').mouseleave(function(){
$('.cat_subcont').removeClass('active');
$('.cat_wrap .cat_list .float').removeClass('active');
});
});
</script>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791