jQuery简单实现仿京东商城的左侧菜单效果代码


Posted in Javascript onSeptember 09, 2015

本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码。分享给大家供大家参考。具体如下:

这是一款挺漂亮的左侧菜单效果,基于jQuery插件,但是还没有真正的完善,有些闪动,也希望高人指点修正。仿京东商城风格的菜单。

运行效果截图如下:

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>左侧菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$().ready(function(){$(".testbox ul li").hover(function(){$(this).find(".boxshow").show();},function(){$(this).find(".boxshow").hide();});});
</script>
<style type="text/css">
<!--
* {
 padding:0;
 list-style:none;
 margin:0
}
body {
 background:#666;
}
.testbox {
 margin-top: 10px;
 margin-left: 10px;
 width: 200px;
}
.testbox ul li a {
 color: #FFF;
 font-size: 12px;
 text-decoration: none;
 background-color: #333;
 padding: 8px;
 margin: 4px;
 float: left;
 border: 1px solid #FFF;
 position: relative;
 width: 100px;
}
.testbox ul li a:hover {
 color: #000;
 font-size: 12px;
 text-decoration: none;
 background-color: #CCC;
 padding: 8px;
 float: left;
 position: relative;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #FFF;
 border-bottom-color: #FFF;
 border-left-color: #FFF;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #CCC;
 z-index: 2;
 width: 87px;
}
.testbox ul li .boxshow {
 background-color: #ccc;
 height: 330px;
 width: 300px;
 position: absolute;
 left: 118px;
 border: 1px solid #FFF;
 font-size: 12px;
 color: #000;
 padding: 10px;
 top: 14px;
 display: none;
 z-index: 1;
}
-->
</style>
</head>
<body>
<div class="testbox">
 <ul>
 <li><a href="#">测试分类标题1</a>
 <div class="boxshow">分类标题1的内容</div>
 </li>
 <li><a href="#">测试分类标题2</a>
 <div class="boxshow">分类标题2的内容</div>
 </li>
 <li><a href="#">测试分类标题3</a>
 <div class="boxshow">分类标题3的内容</div>
 </li>
 <li><a href="#">测试分类标题4</a>
 <div class="boxshow">分类标题4的内容</div>
 </li>
 <li><a href="#">测试分类标题5</a>
 <div class="boxshow">分类标题5的内容</div>
 </li>
 <li><a href="#">测试分类标题6</a>
 <div class="boxshow">分类标题6的内容</div>
 </li>
 <li><a href="#">测试分类标题7</a>
 <div class="boxshow">分类标题7的内容</div>
 </li>
 <li><a href="#">测试分类标题8</a>
 <div class="boxshow">分类标题8的内容</div>
 </li>
 <li><a href="#">测试分类标题9</a>
 <div class="boxshow">分类标题9的内容</div>
 </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
javascript实现日期时间动态显示示例代码
Sep 08 #Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 #Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 #Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 #Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python自动生产表情包
2017/03/17 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 画函数曲线示例
2019/12/04 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
大学秋游活动方案
2014/02/11 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
干部年终考核评语
2015/01/04 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
六年级作文之自救
2019/12/19 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Python实现聚类K-means算法详解
2022/07/15 Python