jQuery实现博客园首页导航

最新推荐文章于 2022-12-09 10:49:45 发布
最新推荐文章于 2022-12-09 10:49:45 发布
阅读量914 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjingjing1014/article/details/8840529
版权
<!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>
    <link href="cs/aggsite[1].css" rel="stylesheet" type="text/css" />
    <link href="cs/reset[1].css" rel="stylesheet" type="text/css" />
    <script src="js/jquery[1].js" type="text/javascript"></script>
    <script src="js/site.src[1].js" type="text/javascript"></script>
</head>
<body>
 <div id="side_nav">
        <div id="cate_title_block">
            <div id="cate_title_title">
                <div class="cate_title">
                    网站分类</div>
            </div>
            <ul id="cate_item">
                <li id="cate_item_108698" οnmοuseοver="cateShow(108698)" οnmοuseοut="cateHidden(108698)">
                    <a href="/cate/108698/">.NET技术(0)</a> </li>
                <li id="cate_item_2" οnmοuseοver="cateShow(2)" οnmοuseοut="cateHidden(2)"><a href="/cate/2/">
                    编程语言(0)</a> </li>
                <li id="cate_item_108701" οnmοuseοver="cateShow(108701)" οnmοuseοut="cateHidden(108701)">
                    <a href="/cate/108701/">软件设计(1)</a> </li>
                <li id="cate_item_108703" οnmοuseοver="cateShow(108703)" οnmοuseοut="cateHidden(108703)">
                    <a href="/cate/108703/">Web前端(0)</a> </li>
                <li id="cate_item_108704" οnmοuseοver="cateShow(108704)" οnmοuseοut="cateHidden(108704)">
                    <a href="/cate/108704/">企业信息化(0)</a> </li>
                <li id="cate_item_108705" οnmοuseοver="cateShow(108705)" οnmοuseοut="cateHidden(108705)">
                    <a href="/cate/108705/">手机开发(0)</a> </li>
                <li id="cate_item_108709" οnmοuseοver="cateShow(108709)" οnmοuseοut="cateHidden(108709)">
                    <a href="/cate/108709/">软件工程(0)</a> </li>
                <li id="cate_item_108712" οnmοuseοver="cateShow(108712)" οnmοuseοut="cateHidden(108712)">
                    <a href="/cate/108712/">数据库技术(0)</a> </li>
                <li id="cate_item_108724" οnmοuseοver="cateShow(108724)" οnmοuseοut="cateHidden(108724)">
                    <a href="/cate/108724/">操作系统(0)</a> </li>
                <li id="cate_item_4" οnmοuseοver="cateShow(4)" οnmοuseοut="cateHidden(4)"><a href="/cate/4/">
                    其他分类(0)</a> </li>
                <li id="cate_item_0" οnmοuseοver="cateShow(0)" οnmοuseοut="cateHidden(0)"><a href="/cate/all/">
                    所有随笔(74)</a> </li>
                <li id="cate_item_-1" οnmοuseοver="cateShow(-1)" οnmοuseοut="cateHidden(-1)"><a href="/comment/">
                    所有评论(23)</a> </li>
            </ul>
            <div class="cate_bottom">
            </div>
            <div id="cate_sub_block">
                <div id="cate_content_block_108698" οnmοuseοver="cateShow(108698)" οnmοuseοut="cateHidden(108698)"
                    class="cate_content_block_wrapper" style="top: 30px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/beginner/">.NET新手区(0)</a></li><li><a href="/cate/aspnet/">ASP.NET(0)</a></li><li>
                                <a href="/cate/csharp/">C#(0)</a></li><li><a href="/cate/winform/">WinForm(0)</a></li><li>
                                    <a href="/cate/silverlight/">Silverlight(0)</a></li><li><a href="/cate/wcf/">WCF(0)</a></li><li>
                                        <a href="/cate/clr/">CLR(0)</a></li><li><a href="/cate/wpf/">WPF(0)</a></li><li><a
                                            href="/cate/wf/">WF(0)</a></li><li><a href="/cate/xna/">XNA(0)</a></li><li><a href="/cate/vs2010/">
                                                VS2010(0)</a></li><li><a href="/cate/mvc/">ASP.NET MVC(0)</a></li><li><a href="/cate/control/">
                                                    控件开发(0)</a></li><li><a href="/cate/ef/">Entity Framework(0)</a></li><li><a href="/cate/winrt_metro/">
                                                        WinRT/Metro(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_2" οnmοuseοver="cateShow(2)" οnmοuseοut="cateHidden(2)"
                    class="cate_content_block_wrapper" style="top: 58px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/java/">Java(0)</a></li><li><a href="/cate/cpp/">C++(0)</a></li><li>
                                <a href="/cate/php/">PHP(0)</a></li><li><a href="/cate/delphi/">Delphi(0)</a></li><li>
                                    <a href="/cate/python/">Python(0)</a></li><li><a href="/cate/ruby/">Ruby(0)</a></li><li>
                                        <a href="/cate/c/">C(0)</a></li><li><a href="/cate/erlang/">Erlang(0)</a></li><li><a
                                            href="/cate/verilog/">Verilog(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108701" οnmοuseοver="cateShow(108701)" οnmοuseοut="cateHidden(108701)"
                    class="cate_content_block_wrapper" style="top: 86px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/design/">架构设计(1)</a></li><li><a href="/cate/108702/">面向对象(0)</a></li><li>
                                <a href="/cate/dp/">设计模式(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108703" οnmοuseοver="cateShow(108703)" οnmοuseοut="cateHidden(108703)"
                    class="cate_content_block_wrapper" style="top: 114px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/web/">Html/Css(0)</a></li><li><a href="/cate/javascript/">JavaScript(0)</a></li><li>
                                <a href="/cate/jquery/">jQuery(0)</a></li><li><a href="/cate/html5/">HTML5(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108704" οnmοuseοver="cateShow(108704)" οnmοuseοut="cateHidden(108704)"
                    class="cate_content_block_wrapper" style="top: 142px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/sap/">SAP(0)</a></li><li><a href="/cate/sharepoint/">SharePoint(0)</a></li><li>
                                <a href="/cate/gis/">GIS技术(0)</a></li><li><a href="/cate/OracleERP/">Oracle ERP(0)</a></li><li>
                                    <a href="/cate/dynamics/">Dynamics CRM(0)</a></li><li><a href="/cate/k2/">K2 BPM(0)</a></li><li>
                                        <a href="/cate/3/">企业信息化其他(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108705" οnmοuseοver="cateShow(108705)" οnmοuseοut="cateHidden(108705)"
                    class="cate_content_block_wrapper" style="top: 170px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/android/">Android开发(0)</a></li><li><a href="/cate/ios/">iOS开发(0)</a></li><li>
                                <a href="/cate/wp/">Windows Phone(0)</a></li><li><a href="/cate/wm/">Windows Mobile(0)</a></li><li>
                                    <a href="/cate/mobile/">其他手机开发(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108709" οnmοuseοver="cateShow(108709)" οnmοuseοut="cateHidden(108709)"
                    class="cate_content_block_wrapper" style="top: 198px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/agile/">敏捷开发(0)</a></li><li><a href="/cate/pm/">项目与团队管理(0)</a></li><li>
                                <a href="/cate/Engineering/">软件工程其他(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108712" οnmοuseοver="cateShow(108712)" οnmοuseοut="cateHidden(108712)"
                    class="cate_content_block_wrapper" style="top: 226px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/sqlserver/">SQL Server(0)</a></li><li><a href="/cate/oracle/">Oracle(0)</a></li><li>
                                <a href="/cate/mysql/">MySQL(0)</a></li><li><a href="/cate/nosql/">NoSQL(0)</a></li><li>
                                    <a href="/cate/database/">其他数据库(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_108724" οnmοuseοver="cateShow(108724)" οnmοuseοut="cateHidden(108724)"
                    class="cate_content_block_wrapper" style="top: 254px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/win7/">Windows 7(0)</a></li><li><a href="/cate/winserver/">Windows
                                Server(0)</a></li><li><a href="/cate/linux/">Linux(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
                <div id="cate_content_block_4" οnmοuseοver="cateShow(4)" οnmοuseοut="cateHidden(4)"
                    class="cate_content_block_wrapper" style="top: 282px">
                    <div class="cate_content_top">
                    </div>
                    <div class="cate_content_block">
                        <ul>
                            <li><a href="/cate/life/">非技术区(0)</a></li><li><a href="/cate/testing/">软件测试(0)</a></li><li>
                                <a href="/cate/software/">代码与软件发布(0)</a></li><li><a href="/cate/cg/">计算机图形学(0)</a></li><li>
                                    <a href="/cate/google/">Google开发(0)</a></li><li><a href="/cate/codelife/">程序人生(0)</a></li><li>
                                        <a href="/cate/job/">求职面试(0)</a></li><li><a href="/cate/book/">读书区(0)</a></li><li><a
                                            href="/cate/quoted/">转载区(0)</a></li><li><a href="/cate/wince/">Windows CE(0)</a></li><li>
                                                <a href="/cate/translate/">翻译区(0)</a></li><li><a href="/cate/opensource/">开源研究(0)</a></li><li>
                                                    <a href="/cate/flex/">Flex(0)</a></li><li><a href="/cate/cloud/">云计算(0)</a></li><li>
                                                        <a href="/cate/algorithm/">算法与数据结构(0)</a></li><li><a href="/cate/misc/">其他技术区(0)</a></li></ul>
                    </div>
                    <div class="cate_content_bottom">
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var cateIdList = '108698,2,108701,108703,108704,108705,108709,108712,108724,4';
            </script>
        </div>
        </div>
</body>

</html>

实现效果如下：

wangjingjing1014
关注
专栏目录
推荐--jQuery使用手册 - 仰天一笑 - 博客园
04-01
推荐--jQuery使用手册 - 仰天一笑 - 博客园
博客园导航
04-23
在本案例中，我们探讨的是如何使用jQuery和CSS这两种技术来创建一个高效、实用的博客园导航菜单。 首先，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画效果以及Ajax交互。在构建...
jquery学习入门到高级（转载博客园）
wuxiupeng的专栏
06-28 6238
原文地址：http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html  从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
使用jquery为个人博客园首页公告栏添加用户登录与注销
weixin_33850890的博客
09-16 248
　　未登录前，注销的字体颜色为黑色，登录后，登录的字体为蓝色。 1、在公告栏添加布局显示代码 &lt;!--显示登录 Begin--&gt; &lt;!-- 隐藏调用html代码--&gt; &lt;div class="hide"&gt; &lt;!--------------------------用户登陆前后显示-------------------------------...
博客园jquery专题
JAVA之迷
07-29 581
博客园jquery专题，待续.....
jquery酷炫js特效个人主页
ICode联盟
12-16 234
下载地址 dd:
使用jQuery实现返回顶部
10-24
在这个部分中，我们将讨论如何使用jQuery实现返回顶部功能。首先，我们要知道这是一个为博客园添加的实用功能，虽然博客园是一个程序员非常喜欢的平台，但它缺乏返回顶部的功能。在补充这一不足时，作者选择使用了...
Django、Bootstrap与JQuery打造仿博客园网站教程
资源摘要信息: "本资源是一套完整的教程或项目文件，旨在指导用户如何使用Django框架、Bootstrap和JQuery开发一个类似于博客园的博客网站。博客园是中国非常知名的博客平台，以其简洁的界面和强大的功能受到广泛欢迎...
利用Django、Bootstrap和JQuery打造仿博客园博客网站
资源摘要信息: "本资源包含了使用Django框架，Bootstrap前端框架和JQuery库来开发一个类似博客园的博客网站的教程和源代码。接下来我将详细解释这些技术的相关知识点以及它们在博客网站开发中的应用。 1. Django...
仿博客园首页,注册页,登录页.zip
04-29
首先，我们来讨论一下博客园首页的实现。一个标准的博客园首页通常包括以下几个部分： 1. **头部导航**：包含网站Logo、搜索框、用户登录/注册按钮以及网站的主要导航菜单，如“博客”、“问答”、“学院”等。 2....
个人主页,结合JS,CSS,HTML,JQuery
04-08
这是一个html结合js，css,JQuery的个人主页，有个人日志，留言板，主页，相册，学习资料
锋利的JQuery实例-用JQuery打造个性网站-首页
luckyjaky的专栏
03-18 720
&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
jquery实现的个性网站首页 详细信息
weixin_30642561的博客
11-27 101
http://download.csdn.net/detail/a757956132/9305419 实现效果： 　　1：导航效果（兼容IE） 2：网站换肤 　　3：模块展开和关闭 　　4：新闻滚动 　　5：超链接文字提示 　　6:产品树展开和关闭 　　7:首页广告效果 　　8:滑过图片出现放大镜效果 　　9:新款上市模块横向滚动 转载于:https://www...
web课程设计使用html+css+javascript+jquery技术制作个人介绍6页
最新发布
网页设计与制作 | HTML+CSS+JS
12-09 300
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
jQuery个人简介页面效果
www_5438xiazai的博客
06-13 426
简介： jQuery个人简介特效页面代码，有动画效果，适应手机，pc，pad使用 网盘下载地址： http://kekewangLuo.cc/ougZQqzFptq0 图片：
JQuery简介
zuo_zuo_blog的博客
11-21 172
1.jquery是一个快速的、小巧的、特点众多的JavaScrit库。 2.它用自己非常方便的跨浏览器API，使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变的简单。 3.JQuery版本问题： jquery的最新版本是3.1.0，不兼容IE6、7、8 jQuery1.12.3兼容IE6、7、8 jquery3和jQuery1.12.3的API完全一样。 4.引包 jquery是JS...
使用jquery编写简单的导航栏
caoqifu的博客
06-22 491
每天多学一些知识，就少写一行代码，贵在坚持，技术需要总结，大家看的时候注意符号'.'； &lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;script type="text/jav
开源2D图形库AGG研究(一)
热门推荐
阿翔
05-31 1万+
      AGG(Anti-Grain Geometry)，强大的2D几何图形库。因为GDI+的一些缺陷(不能跨平台，某些应用场合精度差)，我一直在寻求可以替换gdi+绘图组件的方案，最终我选择了AGG。网上关于2D图形库的组件非常多，类似的还有GOOGLE PICASSO,CAIRO(firefox底层采用的渲染器)，QT，OpenGL等等。从易用性的角度来说AGG比较困难，因为官方只给出了C++源代码,没有组件库和封装好的包，其他语言要想直接用是不可能了。从网上关于使用效果的评论来说，AGG是最高效，
探讨网站左侧导航的优化实现
本文主要探讨了网站左侧导航的实现方式，作者通过分析博客园的导航代码，引发对优化CSS布局的思考。文章强调在实际工作中寻找最优解并非总是可行，而应注重效率。文中以HTML结构为例，展示了博客园导航的简单实现，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值