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方法的具体实现
Jul 31 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解http访问解析流程原理
2017/10/18 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python自定义线程池实现方法分析
2018/02/07 Python
wxPython实现列表增删改查功能
2019/11/19 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
高中生期末评语
2014/01/28 职场文书
运动会宣传口号
2014/06/09 职场文书
大学生读书笔记范文
2015/07/01 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
导游词之河北邯郸
2019/09/12 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js