jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

2014-01-15  来源:本站原创  分类:jquery  人气:3 

淘宝网上的菜单滑动伸展收缩想必大家不会很陌生吧,接下来本文也使用jquery+css实现一个,代码很简洁功能很使用,感兴趣的各位可以不要错过了哈

功能很实用,代码非常的简单

效果1.

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

效果2.

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

样式代码如下:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}
span{
color:#FF2B13
}
a{
text-decoration:none;
color:#515050
}
a:hover{
text-decoration:underline;
color:red
}
.box_all{
overflow:hidden;
width:350px;
font-family:"微软雅黑";
font-size:14px;
border:1px solid #EEEEEE;
border-top:2px solid #F57A04;
padding:0 0 10px 0;
margin:0 auto
}
.box{
padding-left:45px;
padding-top:5px
}
.box li{
line-height:20px;
margin-right:30px;
width:120px;
text-align:left;
float:left;
list-style-type:none
}
.boxdown{
cursor:pointer;
border:1px solid #EEEEEE;
width:60px;
height:14px;
background:#FFFFFF url(../images/down.png) no-repeat 20px;
margin-left:150px;
margin-top:-2px;
border-top:none;
margin:0 auto
}
.up{
cursor:pointer;
border:1px solid #EEEEEE;
width:60px;
height:14px;
background:#FFFFFF url(../images/up.png) no-repeat 20px;
margin-left:150px;
margin-top:-2px;
border-top:none;
margin:0 auto
}

js主要代码如下:

复制代码 代码如下:

$(document).ready(function(){
var a =$(".box ul li:gt(3):not(:last)");
a.hide();
$(".boxdown").click(function(){
if(a.is(':visible')){
a.slideUp('fast');
$(this).removeClass('up');
}else{
a.slideDown('fast').show();
$(this).addClass('up');
}
});
});
相关文章
  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝) 2014-01-15

    淘宝网上的菜单滑动伸展收缩想必大家不会很陌生吧,接下来本文也使用jquery+css实现一个,代码很简洁功能很使用,感兴趣的各位可以不要错过了哈 功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 }

  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例 2014-10-12

    仿淘宝京东多条件筛选可自行结合ajax加载,使用Jquery简单实现,具体如下,喜欢的朋友可以参考下 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例 2015-03-29

    这篇文章主要介绍了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法,以完整实例形式较为详细的分析了jQuery图片特效的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝带有指示条的图片转

  • CSS仿淘宝首页导航条布局效果 2013-11-28

    以下是CSS内容部分: 以下是引用片段: 首页 数码通讯 女人 男人 家居 书籍音像 运动 游戏 宠物 香港街 淘宝商城 仿淘宝网首页导航条效果 转载请注明出处 子鼠 www.zishu.cn 2006-05-21 凌晨03:05分 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript仿淘宝智能浮动 2014-12-16

    我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 在Z-Blog中使用这个特效代码需要注意,如果在侧边栏使用,则需要注意,侧栏中的栏目不能使用JavaScript动态加载,

  • 仿淘宝TAB切换搜索框搜索切换的相关内容 2013-10-29

    这是一款仿淘宝TAB切换搜索框,想搜索哪方面的内容就切换到哪一个,非常实用,喜欢的朋友可以看看 一款仿淘宝TAB切换搜索框,想搜索哪方面的内容就切换到哪一个,感兴趣的朋友可以看看下面的代码 <div class="search"> <div id="searchBox"> <ul class="tab-bar clearfix" id="tabBar"> <li class="

  • jQuery实现级联菜单效果(仿淘宝首页菜单动画) 2013-10-07

    今天我们就带大家体会一下级联菜单的显示,只是实现了简单的效果,不过大都原理是一样的 相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧. 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码 <!DOCTYPE html> <html> <head> <title&g

  • 基于Jquery插件开发之图片放大镜效果(仿淘宝) 2014-02-25

    公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下. 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大

  • 基于jQuery实现仿淘宝套餐选择插件 2014-04-08

    本文给大家介绍的是一款基于jQuery实现放淘宝套餐选择的插件,主要是基于本地json数据的选择列创建,有需要的小伙伴参考下. 首先是页面HTML代码 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js"><

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验) 2013-11-12

    其实这个已经是个比较常见的功能了,网上也有很多人做过这个了,但是很多都是仅仅做了一些基本的网页上自动完成功能,没有与具体的数据库进行联动,我今天所介绍这个自动完成的就是我修改的jQuery.AutoComplete+数据库的一个解决方案. 首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么

  • 仿淘宝分页按钮效果简单美观易使用的JS分页控件 2014-03-25

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载. 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数 isShowTotalPage : tru

  • Jquery + CSS实现菜单按钮点击.导航菜单下拉.表格隔行变色.表格内容排序 2013-07-26

    HTML(demo.html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>demo.html</title> <meta http-equiv="keywords" conte

  • 仿淘宝套餐选择插件 基于jQuery(原创) 2013-06-20

    效果预览源码+demo下载 首先是页面HTML代码 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript

  • js仿淘宝的拼音检索特效代码 2014-03-04

    如果需要查询数据库,自己修改成ajax调用吧,效果会很好的. 以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 拼音检索: a Adidas AEE/爱意 AF AF棒球帽 Agatha Albion/奥尔滨 AMD Andox Artini 爱普生 b fasfs fsdfsd c[ch] fasfs fsdfsd fdsfas d fasfs fsdfsd fdsfas fasdffsd e fasfs fsdfsd fdsfas fasdffsd fasdfsaf

  • 仿淘宝ajax分页控件带例子 编辑 2014-03-25

    默认生成的样式.自己可以调整.: <table id="commentTab" width="100%;"> </table> <div id="meneameFy"></div> //分页控件输出以及判断的主要方法 function pageInit(s){ currsPage=s;//当前页码 (注意是传过来的) var totalPage = "${totalPage}";

  • 仿淘宝首页分类列表效果实现代码 2014-11-15

    模板淘宝首页的分类列表效果,17173的游戏分类效果也不错. Untitled Document 拼音索引 A 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 阿里山 B 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 棒棒糖 C C D D E E F F G G H H I I J J K K L L M M N N O O P P Q Q R R S[sh] S T T U U V V W W X X Y Y

  • 仿淘宝写的一个php分页函数 2011-05-17

    function formatPage($total, $page, $pageSize){ $str = ''; $u = '?'; foreach($_GET as $key=>$val){ if($key!='page') $u.=$key.'='.$val.'&'; } $url = 'http://'.$_SERVER["HTTP_HOST"].$_SERVER["SCRIPT_NAME"].$u; if($page>1){ $str

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果 2013-12-04

    jquery实现下拉菜单效果,jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局,感兴趣的朋友可以参考下哈,希望对你有所帮助 在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: <ul> <

  • 用jquery写的菜单从左往右滑动出现 2015-02-24

    这篇文章主要介绍了用jquery写的菜单从左往右滑动出现的效果,需要的朋友可以参考下 最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站

  • 300+Jquery, CSS, MooTools 和 JS的导航菜单资源(总有一个适合你!) 2012-03-09

    如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.今天为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了.从非常简单的HTML和CSS导航菜单,到非常复杂和高级的JQuery.JavaScript和MooTools技术,这都可以让你轻松实现褪色.滑动.拖动等效果.如果您觉得这些资源值得一用,那就快把本网页收藏以备日后查阅吧! 1.Fancy menu - 非常酷的导航菜单: 2. 专为Mac爱好者开发的C