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

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

主要介绍了jQuery简单实现仿京东商城的左侧菜单效果代码,通过简单的jQuery鼠标事件及元素动态变换实现样

式动态切换功能,非常简单实用,需要的朋友可以参考下

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

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

格的菜单。

运行效果截图如下：

在线演示地址如下：

<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;

.testbox {

margin-top: 10px;

margin-left: 10px;

width: 200px;

}

.testbox ul li a {

color: #FFF;

font-size: 12px;

text-decoration: none;

background-color: #333;

}

.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-color: #FFF;

border-left-color: #FFF;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #CCC;

z-index: 2;