Jquery实现特效滑动菜单栏
<!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实现特效滑动菜单栏的更多相关文章
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 15个web前端的美轮美奂的 jQuery 图片特效
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例
一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...
随机推荐
- Mac下查看端口占用
netstat命令 netstat -an | grep 端口号 lsof命令 lsof -i:端口号
- Mybatis环境
第一步:下载jar包并导入 1.mysql驱动包 2.mybatis环境包 第二步:创建MYSQL数据库 由于这是用于测试,只创建了test-usreinfo数据表 第三步:在src文件夹中创建myb ...
- CentOS7 修改防火墙，增加外网可以访问的端口号
CentOS7 修改防火墙,增加外网可以访问的端口号: vim /etc/sysconfig/iptables 增加一条 -A INPUT -p tcp -m state --state NEW -m ...
- Unity插件之Unity调用C#编译的DLL
Unity插件分为两种:托管插件(Managed Plugins)和本地插件(Native Plugins).本文先来说说Unity中的托管插件,本地插件的文章留到下一篇文章再说. 有时候我们会有这样 ...
- 后记：IT软件人员学习的书籍 - IT软件人员书籍系列文章
1年了,软件人员学习书籍系列总算是写完了.虽然文字篇幅不多,主要对各个角色的一些基本内容做了介绍,但是更重要的是能够提供相关的人员学习书籍进行下载,让更多的人能够从中学习到更多的知识. 这个系列,从项 ...
- 怎么修改与设置.java文件属性？
1.首先 打开 >> Myeclipse或Eclipse.(我用的是Myeclipse) 2.打开 >> Window >> Preferences ...
- C#语言基础——函数
函数一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序实现模块的功能.在C#语言中,子程序的作用是由一个主函数和若干个函数构成.由主函 ...
- PHP语法(二)：数据类型、运算符和函数
相关链接: PHP语法(一):基础和变量 PHP语法(二):数据类型.运算符和函数 PHP语法(三):控制结构(For循环/If/Switch/While) 这次整理了PHP的数据类型.运算符和函数. ...
- MFC画线功能总结
本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...
- [LeetCode] Total Hamming Distance 全部汉明距离
The Hamming distance between two integers is the number of positions at which the corresponding bits ...