博客园左侧导航jQuery+Css

来源：互联网发布：工程优化方法及其应用编辑：程序博客网时间：2024/06/09 17:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#titleDiv
{
width: 180px;height: 30px;margin: 0px;
}
#titleDiv_Bj
{
background: url('images/site_cate_title_bg.png') no-repeat;width: 180px;height: 30px;margin: 0px;
}
#titleDiv_Content
{
font-size: 14;text-align: right;font-weight: bold;
width: 98px;height: 30px;padding-top: 10px;margin: 0px;
}
.cate_item
{
border-left: 4px solid #146EB4;
list-style: none;width: 175px;margin: 0px;border-top: 1px solid #83ABC6;
border-right: 1px solid #83ABC6;line-height: 30px;padding: 0px;
}
a
{
text-decoration: none;
}

.cate_item li
{
background-color: #EFF5FC;border-bottom: 1px dotted #A6A7B9;padding-left: 10px;
}
/*鼠标经过第一个盒子时，li的样式*/
.moveDiv
{
border-top:1px solid #9A9A9A;background: url('images/Bwhite.jpg') no-repeat;
}
.ss
{
display:none;
}
/*两个盒子中的蓝色三角*/
.imgPostion
{
float: right;width: 6px;height: 9px; padding-top: 12px;padding-right: 12px;
}
.imgPostion1
{
width: 16px;height: 9px;padding-top: 12px;padding-left:10px;float:left;
}
/*弹出来的一个盒子*/
.moreUlMain
{
width:160px;display:none;position:absolute;background-color:White;
}
.moreUlMain .moreUlMain_Top
{
background: url('images/cate_block_top.gif') no-repeat;height:5px;margin-top:0px;padding-top:0px;
}
.moreUlMain .moreUlMain_left
{
background: url('images/cate_block_left_border.gif') no-repeat;margin:0px;padding:0px;
}
.moreUlMain .moreUlMain_left ul
{
border-right:1px solid #CACACA;line-height:30px;margin:0px;padding:0px;width:158px;font-size:14px;display:none;list-style:none;
}

.moreUlMain_Bottom
{
background: url('images/cate_block_bottom.gif') no-repeat;height:5px;margin-top:0px;padding-top:0px;
}
/*底部圆角*/
.cate_bottom
{
background: url('images/site_cate_bottom_bg.gif') no-repeat;width: 180px;height: 5px;margin: 0px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function () {
$(function () {
var img = '<div class="img1"><img src="images/icon_blue_arrow.gif" width="6" height="9"></div>';
$('.cate_item li').append(img);$('.img1').addClass('imgPostion');

var img = '<div class="img2"><img src="images/icon_blue_arrow.gif" width="6" height="9"></div>';
$('.moreUlLi li').append(img);$('.img2').addClass('imgPostion1');

})
//这里用这个I变量的目的是什么，能将Value值传递下去，不这样的话，下面找不到Value的值
var i;
$('.cate_item li').mousemove(function (e) {
$(this).addClass('moveDiv'); $('.moreUlMain').css('left', '156px'); $('.moreUlMain').css('top', e.pageY);
i = $(this).val();if (i !== 0) { $('.moreUlMain').show();$('#' + i).show();}

})
$('.cate_item li').mouseleave(function () {
$(this).removeClass('moveDiv'); $('.moreUlMain').hide();$('#' + i).hide();

})
$('.moreUlMain').mousemove(function () {
$('#' + i).show();$('.moreUlMain').show();

})
$('.moreUlMain').mouseleave(function () {
$('.moreUlMain').hide();$('#' + i).hide();
})
})

</script>
</head>
<body>

<div id="titleDiv">
<div id="titleDiv_Bj">
<div id="titleDiv_Content">
网站分类</div>
</div>
</div>

<ul class="cate_item">
<li value="1"><a href="#">.NET技术(6)</a>
</li>
<li value="2"><a href="#">编程语言(6)</a>
</li>
<li value="3"><a href="#">软件设计(0)</a>
</li>
<li value="4"><a href="#">Web前端(14)</a>
</li>
<li value="5"><a href="#">企业信息化(0)</a>
</li>
<li value="6"><a href="#">手机开发(1)</a>
</li>
<li value="7"><a href="#">软件工程(2)</a>
</li>
<li value="8"><a href="#">数据库技术(4)</a>
</li>
<li value="9"><a href="#">操作系统(1)</a>
</li>
<li value="10"><a href="#">其他分类(6)</a>
</li>
<li ><a href="#">所有随笔(485)</a>
</li>
<li ><a href="#">所有评论(366)</a>
</li>
</ul>

<div class="cate_bottom">
</div>
<div class="moreUlMain">
<div class="moreUlMain_Top" ></div>
<div class="moreUlMain_left" >
<ul id="1" class="moreUlLi" style="display:none;">
<li><a href="#">.NET新手区(0)</a></li>
<li><a href="#">ASP.NET(1)</a></li>
<li><a href="#">C#(2)</a></li>
<li><a href="#">WinForm(0)</a></li>
<li><a href="#">Silverlight(0)</a></li>
<li><a href="#">WCF(0)</a></li>
<li><a href="#">CLR(0)</a></li>
<li><a href="#">WPF(0)</a></li>
<li><a href="#">WF(0)</a></li>
<li><a href="#">XNA(0)</a></li>
<li><a href="#">VS2010(0)</a></li>
<li><a href="#">ASP.NET MVC(0)</a></li>
<li><a href="#">控件开发(0)</a></li>
<li><a href="#">Entity Framework(0)</a></li>
<li><a href="#">WinRT/Metro(1)</a></li>
</ul>

<ul id="2" class="moreUlLi" style="display:none;">
<li><a href="#">Java(1)</a></li>
<li><a href="#">C++(1)</a></li>
<li><a href="#">PHP(0)</a></li>
<li><a href="#">Delphi(0)</a></li>
<li><a href="#">Python(0)</a></li>
<li><a href="#">Ruby(0)</a></li>
<li><a href="#">C(0)</a></li>
<li><a href="#">Erlang(0)</a></li>
<li><a href="#">Verilog(0)</a></li>
</ul>

<ul id="3" class="moreUlLi" >
<li><a href="#">架构设计(0)</a></li>
<li><a href="#">面向对象(0)</a></li>
<li><a href="#">设计模式(0)</a></li>
<li><a href="#">Delphi(0)</a></li>
<li><a href="#">Python(0)</a></li>
<li><a href="#">Ruby(0)</a></li>
<li><a href="#">C(0)</a></li>
<li><a href="#">Erlang(0)</a></li>
<li><a href="#">Verilog(0)</a></li>
</ul>

<ul id="4" class="moreUlLi" >
<li><a href="#">Html/Css(5)</a></li>
<li><a href="#">JavaScript(3)</a></li>
<li><a href="#">jQuery(3)</a></li>
<li><a href="#">HTML5(0)</a></li>
</ul>

<ul id="5" class="moreUlLi" >
<li><a href="#">SAP(0)</a></li>
<li><a href="#">SharePoint(0)</a></li>
<li><a href="#">GIS技术(0)</a></li>
<li><a href="#">Oracle ERP(0)</a></li>
<li><a href="#">Dynamics CRM(0)</a></li>
<li><a href="#">K2 BPM(0)</a></li>
<li><a href="#">企业信息化其他(0)</a></li>
</ul>

<ul id="6" class="moreUlLi" >
<li><a href="#">Android开发(1)</a></li>
<li><a href="#">iOS开发(0)</a></li>
<li><a href="#">Windows Phone(0)</a></li>
<li><a href="#">Windows Mobile(0)</a></li>
<li><a href="#">其他手机开发(0)</a></li>
</ul>

<ul id="7" class="moreUlLi" >
<li><a href="#">敏捷开发(0)</a></li>
<li><a href="#">项目与团队管理(0)</a></li>
<li><a href="#">软件工程其他(0)</a></li>
</ul>

<ul id="8" class="moreUlLi" >
<li><a href="#">SQL Server(0)</a></li>
<li><a href="#">Oracle(3)</a></li>
<li><a href="#">MySQL(1)</a></li>
<li><a href="#">NoSQL(0)</a></li>
<li><a href="#">其他数据库(0)</a></li>
</ul>

<ul id="9" class="moreUlLi" >
<li><a href="#">Windows 7(1)</a></li>
<li><a href="#">Windows Server(0)</a></li>
<li><a href="#">Linux(0)</a></li>
</ul>

<ul id="10" class="moreUlLi" >
<li><a href="#">非技术区(2)</a></li>
<li><a href="#">软件测试(0)</a></li>
<li><a href="#">代码与软件发布(0)</a></li>
<li><a href="#">计算机图形学(0)</a></li>
<li><a href="#">Google开发(0)</a></li>
<li><a href="#">程序人生(2)</a></li>
<li><a href="#">求职面试(0)</a></li>
<li><a href="#">读书区(1)</a></li>
<li><a href="#">转载区(0)</a></li>
<li><a href="#">翻译区(0)</a></li>
<li><a href="#">开源研究(0)</a></li>
<li><a href="#">云计算(0)</a></li>
<li><a href="#">Flex(0)</a></li>
<li><a href="#">算法与数据结构(0)</a></li>
<li><a href="#">其他技术区(0)</a></li>
</ul>

</div>
<div class="moreUlMain_Bottom" ></div>
</div>
</body>
</html>