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 解疑
Nov 11 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Vue中保存用户登录状态实例代码
Jun 07 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JavaScript文档加载模式以及元素获取
Jul 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery的三种$()
2009/12/30 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Mac下安装vue
2018/04/11 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
政风行风评议工作总结
2014/10/21 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android