文档章节

jQuery下划线跟随导航菜单

羊皮卷
 羊皮卷
发布于 2016/12/04 09:33
字数 361
阅读 29
收藏 0

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下划线跟随导航菜单</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
        *{margin:0;padding:0;}
#navBg{background-color: #888;padding:20px;}
/* container */
#container{width:945px;height:50px;position:relative;overflow:hidden;margin:auto;font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;}
#container li{display:block;float:left;width:133px;height:50px;background:url(../images/transparent.png);line-height:50px;padding-right:2px;line-height:50px;list-style:none;}
#container li a{color:#fff;text-decoration:none;display:block;position:relative;background:#999;width:123px;height:50px;padding-right:10px;font-size:18px;font-weight:bold;text-align:right;}
#container li a:hover,#container li a.active{background:#777;}
#container li a span{display:block;position:absolute;left:10px;top:0;font-weight:normal;font-size:10px;-webkit-text-size-adjust:none;opacity:0.6;filter:alpha(opacity=60);}
#block{position:absolute;width:133px;height:2px;background:#e9d008;bottom:0px;left:0px;}

</style>
</head>
<body>

<div id="navBg">
     <div id="container">
    <ul id="nav">
      <li><a class="active" href="#">111<span>1111</span></a></li>
          <li><a href="#">22<span>22</span></a></li>
          <li><a href="#">33<span>33</span></a></li>
          <li><a href="#">55<span>55</span></a></li>
          <li><a href="#">77<span>77</span></a></li>
          <li><a href="#">88<span>88</span></a></li>
          <li><a href="#">99<span>99</span></a></li>
    </ul>
    <div id="block"></div>
    </div>
</div>

<!--如果用了参数
<script type="text/javascript">
$.nicenav(300);
</script>-->


<script>
//如果没用参数:
$(function(){
    $('#nav>li').hover(function () {
        $('#block').stop().animate({
            'left': $(this).offsetParent().context.offsetLeft
        },500);
    }, function () {
        $('#block').stop().animate({
            'left': '0'
        },500);
    })
});
</script>


<!--
如果用了参数要在底部引用外部js文件函数
<js type="text/javascript">
$.bocknav(500);
</js>

 (function ($) {
    $.extend({
        'bocknav': function (blo) {
            blo = typeof blo === 'number' ? blo : 400;
            var $lis = $('#nav>li'), $h = $('#buoy')
            $lis.hover(function () {
                $h.stop().animate({
                    'left': $(this).offsetParent().context.offsetLeft
                }, blo);
            }, function () {
                $h.stop().animate({
                    'left': '-157px'
                }, blo);
            })
        }
    });
}(jQuery));
-->
</body>
</html>


 

© 著作权归作者所有

共有 人打赏支持
羊皮卷
粉丝 3
博文 118
码字总数 56622
作品 0
广州
前端工程师
300+Jquery, CSS, MooTools 和 JS的导航菜单资源(总有一个适合你!)

如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。今天为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以...

晨曦之光
2012/03/09
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1
10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件...

晨曦之光
2012/03/09
0
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0
使用jQuery开发iOS风格的页面导航菜单

日期:2012-7-28 来源:GBin1.com 在线演示 本地下载 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航。 HTML代码 我们使用...

gbin1
2012/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
1
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部