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 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
在antd Table中插入可编辑的单元格实例
Oct 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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
python获取list下标及其值的简单方法
2016/09/12 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
化工机械应届生求职信
2013/11/04 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
11月红领巾广播稿
2014/01/17 职场文书
出纳员岗位职责
2014/03/13 职场文书
公司承诺书怎么写
2014/05/24 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
跑操口号
2014/06/12 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
食品质检员岗位职责
2015/04/08 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
执行力心得体会范文
2016/01/11 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS