文档章节

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
博文 123
码字总数 61768
作品 0
广州
前端工程师
一些必看的jQuery导航插件和教程

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

迷路的阿修罗
2010/12/30
0
1
300+Jquery, CSS, MooTools 和 JS的导航菜单资源(总有一个适合你!)

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

晨曦之光
2012/03/09
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

Android WebView制作简易浏览器

最终效果 先创建一个WebView控件,其他的就是通过线性布局在上方加入网址输入框和两个按钮 <WebView android:id="@+id/act_webview_wv" android:layout_width="ma...

lanyu96
7分钟前
0
0
解决MacOS升级系统Sierra到Mojave后git报错

错误信息 升级MacOS Sierra到Mac Mojave后执行git命令报错: xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/......

阿dai
7分钟前
0
0
兄弟连区块链教程以太源码分析CMD深入分析(一)

cmd包分析 cmd下面总共有13个子包,除了util包之外,每个子包都有一个主函数,每个主函数的init方法中都定义了该主函数支持的命令,如 geth包下面的: func init() { // Initialize the...

兄弟连区块链入门教程
9分钟前
0
0
Titan Framework MongoDB深入理解1

在TitanFrameWork框架中,已经集成了MongoDB的各个功能,现在我们对框架内部的一些重要类进行分析与解读。 MongoDBConverter 在Titan框架中,比较重要的一个接口就是MongoDBConverter,它是作...

云季科技
14分钟前
0
0
SpringBoot集成Quartz

SpringBoot集成Quartz 什么是Quartz Quartz is a richly featured, open source job scheduling library that can be integrated within virtually any Java application - from the smalle......

Grittan
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部