文档章节

jQuery下划线跟随导航菜单

羊皮卷
 羊皮卷
发布于 2016/12/04 09:33
字数 361
阅读 31
收藏 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
博文 131
码字总数 70116
作品 0
广州
前端工程师
私信 提问
应用于网站导航中的 15 个 jQuery 插件

当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分。在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问。适当的导航工具能够帮助用...

oschina
2013/10/15
9.6K
26
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
2012年度最新的7款导航菜单Jquery特效

网站悬浮快速导航Jquery特效 此Jquery特效是一款非常实用的功能,最近很多网友想要JquerySchool网站悬浮快速导航的特效,为了满足网友们,今天把它整理出来分享给网友们用,此功能原来来自网...

邓剑彬
2012/11/29
605
10
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11
一些必看的jQuery导航插件和教程

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

迷路的阿修罗
2010/12/30
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
11
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部