博客园左侧导航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>

查看全文

相关阅读:
LeetCode 326. Power of Three
LeetCode 324. Wiggle Sort II
LeetCode 322. Coin Change
LeetCode 321. Create Maximum Number
LeetCode 319. Bulb Switcher
LeetCode 318. Maximum Product of Word Lengths
LeetCode 310. Minimum Height Trees (DFS)
个人站点大开发！--起始篇
 LeetCode 313. Super Ugly Number
LeetCode 309. Best Time to Buy and Sell Stock with Cooldown (DP)

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