<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jquery实现导航滑动</title>

    <style type="text/css">

        .navlist

        {

            position: absolute;

            top: 10px;

        }

        a

        {

            text-decoration: none;

            color: White;

        }

        .navlist a

        {

            margin-left: 60px;

            color: #666;

        }

        .expand

        {

            height: 0px;

            background-color: #333d4d;

            overflow: hidden;

            position: relative;

            top: 30px;

            width: 100%;

        }

        .expdiv

        {

            height: 130px;

            width: 500%;

        }

        .expdiv-list

        {

            width: 20%;

            text-align: center;

            float: left;

            line-height: 110px;

            color: White;

        }

        .expand .close-btn

        {

            width: 120px;

            height: 20px;

            background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px;

            position: absolute;

            left: 50%;

            bottom: -2px;

            margin-left: -60px;

            cursor: pointer;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#menuList").on("click", "a", function () {

                // 模拟点击closeBtn按钮

                if($(this).hasClass("btn-active")){

                    $("#expandZone #closeBtn").click();

                    return false;

                }

                var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";

                if ($("#expandZone").hasClass("active")) {

                    //    给expdiv类元素赋予动画切换的效果

                    $("#expandZone .expdiv").animate({ marginLeft: mlValue });

                }

                else {

                    $("#expandZone .expdiv").css({ marginLeft: mlValue });

                    $("#expandZone").animate({ height: "130px" }).addClass("active");

                }

                //    为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式

                $(this).addClass("btn-active").siblings().removeClass("btn-active");

                return false;

            });

            $("#expandZone #closeBtn").on("click", function () {

                $("#expandZone").animate({ height: "0px" }, function () {

                    $(this).removeClass("active");

                    $("#menuList .btn-active").removeClass("btn-active");

                });

                return false;

            });

        });

    </script>

</head>

<body>

<div id="menuList" class="navlist">

    <a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a>

    <a href="#">关于我们</a>

</div>

<div id="expandZone" class="expand">

    <div class="expdiv">

        <div class="expdiv-list">

            <a href="#">主页</a>

        </div>

        <div class="expdiv-list">

            <a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a>

        </div>

        <div class="expdiv-list">

            <a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a>

        </div>

        <div class="expdiv-list">

            个人信息：

        </div>

        <div class="expdiv-list">

            公司地址：山东省淄博市

        </div>

    </div>

    <div id="closeBtn" class="close-btn">

    </div>

</div>

</body>

</html>

Jquery实现特效滑动菜单栏的更多相关文章

  1. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  5. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  6. 15个web前端的美轮美奂的 jQuery 图片特效

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...

  7. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  8. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  9. 【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例

    一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...

随机推荐

  1. ssl + nginx + tomcat 部署方案

    安装make yum -y install gcc automake autoconf libtool make 安装g++ yum install gcc gcc-c++ 安装PCRE cd /us ...

  2. ORA-00494: enqueue [CF] held for too long (more than 900 seconds) by 'inst 1, osid 5166'

    凌晨收到同事电话,反馈应用程序访问Oracle数据库时报错,当时现场现象确认: 1. 应用程序访问不了数据库,使用SQL Developer测试发现访问不了数据库.报ORA-12570 TNS:pac ...

  3. java中的浮点数

    浮点数值不适用于禁止出现舍入误差的金融计算中.例如,命令System.out.println(2.0-1.1)将打印出0.8999999999999999999999999,而不是人们想象的0.9.其 ...

  4. 基于TQ2440的SPI驱动学习（OLED）

    平台简介 开发板:TQ2440 (NandFlash:256M  内存:64M) u-boot版本:u-boot-2015.04 内核版本:Linux-3.14 作者:彭东林 邮箱:pengdongl ...

  5. html基础起航

    废话不多说,直接上例子! 工欲善其事,必先利其器 浏览器要有吧~                       比如:IE.Chrome.Firefox…… 纯文本编辑软件不可少~          比 ...

  6. python爬虫学习(11) —— 也写个AC自动机

    0. 写在前面 本文记录了一个AC自动机的诞生! 之前看过有人用C++写过AC自动机,也有用C#写的,还有一个用nodejs写的.. C# 逆袭--自制日刷千题的AC自动机攻克HDU OJ HDU 自 ...

  7. Linux下yum安装MySQL

    写这篇文章的原因是:在刚开始使用Linux操作系统时想要搭建LAMP环境,于是开始在Google和百度上各种寻找资料,碰到了不是很多的问题后,我决定写这篇文章总结一下在Linux下yum安装MySQL ...

  8. 使用NuGet发布自己的类库包（Library Package）

    STEP 1:注册并获取API Key 首先,你需要到NuGet上注册一个新的账号,然后在My Account页面,获取一个API Key,这个过程很简单,我就不作说明了. STEP 2:下载NuGe ...

  9. C++ "+="等运算符使用bug

    昨晚写了一个程序,使用了"+="运算符,结果总不是我想要的,查了一晚没找到,今早才发现: timeInterval = tpImP.staTime - imgPara[serial ...

  10. redis 学习笔记(6)-cluster集群搭建

    上次写redis的学习笔记还是2014年,一转眼已经快2年过去了,在段时间里,redis最大的变化之一就是cluster功能的正式发布,以前要搞redis集群,得借助一致性hash来自己搞shardi ...