<!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代码实现_我爱模板 www.5imoban.net</title>
<!--引入开始-->
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<!--引入结束-->
<style>
body {
margin:0;
padding:0;
color:#333;
font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif;
text-align:center;
background:#DCDCDC;
}
a {
color:#333;
text-decoration:none;
outline:none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
.rightNav{
position:fixed;
width:140px;
right:0;
top:100px;
_position:absolute;
text-align:left;
cursor:pointer;
background-image:url(about:blank);
}
.rightNav a{
display:block;
position:relative;
height:30px;
line-height:30px;
margin-bottom:2px;
background:#fff;
padding-right:10px;
width:130px;
overflow:hidden;
cursor:pointer;
right:-110px;
}
.rightNav a:hover{
text-decoration:none;
color:#1974A1;
}
.rightNav a:hover em{
background:#00b700
}
.rightNav a em{
display:block;
float:left;
width:30px;
background:#1974A1;
color:#fff;
font-size:16px;
text-align:center;
margin-right:10px;
}
</style>
</head>
<body>
<!--代码开始-->
<div class="rightNav">
<a href="http://www.5imoban.net" style="right: -110px;"><em>0</em>站长素材</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>1</em>书签切换</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>2</em>幻灯片</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>3</em>图片滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>4</em>图片滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>5</em>图片无缝滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>6</em>图片无缝滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>7</em>文字滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>8</em>文字滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>9</em>文字无缝滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>10</em>文字无缝滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
var thisObj = $(this);
tempS = setTimeout(function(){
thisObj.find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"0"},300);},50*i);
});
},200);
},function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"-110"},300,function(){
});},50*i);
});
});
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
<!--代码结束-->
</body>
</html>
分享到：
相关推荐
"jQuery右侧弹出侧边栏导航菜单代码"就是一个旨在提升用户交互体验的解决方案。该资源包含了一系列文件，包括`index.html`（主网页文件）、`css`（样式表文件夹）、`images`（图像资源文件夹）和`js`（JavaScript...
总结，创建“jquery右侧边固定层导航菜单依次动画滑动显示菜单展开”涉及的关键技术包括：jQuery库的使用、固定定位、animate()函数实现动画、事件委托、状态判断和CSS样式设计。通过熟练掌握这些技术，你可以为你的...
本文将详细介绍使用jQuery实现的右侧悬浮导航菜单以及返回顶部的功能。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互，使得开发者能够更高效地创建动态网页。 首先，我们...
"jQuery鼠标经过二级菜单下拉代码"是一个专门针对这种需求设计的代码实现，它利用jQuery库和CSS3技术，实现了鼠标悬停时自动展开二级菜单的效果，为用户提供了流畅、直观的导航体验。 首先，jQuery是一个轻量级的...
通过使用jQuery，开发者可以编写出更简洁、更易读的代码，从而提高开发效率。 该代码的核心在于实现横排下拉菜单。这种布局方式使得主菜单选项水平排列，当用户悬停在某个菜单项上时，相应的子菜单会垂直下拉显示。...
本主题聚焦于使用jQuery库来实现一个鼠标滑过时显示二级下拉菜单的代码实例。jQuery是一个轻量级、功能强大的JavaScript库，它简化了JavaScript的事件处理、动画效果以及Ajax交互，使得创建动态网页变得更加简单。 ...
这个压缩包包含了一个能够实现点击右上角图标时从右侧弹出菜单的特效，同时也提供了通过代码触发弹出菜单的可能性。 jQuery是一个轻量级、高性能的JavaScript库，它的API简洁易用，使得开发人员能够快速地创建动态...
下面我们将详细探讨如何使用jQuery实现手机端底部弹出菜单的功能。 首先，我们需要理解基本的HTML结构。在手机端应用中，底部菜单通常位于页面底部，包含一系列可点击的链接或按钮。一个简单的HTML结构可能如下： ...
这个环形菜单利用了jQuery的强大功能和CSS3的现代特性，实现了一个可旋转弹出并能平滑收回的效果，同时伴有音效，使得用户操作更加生动有趣。 首先，jQuery是JavaScript的一个库，它简化了DOM操作、事件处理、动画...
"jQuery 实现右侧水平弹出菜单"是一个常见的需求，特别是在构建响应式网站时，它能为用户提供便捷的导航。jQuery 是一个轻量级、功能强大的JavaScript库，极大地简化了DOM操作、事件处理和动画效果，使得开发这样的...
在本文中，我们将深入探讨如何使用jQuery来实现微信风格的手机端底部弹出导航菜单列表。这个功能在移动设备上非常常见，它提供了一种优雅的方式，让用户在狭小的屏幕上方便地访问网站的主要功能。 首先，让我们了解...
常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览 说明：压缩包分为jQuery code 1，2，3三卷。 本压缩包为卷jQuery code 2
jQuery 的易用性和丰富的插件库使得实现抽屉菜单变得相对简单。 在实现 jQuery 抽屉菜单时，主要涉及以下几个核心知识点： 1. **CSS布局**：首先，你需要设置一个包含导航项的侧栏元素，通常将其定位为固定或者...
【jQuery右侧悬浮层菜单】是一种常见的网页交互设计，它能够为用户提供便捷的导航服务，...对于网页设计师和前端开发者来说，这是一个实用的学习案例，可以借鉴其代码结构和实现方式，为自己的项目增添类似的交互元素。
本文将深入探讨如何使用jQuery实现一个右滑动的tab菜单，结合给出的文件名，我们可以推断这是一个包含CSS样式、HTML结构以及JavaScript功能的项目。 首先，`style.css`和`style-ie.css`是两个CSS样式表。`style.css...
在"下拉多选菜单jquery代码"中，核心概念是HTML的`<select>`元素和`<option>`元素，它们构建了基本的下拉菜单结构。`<select>`元素定义了一个下拉列表，而`<option>`元素则表示列表中的各个选项。要实现多选功能，...
使用jQuery，我们可以编写简洁的代码来实现复杂的动态效果，如`.hover()`方法用于绑定悬停事件，`.show()`和`.hide()`方法用于控制元素的可见性。 为了实现这个效果，首先需要在HTML文档中引入jQuery库。然后，可以...
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容，我们将展开对以下几个知识点的讨论： 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
在这个“Jquery实现下拉菜单”的主题中，我们将深入探讨如何在Visual Studio 2008（使用.NET Framework 3.5）环境下，利用jQuery创建功能丰富的下拉菜单，并实现点击当前菜单项时关闭其他打开的菜单。以下是关于这个...
本篇文章将详细解析“jQuery右侧弹出侧边栏导航菜单代码”，帮助开发者理解和应用这一实用的jQuery特效。 首先，我们要明确jQuery是一种强大的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画制作等...