竖式菜单---纯CSS京东商城分类导航菜单代码

最新推荐文章于 2022-07-03 20:36:46 发布
最新推荐文章于 2022-07-03 20:36:46 发布
阅读量3.8k 收藏 3
点赞数
分类专栏： div+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysydao/article/details/9126341
版权

<!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=GBK" />
<title>纯CSS京东商城分类导航菜单代码</title>

<meta name="keywords" content="JS代码,js特效代码大全,jquery特效," />
<meta name="description" content="" />
<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(spring_06.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 a{
font:12px;
text-decoration:none;
color:#333333;
}
.my_left_category a:hover{
text-decoration:underline;
color:#ff3333;
}
.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(my_menubg.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.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(shadow_04.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(shadow_border.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(my_cat_sub_menu_dot.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>分类导航</h1>
  <div class="my_left_cat_list">
 <h2><a href="#">按网站类别</a></h2>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">企业建站</a></h3>
   <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>
    </ul>
   </div>
   </div>
  </div>
  </div>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">JS代码</a></h3>
  <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>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">网页特效-懒人建站</a></h3>
  <div class="h3_cat">
  <div class="shadow">
  <div class="shadow_border">
  <ul>
  <li><a href="#/JS">JS代码</a></li>
  <li><a href="#">源码下载</a></li>
  <li><a href="#">最新更新</a></li>
  <li><a href="#">下载排行</a></li>
  <li><a href="#">ASP</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">DELPHI</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <!-- again -->
  <h3><a href="#">网页特效</a></h3>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
  <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>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">网页设计欣赏</a></h3>
  <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="#">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="#">LOGO设计</a></li>
  <li><a href="#">网站设计</a></li>
  <li><a href="#">网站建设</a></li>
  <li><a href="#">SEO</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">网站程序</a></h3>
  <div class="h3_cat">
  <div class="shadow">
  <div class="shadow_border">
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">ASP</a></li>
  <li><a href="#">JSP</a></li>
  <li><a href="#">ASP.Net</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <div class="h2_cat_1" οnmοuseοver="this.className='h2_cat_1 active_cat'" οnmοuseοut="this.className='h2_cat_1'">
  <h3><a href="#">其他网站</a></h3>
  </div>
  <!-- again -->
 <h2><a href="#">按价格选货</a></h2>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">低端价位</a></h3>
  <div class="h3_cat">
  <div class="shadow">
  <div class="shadow_border">
  <ul>
  <li><a href="#">50元以下</a></li>
  <li><a href="#">50-100元</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
  <h3><a href="#">中高端价位</a></h3>
  <div class="h3_cat">
  <div class="shadow">
  <div class="shadow_border">
  <ul>
  <li><a href="#">100-150元</a></li>
  <li><a href="#">150-200元</a></li>
  <li><a href="#">200-300元</a></li>
  <li><a href="#">300元以上</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>

 <h2><a href="#">JS代码</a></h2>
 <h2><a href="#">网页特效</a></h2>

  </div>
</div>


</body>
</html>

                                                                              

               

养有道
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东商城分类导航
03-08
纯CSS实现京东商城分类导航，效果100%与京东的一模一样，想要资源的赶紧下载！
京东分类导航html
03-25
类似淘宝，京东左侧菜单分类 悬浮导航，二级导航也可以支持最右侧图片推荐。静态html,juqery实现。功能移植快。
CSS竖式导航条（一）.rar
06-08
div+CSS竖式导航条,兼容ie678
HTML竖排菜单制作
11-01
HTML竖排菜单制作，美观的竖排菜单，制作竖排菜单时可能用得到
仿京东商品分类导航
rong2073868516的博客
03-09 1329
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。 我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的， 所以它...
cssplay实用css代码精选-特别的竖型菜单
06-06
本资源"cssplay实用css代码精选-特别的竖型菜单"聚焦于如何利用CSS创建独特且实用的垂直导航菜单，这对于提升网站用户体验至关重要。 首先，我们要理解竖型菜单的布局方式。在传统的网页设计中，菜单通常水平放置在...
纯CSS实现的竖向导航菜单
09-05
纯CSS实现的竖向导航菜单是一种常见的网页设计技术，它主要依赖于CSS（层叠样式表）来控制页面元素的布局和样式，而非JavaScript或其他编程语言。这种菜单在网页上通常用于提供网站的主要导航选项，使得用户能够方便...
漂亮的CSS二级竖向导航菜单
06-06
本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...
jquery下拉竖导航菜单代码
06-06
本教程将深入探讨如何使用jQuery实现一个灵活、可自定义的竖向二级下拉导航菜单。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，使得创建这种动态效果变得更为...
jquery下拉竖导航菜单代码.zip
07-04
"jQuery下拉竖导航菜单代码"是一个实现此类功能的代码示例，它利用JavaScript库jQuery来创建一个动态的、响应式的垂直导航菜单，具有下拉效果。这个压缩包包含了实现这一功能所需的所有文件，包括HTML、CSS样式表...
精美的京东商城商品分类导航菜单代码
11-21
精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码
京东装修导航代码
05-07
京东装修必备导航 完美交互 实现鼠标指向变幻 增加客户点击率
jquery 京东左侧导航代码
11-07
jquery 京东左侧导航 鼠标经过右侧出现弹出层，
京东页面JS效果实现，js实现导航条控制，很完整
03-26
京东页面JS效果实现，js实现导航条控制，很完整，跟京东页面的效果一模一样。
京东丶天猫商品导航栏(源码)
11-27
京东丶天猫商品导航栏(源码)
京东导航条
weixin_49881997的博客
09-08 368
京东导航条代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="icon" type="image/x-icon" href="https://www.jd.com/favicon.ico"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awe
京东网站顶部导航条 （练习） HTML+CSS
豆子的博客
07-03 748
京东网站顶部导航条 （练习） css+html
css作业：京东导航条
abc630727719的博客
03-23 295
目标： html源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
京东网页端顶部导航HTML代码
ygz10483903的博客
01-31 7167
京东网页端顶部导航样式： 要实现的功能样式如下： 以下是代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东购物头部代码&lt...
ant desgin vue 中a-menu 菜单vertical模式去掉右边的竖线
最新发布
05-31
在上面的代码中，我们给 `a-menu` 组件添加了一个 `custom-menu` 类名，并使用 CSS 选择器 `.custom-menu.ant-menu-vertical .ant-menu-item::after` 来选择菜单项后面的竖线元素，并将其 `border-right` 样式设置为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值