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:端口号
- MySQL：procedure, function, cursor,handler
Procedure & Function Procedure 语法: CREATE [DEFINER = { user | CURRENT_USER }] PROCEDURE sp_name ...
- tomcat加密
tomcat做虚拟主机的最好方法是复制,运行多个tomcat,避免tomcat挂掉,同时几个业务也挂掉 针对tomcat7,tomcat未实现 生成私钥证书文件: mkdir -p /usr/loca ...
- User mode Linux
一.简介 用户模式Linux(User ModeLinux,UML)不同于其他Linux虚拟化项目,UML尽量将它自己作为一个普通的程序.从Linux2.6.9版本起,用户模式Linux(User m ...
- jquery ajax在跨域访问post请求的时候，ie9以下无效（包括ie9）
1. 设置浏览器安全属性,启用[通过域访问数据源]选项,如图:
- [转]教你实践ASP.NET Core Authorization
本文转自:http://www.cnblogs.com/rohelm/p/Authorization.html 本文目录 Asp.net Core 对于授权的改动很友好,非常的灵活,本文以MVC为主, ...
- JavaScript代码段整理笔记系列（二）
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- 利用线上数据验证系统 Gor
Web 应用性能和压力测试工具 Gor - 运维生存时间 http://hao.jobbole.com/gorhttp/ 要使用线上引流到测试环境的作用,需要做到以下几点: 1.新搭建一套测试环境,连 ...
- bitmap解码
#include <stdio.h> #include <stdlib.h> #include <string.h> #define BYTE unsigned c ...
- Dapper学习笔记（一）
https://github.com/StackExchange/dapper-dot-net Dapper是对IDbConnection的扩展,需要使用Dapper提供的扩展只需要把SqlMappe ...