<!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=utf8" />
<title></title>
<style type="text/css">
.my_left_category{
width:150px;
font-size:12px;
font-family:arial,sans-serif;
letter-spacing:2px;
}
.my_left_category h1{
background-image:url(http://www.webjx.com/files/100709/1_185326.gif);
height:20px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
padding-left:15px;
padding-top:8px;
margin:0px;
color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;
padding:3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .my_left_cat_list h2 a:hover {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
width:148px;
height:26px;
background-image:url(http://www.webjx.com/files/100709/1_185410.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(http://www.webjx.com/files/100709/1_185458.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
}
.my_left_category a:hover{
text-decoration:underline;
color:#ff3333;
}
.my_left_category h3{
margin:0px;
padding:0px;
height:26px;
font-size:12px;
font-weight:normal;
display:block;
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{ line-height:26px;}
.my_left_category .h3_cat{
display:none;
width:204px;
position:absolute;
left:123px;
margin-top:-26px;
cursor:auto;
}
.my_left_category .shadow{
position:inherit;
background:url(http://www.webjx.com/files/100709/1_185541.gif) left top;
width:204px;
}
.my_left_category .shadow_border{
position:inherit;
width:200px;
border:1px solid #959595; margin-top:1px;
border-left-width:0px;
background:url(http://www.webjx.com/files/100709/1_185622.gif) no-repeat 0px 21px;
background-color:#ffffff;
margin-bottom:3px
}
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
.my_left_category .shadow_border ul li {
list-style:none;
padding-left:10px;
background-image:url(http://www.webjx.com/files/100709/1_185704.gif);
background-repeat:no-repeat;
background-position:0px 8px;
float:left;
width:75px;
height:26px;
overflow:hidden;
letter-spacing:0px;
}
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
.my_left_category .active_cat h3 { font-weight:bold}
.my_left_category .active_cat h3 span{ display:none;}
.my_left_category .active_cat div{display:block;}
</style>
</head>
<body>
<div class="my_left_category">
<h1>Product</h1>
<div class="my_left_cat_list">
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
<h2><a href="#">企业建站</a></h2>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li><li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
京东左侧商品分类菜单就是一个典型的实例，它采用JavaScript（JS）技术实现了一个高效的、弹出式的导航菜单。这种菜单设计旨在为用户提供方便快捷的商品浏览方式，同时优化网站的可用性。本文将深入探讨这个菜单的...
在这个项目中，JS65可能是指一个特定的JavaScript库或者代码片段，用于创建京东左侧导航栏的效果。这个库可能是作者为了简化开发过程，将复杂的功能封装成易于理解和使用的API。 描述中提到“代码简单易用”，这...
【jQuery 京东左侧导航代码详解】 在Web开发中，创建交互性强、用户体验良好的导航菜单是一项重要的任务。"jQuery 京东左侧导航"就是一种常见的实现方式，它模仿了京东商城网站的左侧导航栏，通过鼠标悬停在导航项...
在电子商务网站设计中，用户体验是至关重要的因素之一，京东商城作为国内知名的电商平台，其左侧弹出式菜单的设计制作是提升用户交互体验的关键部分。本文将深入探讨这种设计模式的原理、实现方式以及优化策略。 ...
"京东页面JS效果实现，js实现导航条控制"这个主题聚焦于如何使用JavaScript来创建类似京东网站的导航条交互效果。下面将详细介绍这个知识点，并提供一个具体的实例——"360buyleftmenu_jb51net"。 1. **JavaScript...
标题“防京东左侧菜单”可能指的是一个针对京东网站左侧导航菜单的优化或屏蔽技术，可能是为了提高用户体验或者进行某种分析。在IT行业中，这可能涉及到前端开发、网页优化、用户行为分析等多个方面。 首先，我们...
在构建电商平台时，京东商城的左侧菜单效果是一个关键的用户体验设计元素。这个菜单不仅提供了商品分类导航，还可能包括搜索、筛选、用户中心等模块，有效地帮助用户在海量的商品中快速定位并找到所需。以下是对这个...
【标题】：“京东左边链接类似效果页面”是指在网页设计中仿照京东网站左侧导航栏的链接效果进行的实现。这种效果通常包括可展开/收起的菜单项、鼠标悬停时的高亮显示以及点击后跳转至相应页面等功能。这种设计模式...
【京东商城左侧弹出式菜单】是一个典型的网页交互设计，主要使用了JavaScript、jQuery和CSS技术来实现。在电商网站中，这样的菜单设计能够提供良好的用户体验，方便用户快速浏览和导航。下面将详细阐述这些技术在...
1. **JavaScript/jQuery**：京东左侧楼层滚动主要依赖于JavaScript或jQuery库来处理用户滚动事件。通过监听滚动条的变化，实时计算楼层的位置并进行平滑滚动。 2. **CSS3**：CSS3提供了许多动画效果，如`transition...
2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略） 分析图： 具体实现代码如下： jd_index.html <!doctype html>...
在“jQuery京东首页左侧菜单导航”这个主题中，我们将深入探讨如何利用jQuery技术来实现类似京东首页左侧那种动态、交互式的导航菜单。 首先，让我们了解京东首页左侧菜单的基本特点。这种菜单通常包含多个层级，...
总结来说，仿照京东左侧菜单创建右侧弹出菜单涉及HTML结构的规划、CSS样式的定义、JavaScript的交互增强，以及响应式设计的考虑。通过这些技术的综合运用，我们可以创造出一个既美观又实用的菜单系统，提升用户的...
该资源是一个用于创建类似京东商品左侧分类导航菜单的JavaScript特效代码。这个代码库基于jQuery库构建，旨在提供一种大气且用户友好的导航体验。在实际应用中，此导航菜单不仅能够展示不同类别的商品，还支持展开...
"仿京东商品左侧分类导航菜单JS特效代码"就是一个专注于这方面设计的项目，它旨在为用户提供直观且吸引力强的商品浏览体验。这个特效代码是基于jQuery库构建的，jQuery是一款广泛应用于前端开发的JavaScript库，以其...
标题提到的"很好用的JS左侧导航菜单，滑过显示，移开隐藏"是一种常见的交互设计模式，它利用JavaScript（JS）来实现动态效果，增强用户的浏览体验。这种设计通常被称为“悬停显示”或“滑过菜单”，它在鼠标悬停时...
如果使用JavaScript，文件名如`tao.js`（未在列表中给出）可能会包含这些交互逻辑，比如点击事件监听和DOM操作。 5. **图片资源**：`sshot-1.png`和`sshot-2.png`可能是展示菜单效果的截图，而`mallCategory.png`和...
本文将深入探讨如何使用JavaScript库jQuery来实现类似天猫、淘宝、京东等大型购物网站的这种功能。 首先，我们需要理解二级导航的基本结构。通常，一级分类显示在顶部，点击后会展开对应的二级分类。这种交互设计...
"懒人仿当前京东商城左侧二级导航"是一个项目，旨在复制京东商城的左侧二级导航栏的样式和功能，以便其他开发者可以轻松地在自己的电商平台上实现类似的设计。这个压缩包文件包含了实现这一功能所需的代码和资源。 ...