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都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...
随机推荐
- VS2010以及vs10sp1安装问题
进公司第一天搭建开发环境,由于系统版本有点低,安装遇到各种问题,在此总结一下,以备日后有用. 问题描述 Windows server 2003 安装VS2010时,安装到Microsoft.NET F ...
- 烂泥：python2.7和python3.5源码安装
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前几天在centos6.6安装ansible时,一直提示python版本不对,导致不能安 ...
- AspNetPager 多条件分页查询
AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...
- C++点滴----关于类常成员函数
关于C++中,类的常成员函数 声明样式为: 返回类型 <类标识符::>函数名称(参数表) const 一些说明: 1.const是函数声明的一部分,在函数的实现部分也需要加上const ...
- 项目游戏开发日记 No.0x000003
14软二杨近星(2014551622) 刚刚过去清明节, 意味着离交项目的时间, 还有三个星期, 有点着急了, 可是, 还是觉得无所适从... 项目进展: 刚刚过去的一周, 事非常多, 以至于, 进展 ...
- SSH整合
首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框 ...
- 前端之ajax
前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML ...
- 数塔取数 基础dp
从低端向上,每个结点取下一层左右结点最大值和本身价值相加,dp[0][0]为最后结果 #include<iostream> #include<algorithm> #inclu ...
- 【C#】透屏幕，屏幕扩展
if (!SCREEN_STATE) { ) { System.Windows.Forms.Screen s2 = System.Windows.Forms.Screen.AllScreens[]; ...
- RabbitMQ总结概念
AMQP:一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计 http://www.diggerplus.org/archives/3110 AMQP ...