博客园左侧导航JQuery+Css

zoukankan html css js c++ java

博客园左侧导航JQuery+Css

<!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
{
180px;height: 30px;margin: 0px;
}
#titleDiv_Bj
{
background: url('images/site_cate_title_bg.png') no-repeat; 180px;height: 30px;margin: 0px;
}
#titleDiv_Content
{
font-size: 14;text-align: right;font-weight: bold;
98px;height: 30px;padding-top: 10px;margin: 0px;
}
.cate_item
{
border-left: 4px solid #146EB4;
list-style: none; 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; 6px;height: 9px; padding-top: 12px;padding-right: 12px;
}
.imgPostion1
{
16px;height: 9px;padding-top: 12px;padding-left:10px;float:left;
}
/*弹出来的一个盒子*/
.moreUlMain
{
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;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; 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>

查看全文

相关阅读:
网站安全编程黑客入侵脚本黑客高级语法入侵 C/C++ C# PHP JSP 编程
 【算法导论】贪心算法，递归算法，动态规划算法总结
 cocoa2dx tiled map添加tile翻转功能
 8月30日上海ORACLE大会演讲PPT下载
 【算法导论】双调欧几里得旅行商问题
 Codeforces Round #501 (Div. 3) B. Obtaining the String (思维,字符串)
Codeforces Round #498 (Div. 3) D. Two Strings Swaps (思维)
Educational Codeforces Round 89 (Rated for Div. 2) B. Shuffle (数学,区间)
洛谷 P1379 八数码难题 (BFS)
Educational Codeforces Round 89 (Rated for Div. 2) A. Shovels and Swords (贪心)

原文地址：https://www.cnblogs.com/qiqiBoKe/p/3036648.html