jQuery仿博客园首页左导航效果

最新推荐文章于 2023-12-04 01:00:00 发布
最新推荐文章于 2023-12-04 01:00:00 发布
阅读量822 收藏
点赞数
分类专栏： JS
<!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">
        html
        {
            color: #666;
            background: #FFF;
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, i, fieldset, legend, input, textarea, p, blockquote, th, td
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font: 12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;
        }
        h1, h2, h3, h4, h5, h6
        {
            font-size: 100%;
            font-weight: normal;
        }
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
        }
        img
        {
            border: none;
        }
        a
        {
            text-decoration: none;
            color: #666;
        }
        a:hover
        {
            text-decoration: underline;
            color: #FF6600;
        }
        ul, li
        {
            list-style-type: none;
        }
        q:before, q:after
        {
            content: '';
        }
        sup
        {
            vertical-align: text-top;
        }
        sub
        {
            vertical-align: text-bottom;
        }
        /* All reset */
        body
        {
            margin: 100px;
        }
        ul li
        {
            line-height: 30px;
            border: 1px solid #E5D1A1;
            text-align: center;
            margin-top: -1px;
            width: 188px;
            background: #FFFDD2;
            position: relative;
            z-index: 1;
        }
        .tips
        {
            line-height: 20px;
            position: absolute;
            width: 150px;
            height: 200px;
            border: 1px solid #E5D1A1;
            text-align: center;
            margin-top: -1px;
            background: #FFFDD2;
            z-index: 1;
            display: none;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li").each(function (index) {
                $(this).mouseover(function () {
                    var obj = $(this).offset();
                    var xobj = obj.left + 190 + "px";
                    var yobj = obj.top - 50 + "px";
                    $(this).css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" });
                    $("ul > div:eq(" + index + ")").css({ "left": xobj, "top": yobj }).show();
                }).mouseout(function () {
                    $("ul > .tips").hide();
                    $(this).css({ "width": "188px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" })
                })




            })
            $("div").each(function () {
                $(this).mouseover(function () {
                    $(this).prev("li").css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" })
                    $(this).show();
                }).mouseout(function () {
                    $(this).hide();
                    $(this).prev("li").css({ "width": "188px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" });
                })


            })
        })
    </script>
</head>
<body>
    <ul>
        <li><a href="#">.NET技术</a></li>
        <div class="tips">
            <p>
                <a href="#">.NET新?手?</a></p>
            <p>
                <a href="#">ASP.NET</a></p>
            <p>
                <a href="#">C#</a></p>
            <p>
                <a href="#">WinForm</a></p>
            <p>
                <a href="#">SliverLight</a></p>
            <p>
                <a href="#">WCF</a></p>
            <p>
                <a href="#">CLR</a></p>
            <p>
                <a href="#">WPF</a></p>
            <p>
                <a href="#">WF</a></p>
            <p>
                <a href="#">XNA</a></p>
        </div>
        <li>编括程语言</li>
        <div class="tips">
            <p>
                <a href="#">.NET新手</a></p>
            <p>
                <a href="#">ASP.NET</a></p>
            <p>
                <a href="#">C#</a></p>
            <p>
                <a href="#">WinForm</a></p>
            <p>
                <a href="#">SliverLight</a></p>
            <p>
                <a href="#">WCF</a></p>
            <p>
                <a href="#">CLR</a></p>
            <p>
                <a href="#">WPF</a></p>
            <p>
                <a href="#">WF</a></p>
            <p>
                <a href="#">XNA</a></p>
        </div>
        <li>软件设计</li>
        <div class="tips">
           <p>
                <a href="#">.NET新手</a></p>
            <p>
                <a href="#">ASP.NET</a></p>
            <p>
                <a href="#">C#</a></p>
            <p>
                <a href="#">WinForm</a></p>
            <p>
                <a href="#">SliverLight</a></p>
            <p>
                <a href="#">WCF</a></p>
            <p>
                <a href="#">CLR</a></p>
            <p>
                <a href="#">WPF</a></p>
            <p>
                <a href="#">WF</a></p>
            <p>
                <a href="#">XNA</a></p>
        </div>
        <li>Web前端</li>
        <div class="tips">
            <p>
                <a href="#">.NET新手</a></p>
            <p>
                <a href="#">ASP.NET</a></p>
            <p>
                <a href="#">C#</a></p>
            <p>
                <a href="#">WinForm</a></p>
            <p>
                <a href="#">SliverLight</a></p>
            <p>
                <a href="#">WCF</a></p>
            <p>
                <a href="#">CLR</a></p>
            <p>
                <a href="#">WPF</a></p>
            <p>
                <a href="#">WF</a></p>
            <p>
                <a href="#">XNA</a></p>
        </div>
        <li>企业信息化</li>
        <div class="tips">
            <p>
                <a href="#">.NET新手</a></p>
            <p>
                <a href="#">ASP.NET</a></p>
            <p>
                <a href="#">C#</a></p>
            <p>
                <a href="#">WinForm</a></p>
            <p>
                <a href="#">SliverLight</a></p>
            <p>
                <a href="#">WCF</a></p>
            <p>
                <a href="#">CLR</a></p>
            <p>
                <a href="#">WPF</a></p>
            <p>
                <a href="#">WF</a></p>
            <p>
                <a href="#">XNA</a></p>
        </div>
        </body></html>
Dlinlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF漂亮的导航菜单
11-05
WPF开发的漂亮酷炫的导航菜单实例程序，导航菜单实例注释讲解十分详细。
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
最新发布
qq__3200628753的博客
01-05 952
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
北大青鸟 JQuery制作特效 第二章 （上机练习
热门推荐
SpicyStriplt的博客
07-06 1万+
北大青鸟 JQuery制作特效 第二章 （上机练习 练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>制作简易的当当购物车页面</title> <link type="tex...
WPF中实现动态导航
helldoger的博客
06-11 1514
主页面 <mah:MetroWindow x:Class="Kx.View.MyMainView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" x
JS仿博客园首页左导航效果
04-23
本教程将详细讲解如何使用JS来仿制博客园首页的左导航效果，这是一个包含二级菜单的动态导航栏，能够提供良好的用户体验和视觉效果。 首先，我们需要理解导航栏的基本结构。一个常见的导航栏通常由一系列链接组成，...
基于JQuery的抓取博客园首页RSS的代码
12-10
这篇教程主要介绍如何使用jQuery来抓取博客园首页的RSS feed并将其数据显示在网页上。首先，我们需要了解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。 1. **HTML结构**： 在示例...
仿博客园首页,注册页,登录页.zip
04-29
在本项目中，我们主要关注的是“仿博客园首页,注册页,登录页.zip”这个压缩包文件。这个文件包含了一系列静态页面，旨在模仿著名的开发者社区——博客园（CSDN Blog）的首页、注册页面和登录页面。尽管这些页面没有...
Android应用源码(精)仿博客园客户端源码.zip
07-12
这篇详细的分析将深入探讨"Android应用源码(精)仿博客园客户端源码.zip"这一资源，它是一个供学习和参考的Android应用源代码。这个源码是开发者模仿博客园客户端构建的一个项目，旨在帮助初学者和有经验的开发者更好...
仿博客园wordpress主题
12-01
【标题】：“仿博客园wordpress主题” 【主题详解】： “仿博客园wordpress主题”是一款专为WordPress平台设计的中文三栏式博客模板，旨在模仿国内知名技术社区——博客园的界面风格，提供用户熟悉的浏览体验。这款...
WPF左侧漂亮的导航菜单.rar
03-26
WPF左侧导航菜单，项目可直接运行，进行有力参考
jquery特效制作左侧侧边浮动导航菜单滑动显示或隐藏
09-17
17素材的资源，下载还要积分，专门扒下来的，jquery 后台左侧点击折叠关闭功能，不是折叠菜单哦
几十种导航菜单样式美化代码.rar
07-10
几十种CSS导航菜单样式美化代码，一共有近30种吧，不看绝对后悔！各种各样风格的网站导航菜单样式，美工不好的WEB程序员，可不要错过！~有黑色、蓝色、带渐变的、纯色的、圆角菜单等等，每一款都十分漂亮美观，小巧漂亮的网页菜单。
仿博客园客户端源码
09-23
仿博客园客户端源码 项目比较完整可以学习的东西还是很多的，有主流的框架，有主流的工具类。总之还是不错的 下载后会看到对应的API简介，方便使用，不论是学过Android的想要多了解点知识，还是打算借此机会多了解HTTP协议的Android应用。都是一个不错的选择。
Jquery实现超酷的左边商品分类导航菜单特效.zip
07-04
Jquery实现超酷的左边商品分类导航菜单特效
使用jq实现左侧导航条
weixin_48240707的博客
03-07 686
使用jq实现左侧导航条
WPF实战项目四：左侧菜单导航
yigu4011的博客
07-12 3006
9、在点击首页、待办事项、备忘录、设置按钮时，菜单栏不会自动收缩进去，需要添加一下代码，设置ListBox的名字：x:Name="drawerHost"8、在ListBox下面添加导航，通过添加行为Microsoft.Xaml.Behaviors.Wpf来实现。6、在MainViewModel.cs中初始化导航 ，声明前进后退功能方法。5、在右侧空白注册一个区域，区域注册用上面单独的类来控制。
JS特效第11弹：jQuery左侧下拉导航菜单后台框架模板
weixin_38343072的博客
12-04 129
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
jquery第三章练习一（左导航特效）
weixin_47065927的博客
08-19 3098
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>导航特效</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; }
jquery4 验证博客园用户注册页面
05-25
首先，你需要引入 jQuery 库。可以通过以下链接引入： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> ``` 然后，在页面加载完成后，你可以使用 jQuery 来为表单添加验证...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值