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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • Python抓取京东图书评论数据

    京东图书评论有非常丰富的信息,这里面就包含了购买日期.书名.作者.好评.中评.差评等等.以购买日期为例,使用Python + Mysql的搭配进行实现,程序不大,才100行.相关的解释我都在程序里加注了: from selenium import webdriver from bs4 import BeautifulSoup import re import win32com.client import threading,time import MySQLdb def mydebug():  

  • Android仿京东首页画轴效果

    Android仿京东首页画轴效果

    记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关操作,刚开始看到这个效果,想法是动态的去改变一个ImageView的高度,基本效果也就出来了,不过滚动部分的内容,当时接触的也不是很多,只是看过一些大牛的博客,略微了解了一点,当时也忙着写项目,也就没去多想,前些天忽然想到这个效果,就想着实现一下,不过京东新版本好像去掉这个东西了,只能凭着自己的记忆来大概搞一下,也是对滑动这部分内容的一个小练习吧. 先看一下效果图

  • jquery 实现京东商城、凡客商城的图片放大效果

    jquery 实现京东商城、凡客商城的图片放大效果

    效果如下:看下我们的演示,"运行代码"后请刷新一次: JQzoom Demo div.notes{ font-size:12px; } div.notes a{ color:#990000; } $(function() { $(".jqzoom").jqzoom(); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 要实现这样的效果,只需要在需要这样效果的页面的区域加入: 复制代码 代码如下: <link rel="styles

  • python抓取京东价格分析京东商品价格走势

    复制代码 代码如下: from creepy import Crawlerfrom BeautifulSoup import BeautifulSoupimport urllib2import json class MyCrawler(Crawler):    def process_document(self, doc):        if doc.status == 200:            print '[%d] %s' % (doc.status, doc.url)       

  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • 基于JavaScript实现仿京东图片轮播效果

    js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • python抓取京东商城手机列表url实例代码

    复制代码 代码如下: #-*- coding: UTF-8 -*-'''Created on 2013-12-5 @author: good-temper''' import urllib2import bs4import time def getPage(urlStr):    '''                获取页面内容    '''    content = urllib2.urlopen(urlStr).read()    return content def getNextPag

  • java实现京东登陆示例分享

    复制代码 代码如下: package com.lkb.test; import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map; import org.apache.http.HttpResponse;import org.apache.http.client.ResponseHandler;import org.ap

  • java实现京东秒杀功能分享 京东秒杀软件

    简单介绍下功能 1.每隔一段时间(比如1分钟)在京东手机每日一秒杀页面提取产品(手机)链接. http://sale.360buy.com/act/8VTHFGr10CjMDyZ.html#01 2.根据提取到得产品链接给后台发送数据,以便获取产品价格,描述,折扣,库存(是否有货)等信息. 3.根据得到的信息,进行判断. 若符合条件自动调用浏览器(前提是chrome加入环境变量,或者改代码将浏览器.exe路径加入代码,修改程序)打开产品订购页面. 4.其实也就解决了一个问题:不用自己频繁的刷新网

随机推荐