文档章节

JQ滑动导航菜单的实现

JavaSwing
 JavaSwing
发布于 2016/11/29 11:09
字数 554
阅读 27
收藏 0
前言:不多说直接看效果!!!
这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验!
 
原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式我们都很容易实现就是一些CSS而已!
中间那个滑块其实就是一个定位为: absolute 的元素,每当鼠标放到一个A元素上的时候用JQ获取到当前A元素的位置和宽度,再用JQ的animate方法,以动画的形式给元素即可!
当然你在这里也可以也一些其它的动画

1、DOM结构
<div class="nav-wrapper">
        <div class="container">
            <ul id="nav-list">
                <li class="nav-item"><a href="http://www.lanrentuku.com/" class="active" target="_blank">网站首页</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">网上商城</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">智能管家</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">技术支持</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">应用案例</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">关于我们</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></li>
            </ul>
            <div class="animate-block"></div>
        </div>
    </div>

  

2、对应的CSS
 1 *{margin: 0;padding: 0;}
 2         body{ font-family:"Microsoft YaHei";}
 3         .container {
 4             width: 1200px;
 5             margin: 30px auto;
 6             position: relative;
 7         }
 8         li {
 9             list-style: none;
10         }
11         .nav-wrapper {
12             background-color: #0191d7;
13             height: 50px;
14         }
15         #nav-list {
16             position: relative;
17             z-index: 1;
18         }
19         #nav-list .nav-item {
20             float:left;
21             height: 50px;
22         }
23         #nav-list li a{
24             display: block;
25             padding: 0 50px;
26             height: 50px;
27             font-size: 16px;
28             line-height: 50px;
29             color: #fff;
30             text-decoration: none;
31         }
32         .animate-block {
33             position: absolute;
34             height: 50px;
35             background-color: #2B6B8A;
36             left: 0;
37             top:0;
38             z-index: 0;
39         }
40         .active {
41             box-shadow: 0 0 2px rgba(0,0,0,.1);
42         }
View Code

 

3、JQ代码
$(function () {
        var $active = $(".active"); //当前选中的菜单
        var $active_w = $active.innerWidth();
        var $active_l = $active.position().left;
        var $animate_block = $(".animate-block");
 
        //设置滑块初始位置
        $(".animate-block").css({width:$active_w,left:$active_l});
 
        //a事件
        $("#nav-list>li").hover(function () {
            var index = $(this).index();
            var $a_cur = $("#nav-list a").eq(index);//得到当前元素
            var width = $a_cur.innerWidth();
            var left = $a_cur.position().left;
            $(".animate-block").stop().animate({width:width,left:left});
        },function () {
            $(".animate-block").stop().animate({width:$active_w,left:$active_l});
        });
    });
View Code

 

参考资料:

 

本文转载自:http://www.cnblogs.com/zxdBlog/p/5936825.html

JavaSwing
粉丝 21
博文 44
码字总数 8095
作品 0
杭州
程序员
私信 提问
JS三教九流系列-Zepto.js-为移动端开发的类库

zepto.js的api地址 http://www.css88.com/doc/zeptojsapi/ 类库源码下载http://www.zeptojs.cn/ 滚动当前页面,看到这部分点击下载 和使用jquery一样,我们只要html页面引入即可。 zepto的a...

透笔度
2015/08/17
454
0
使用HTML5,CSS3和jQuery增强网站用户体验

日期:2011/11/16 来源:GBin1.com 记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的web技术 ...

gbin1
2011/11/16
4.1K
6
2012年度最新的7款导航菜单Jquery特效

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

邓剑彬
2012/11/29
763
10
Android实现导航菜单左右滑动效果

本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果。 在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果,有兴趣的朋友可以查看: http://www.cnblogs.com/h...

迷途d书童
2012/04/26
6.4K
1
谢谢您帮我解答一下,谢谢谢谢谢谢谢

@邓凡平 你好,想跟你请教个问题:@邓凡平 你好,想跟你请教个问题:android中,如何实现顶部有一个导航的菜单,中间可以滑动切换,然后底部有也有一个菜单,但是底部菜单要跳转到其他的地方...

邓思学
2013/08/07
175
2

没有更多内容

加载失败,请刷新页面

加载更多

会用python把linux命令写一遍的人,进大厂有多容易?

看过这篇《2000字谏言,给那些想学Python的人,建议收藏后细看!》的读者应该都对一个命令有点印象吧?没错,就是 linux 中经常会用到的 ls 命令。 文章中我就提到如何提升自己的 python 能力...

上海小胖
9分钟前
1
0
HashMap的特性

一、hashmap数据结构:哈希表结构:数组+链表 hashmap调用默认构造方法会产生一个默认底层是长度为16的Entry数组,首先调用key的hasCode()方法来得到一个整数, int hash = hash(key.hashCode...

GGbird
10分钟前
2
0
第五章 spring-connet之Imports注解来龙去脉

前言 imports是一个在spring体系里非常重要的注解,基本每个Enable开头的注解必然有一个import注解。接下来我们深入研究下import的作用。看小节的同学建议先取看PostProcessorRegistrationDe...

鸟菜啊
13分钟前
1
0
CentOS部署Harbor镜像仓库

关于Harbor Harbor是用于存储和分发Docker镜像的镜像仓库服务,相比Docker Registry,Harbor在安全、标识、管理等方面做了增强,更适合企业使用; 官方网站:https://goharbor.io/ 官方开源:...

程序员欣宸
18分钟前
1
0
JavaScript调试必会的8个console方法

每个JavaScript开发者都用过console.log()来调试程序,但实际上Console对象还提供了很多其他方法可以提高调试效率。本文将介绍8个有趣的Console方法,即使JavaScript老手也不一定知道! 1、c...

汇智网教程
39分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部