案例19-站长之家导航

最新推荐文章于 2022-07-02 23:15:13 发布
最新推荐文章于 2022-07-02 23:15:13 发布
阅读量144 收藏
点赞数
分类专栏： 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/101975972
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>延迟菜单</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        li {

            list-style: none;

        }

        #nav {

            width: 500px;

            height: 36px;

            padding: 0 10px;

            background: url(../images/nav_bg.gif) repeat-x;

            margin: 50px auto 0;

            position: relative;

        }

        #nav .adorn1 {

            width: 6px;

            height: 36px;

            background: url(../images/nav_bg.gif) no-repeat 0 -36px;

            position: absolute;

            top: 0;

            left: 0;

        }

        #nav .adorn2 {

            width: 6px;

            height: 36px;

            background: url(../images/nav_bg.gif) no-repeat 0 -72px;

            position: absolute;

            top: 0;

            right: 0;

        }

        #nav li {

            float: left;

            height: 36px;

            padding: 0 3px 0 7px;

            position: relative;

            cursor: pointer;

        }

        #nav .line {

            background: url(../images/active_bg.gif) no-repeat 0 -90px;

        }

        #nav .active {

            float: left;

            height: 36px;

            line-height: 36px;

            font-size: 14px;

            text-decoration: none;

            color: #fff;

            background: url(../images/active_bg.gif) no-repeat right -40px;

        }

        #nav .active span {

            float: left;

            height: 36px;

            line-height: 36px;

            font-size: 14px;

            padding: 0 20px;

            text-decoration: none;

            color: #fff;

            background: url(../images/active_bg.gif) no-repeat 0 5px;

        }

        #nav .normal {

            float: left;

            height: 36px;

            line-height: 36px;

            font-size: 14px;

            text-decoration: none;

            color: #fff;

        }

        #nav .normal span {

            float: left;

            height: 36px;

            padding: 0 20px;

        }

        #nav .normal:hover {

            background: url(../images/active_bg.gif) no-repeat right -40px;

        }

        #nav .normal:hover span {

            background: url(../images/active_bg.gif) no-repeat 0 5px;

        }

        #nav .float_layer {

            height: 27px;

            color: #235e99;

            padding: 0 10px;

            background: url(../images/nav_bg.gif) repeat-x 0 -162px;

            position: absolute;

            top: 46px;

            display: none;

        }

        #nav .arrows {

            width: 7px;

            height: 5px;

            overflow: hidden;

            background: url(../images/active_bg.gif) no-repeat 0 -190px;

            position: absolute;

            top: -4px;

        }

        #nav .decorate1 {

            width: 6px;

            height: 27px;

            background: url(../images/nav_bg.gif) no-repeat 0 -108px;

            position: absolute;

            top: 0;

            left: -6px;

        }

        #nav .decorate2 {

            width: 6px;

            height: 27px;

            background: url(../images/nav_bg.gif) no-repeat 0 -135px;

            position: absolute;

            top: 0;

            right: -6px;

        }

        #nav .float_layer a {

            float: left;

            height: 27px;

            line-height: 22px;

            font-size: 12px;

            color: #235e99;

            text-decoration: none;

            background: url(../images/active_bg.gif) no-repeat right -207px;

            padding: 0 8px;

        }

        #nav .float_layer a span {

            float: left;

            height: 18px;

            padding-top: 3px;

            overflow: hidden;

            border-bottom: 2px solid #cedce8;

        }

        #nav .float_layer a:hover span {

            border-bottom: 2px solid #235e99;

        }

        #nav p {

            position: absolute;

            top: 10px;

            right: 20px;

        }

        #nav p a {

            color: #fff;

            font-size: 14px;

            text-decoration: none;

        }

        #nav p a:hover {

            text-decoration: underline;

        }

        .pos1 {

            left: 0;

        }

        .pos1 .arrows {

            left: 36px;

        }

        .w1 {

            width: 245px;

        }

        .pos2 {

            left: 0;

        }

        .pos2 .arrows {

            left: 50px;

        }

        .w2 {

            width: 260px;

        }

        .pos3 {

            left: -100px;

        }

        .pos3 .arrows {

            left: 136px;

        }

        .w3 {

            width: 230px;

        }

        .pos4 {

            left: -100px;

        }

        .pos4 .arrows {

            left: 136px;

        }

        .w4 {

            width: 322px;

        }

    </style>

</head>

<body>

    <div id="nav">

        <div class="adorn1"></div>

        <div class="adorn2"></div>

        <ul>

            <li>

                <a class="normal active" href="http://www.miaov.com"><span>首页</span></a>

                <span class="float_layer w1 pos1">

                    <span class="arrows"></span>

                    <span class="decorate1"></span>

                    <span class="decorate2"></span>

                    <a href="http://www.miaov.com"><span>最近更新</span></a>

                    <a href="http://www.miaov.com"><span>活动</span></a>

                    <a href="http://www.miaov.com"><span>报名试听</span></a>

                    <a href="http://www.miaov.com"><span>学员反馈</span></a>

                </span>

            </li>

            <li class="line">

                <a class="normal" href="http://www.miaov.com"><span>关于我们</span></a>

                <span class="float_layer w2 pos2">

                    <span class="arrows"></span>

                    <span class="decorate1"></span>

                    <span class="decorate2"></span>

                    <a href="http://www.miaov.com"><span>妙味讲师</span></a>

                    <a href="http://www.miaov.com"><span>培训方式</span></a>

                    <a href="http://www.miaov.com"><span>培训理念</span></a>

                    <a href="http://www.miaov.com"><span>联系我们</span></a>

                </span>

            </li>

            <li class="line">

                <a class="normal" href="http://www.miaov.com"><span>作品</span></a>

                <span class="float_layer w3 pos3">

                    <span class="arrows"></span>

                    <span class="decorate1"></span>

                    <span class="decorate2"></span>

                    <a href="http://www.miaov.com"><span>般固</span></a>

                    <a href="http://www.miaov.com"><span>MATRIX</span></a>

                    <a href="http://www.miaov.com"><span>留学e网</span></a>

                    <a href="http://www.miaov.com"><span>ECMall</span></a>

                </span>

            </li>

            <li class="line">

                <a class="normal" href="http://www.miaov.com"><span>博客</span></a>

                <span class="float_layer w4 pos4">

                    <span class="arrows"></span>

                    <span class="decorate1"></span>

                    <span class="decorate2"></span>

                    <a href="http://www.miaov.com"><span>JS教程</span></a>

                    <a href="http://www.miaov.com"><span>弹出层效果</span></a>

                    <a href="http://www.miaov.com"><span>3D球面标签云</span></a>

                    <a href="http://www.miaov.com"><span>Window计算器</span></a>

                </span>

            </li>

        </ul>

        <p><a href="http://www.miaov.com">>>更多</a></p>

    </div>

<script>

function $(cssSelector,parent){

    parent = parent||document; // 给 parent 设置了一个默认值是document

    var els = parent.querySelectorAll(cssSelector);

    return els.length > 1?els:els[0];

};

(function(){

    var navs = $("#nav li>a");

    var subNavs = $("#nav li>span");

    var timer = 0;

    for(var i = 0; i < navs.length; i++){

        (function(index){

            navs[index].onmouseover = function(){

                clearTimeout(timer);

                for(var i = 0; i < navs.length; i++){

                    navs[i].classList.remove("active");

                    subNavs[i].style.display = "none";

                }

                navs[index].classList.add("active");

                subNavs[index].style.display = "block";

            };

            subNavs[index].onmouseout = navs[index].onmouseout = function(){

               timer = setTimeout(function(){

                    subNavs[index].style.display = "none";

                },200);

            };

            subNavs[index].onmouseover = function(){

                clearTimeout(timer);

            }

        })(i);

    }

})();

</script>    

</body>

</html>

kino2046
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
39个seo大师级经典案例
weixin_34025151的博客
06-29 1万+
39个seo大师级经典案例SEO案例一：丘仕达“奇虎361网”的SEO分析案例全文如下：39个seo大师级经典案例丘仕达：seo资料站的站长，长期从事关键字及排名实战研究，是国内实战派SEOer。旗下主站“seo资料站”长期占据百度“seo”排名第一的位置，在单页面优化、特别是关键字分词实战应用方面有独到见解。本文介绍他测试的一个单页面优化案例，希望站长们可以从中得到一些体会...
案例25：随机打乱图片
kino2046的博客
03-26 996
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <linkrel="styl...
放大镜效果
12-20 270
放大镜效果 #div1{ width:310px; height:310px; padding:10px; border:1px solid red; position:relative;} .smallPic{ width:310px; height:310px; position:relative; background:#ccc;} .float_layer{ width:80px
渗透测试 ( 1 ) --- 相关术语、必备 工具、导航、全流程总结、入侵网站思路
freeking101的博客
07-02 2万+
在学习某项技能的时，要用最快的时间摸索清楚最少必要知识 （MAKE）都有哪些？ 然后迅速地掌握它们，这样就实现了 "快速入门"，然后就可以开始动手实践，然后在实践中验证理论、加深理解，同时继续扩展学习。而学习黑客也是同样的道理，对于新手小白的第一课应该是以掌握基础的安全工具为主，这样在学习的同时可以进行实践，验证所学的知识，同时加以扩展，这样学习效率会大大提升.........................................................
JQ滑动导航菜单的实现
weixin_33725239的博客
11-29 69
2019独角兽企业重金招聘Python工程师标准>>> ...
案例6-输入正确的QQ号码
kino2046的博客
09-06 820
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
案例5-九九乘法表-颠倒的
kino2046的博客
09-05 547
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...
案例：鼠标滚轮改变div高度
kino2046的博客
04-30 491
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-e...
案例3-选项卡-自定义属性-索引值-btn[ i ].index = i
kino2046的博客
09-01 488
<script> var btns = document.querySelectorAll(".btn"); var inners = document.querySelectorAll("div"); /* 点击第 0 个按钮，需要 让第0个div 也对应显示 点击第 1 个按钮，需要 让第1个div 也对应显示 点击第 2 个按钮，需要 让第...
案例10-修改input的值-重要！
kino2046的博客
09-09 469
工作中重复的功能模块先删除，简化，第一个模块实现了，后面的循环就可以 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initi...
案例：仿京东放大镜
kino2046的博客
04-30 415
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <meta...
案例26：查找替换文字
kino2046的博客
03-26 391
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel="stylesheet"href="./index.css"> &lt...
案例27：百度音乐全选-onchange监听单选框复选框
kino2046的博客
04-30 319
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <me...
案例：鼠标拖拽
kino2046的博客
04-30 313
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahtt...
案例20-选项卡套选项卡
kino2046的博客
10-03 306
整合之前 /** *1.大的外层的选项卡 *2.大的选项卡内部有一个小的选项卡 *3.功能 *1.自动切换 *2.鼠标经过切换 */ /** *第一步：用两个变量控制选项卡的显示 * *第二步：给元素绑定鼠标经过的事件 *-外层的选项卡 *-内层选项卡 *第三步：自动...
案例7-数据筛选
kino2046的博客
09-06 303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
案例24：伪3D图片切换
kino2046的博客
03-26 261
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahtt...
案例21-日期推算
kino2046的博客
10-03 242
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-e...
改进CB-HAQL算法提升无人机导航性能与效率
本文主要探讨了在无人机自主导航领域中，如何通过改进基于案例推理启发式Q学习（CB-HAQL）算法来提高导航性能。CB-HAQL算法依赖于案例库，案例库的质量对其策略收敛至关重要。原始的CB-HAQL算法在案例库更新上存在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值