最近在天猫主页的右边栏上看到了一个特效，还不错，就仿制了一个，比原版的效果稍微多了点。
演示地址：http://itxiaoming.sinaapp.com/demo01/demo.html
本人不太会描述，所以直接上代码吧
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo01</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div class="menu"> <div class="menu_b back1"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back2"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back3"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back4"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back5"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back6"></div> <span>测试</span> </div> </body> </html>
上面的HTML有6个菜单栏，每个菜单栏左边默认显示是2PX宽度的色彩条
$(document).ready(function(){
$(".menu").mouseover(function(){
var div = $(this).children(".menu_b");
div.stop(true,false).animate({width:'220px',opacity:'1'},400);
div.animate({width:'180px',opacity:'1'},600);
div.animate({width:'200px',opacity:'1'},500);
});
$(".menu").mouseout(function(){
var div = $(this).children(".menu_b");
div.stop(true,false).animate({width:'2px',opacity:'1'},500);
div.animate({width:'20px',opacity:'1'},600);
div.animate({width:'2px',opacity:'1'},500);
});
});
当鼠标放上去的时候，2PX的色彩条的宽度加载到比菜单栏的多20PX，然后再弹回来比菜单栏的少20PX，然后再加载到跟菜单栏一样宽，这样有个弹性的加载效果。这里的宽度可以根据自己的审美观来修改，也可以再后面多加几个来回弹的特效，这样也许效果会显得更逼真些。离开的时候特效相反，一样的原理。
/* demo01 css */
.menu{position: relative;
width: 200px;
height: 40px;
background: #666;
margin: 10px;
}
.menu_b{
position: absolute;
width: 2px;
height: 40px;
background: red;
z-index: 1px;
}
.menu span{
position: inherit;
display: block;
text-align: center;
line-height: 40px;
z-index: 3px;
font-family: "Microsoft Yahei";
color: #FFF;
cursor: pointer;
}
.back1{
background: #FF0000;
}
.back2{
background: #921AFF;
}
.back3{
background: #00CACA;
}
.back4{
background: #00DB00;
}
.back5{
background: #FF5809;
}
.back6{
background: #E1E100;
}
第一次在这里发表文章，有什么不足的地方或好的方法可以留言，我们可以互相学习，互相进步。然后希望能在这里结交更多志同道合的朋友。谢谢观看，源码奉上。
相关推荐
【jQuery仿旅游网站侧边栏菜单特效】是一种常见的网页交互设计，主要应用于网站导航，尤其在旅游类网站中，能够帮助用户快速浏览和选择目的地或服务。这种特效通过JavaScript库jQuery实现，它使得菜单在鼠标悬停时...
《jQuery实现的倾斜打开侧边栏菜单特效源码解析》 在网页设计中，侧边栏菜单是不可或缺的元素，它能有效地组织和展示网站的内容，提供用户友好的导航体验。而利用jQuery来实现侧边栏菜单的动态效果，更是能够提升...
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现一个可隐藏的侧边栏菜单，以及涉及到的相关知识点。 首先，Bootstrap 是一个开源的前端框架，它提供了丰富的组件和样式，如响应式布局、导航栏、模态框等，使得...
【jQuery推拉式3D隐藏侧边栏菜单特效】是一种基于jQuery库的前端交互设计，旨在为网站提供一种独特而吸引人的导航体验。这个特效利用了现代浏览器的CSS3特性，实现了从页面左侧或顶部滑出的3D透视效果，为用户提供了...
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件...
**jQuery库：tuxedo-menu.js - 实用的侧边栏菜单插件** 在Web开发中，用户界面的可操作性和交互性至关重要。为了提升用户体验，开发者常常会使用JavaScript库来增强网页的功能，其中jQuery是最受欢迎的选择之一。...
在网页设计和开发中，创建一个可伸展和收缩的侧边栏菜单是常见的需求，尤其是在响应式设计中。这个项目使用了jQuery和Bootstrap这两个强大的工具来实现这一功能。jQuery是一个轻量级、功能丰富的JavaScript库，而...
**jQuery和CSS3炫酷隐藏侧边栏菜单特效插件详解** 在网页设计中，交互性和用户体验至关重要。jQuery和CSS3结合使用，可以创建出许多动态且吸引人的效果，其中隐藏侧边栏菜单就是一种常见且实用的设计。这款jQuery和...
本资源"jQuery滑动侧边栏实现多级菜单插件jSide.zip"提供了使用jQuery创建动态、交互式侧边栏菜单的解决方案。以下是关于这个插件及其使用的一些关键知识点： 1. **jQuery库**: jQuery 是一个轻量级的JavaScript库...
《jQuery tuxedo-menu.js：打造实用的侧边栏菜单特效》 在现代网页设计中，侧边栏菜单已经成为一种常见的交互元素，它为用户提供了一种直观且高效的方式来浏览网站内容。jQuery tuxedo-menu.js是一款专为此目的设计...
在本项目中，“基于jQuery和Bootstrap3实现隐藏侧边栏菜单特效.zip”是一个包含资源的压缩包，旨在帮助开发者创建一个具有隐藏侧边栏菜单效果的网页。这个效果通常是响应式的，适合移动设备和桌面设备的用户体验。让...
"jQuery右侧弹出侧边栏导航菜单代码"就是一个旨在提升用户交互体验的解决方案。该资源包含了一系列文件，包括`index.html`（主网页文件）、`css`（样式表文件夹）、`images`（图像资源文件夹）和`js`（JavaScript...
标题中的“jquery点击展开的隐藏侧边栏导航菜单插件”指的是一个基于jQuery技术实现的交互式网页元素，主要用于创建可折叠的侧边栏菜单。这种插件在现代网页设计中非常常见，尤其是在响应式布局中，因为它可以有效...
在这个特效中，侧边栏可能使用元素，而菜单项则可能包含在或元素内。 其次，jQuery的核心在于它的链式操作和选择器系统。利用$(selector)语法，我们可以快速选取页面上的元素。例如，我们可以用$("#sidebar")选取id...
本篇文章将深入探讨jQuery 3.1.1版本的两个核心文件——`jquery-3.1.1.js`和`jquery-3.1.1.min.js`，以及它们在Bootstrap Treeview插件中的应用。 首先，我们来看`jquery-3.1.1.js`，这是未经压缩和未优化的源代码...
这个压缩包包含两个关键文件：`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`，这些都是jQuery UI的特定版本，即1.8.16。这个版本在当时是一个广泛使用的稳定版本，提供了丰富的功能和组件。 ...