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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
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
php 设计模式之 单例模式
2008/12/19 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python多进程multiprocessing用法实例分析
2017/08/18 Python
详解Python自建logging模块
2018/01/29 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Django中create和save方法的不同
2019/08/13 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python3中sys.argv的实例用法
2020/04/24 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
自我鉴定总结
2014/03/24 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
nginx共享内存的机制详解
2022/03/21 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android