jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

2020-12-13 04:07

阅读:292

标签:style   blog   class   c   code   java   

有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图:

soscw.com,搜素材

我们也可以到这里来查看这款菜单的DEMO演示。

接下来还是分析一下源代码,源码由HTML、CSS和jQuery组成,先来看看HTML,东西很多,但结构非常简单:

soscw.com,搜素材soscw.com,搜素材
div class="sidebar">
  div class="sidebar_top sidebar_top_tc">全部产品分类div>
  div class="sidebar_con">
    dl class="sidebar_item">
      dt>i class="sidebar_item_icon01">i>span>机器设备span>dt>
      dd>
        h3 class="">a href="#">通用机械设备a>h3>s>s> 
        div class="sidebar_popup dis1" style="display: none; ">
          div class="sidebar_popup_class clearfix">
            div class="sidebar_popup_item"> strong>a href="#">泵与阀门a>strong>
              p>span class="linesbg">a href="#">真空泵a>span>span class="linesbg">a href="#">离心泵a>span>span class="linesbg">a href="#">计量泵a>span>span class="linesbg">a href="#">水泵a>span>span class="linesbg">a href="#">油泵a>span>span class="linesbg">a href="#">阀门a>span>span class="linesbg">a href="#">球阀a>span>span class="linesbg">a href="#">安全阀a>span>span class="linesbg">a href="#">电磁阀a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">机床a>strong>
              p>span class="linesbg">a href="#">数控机床a>span>span class="linesbg">a href="#">金属切削机床a>span>span class="linesbg">a href="#">车床a>span>span class="linesbg">a href="#">磨床a>span>span class="linesbg">a href="#">锻压机床a>span>span class="linesbg">a href="#">特种加工机床a>span>span class="linesbg">a href="#">机床附件a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">真空a>a href="#">风机设备a>strong>
              p>span class="linesbg">a href="#">真空获取与应用设备a>span>span class="linesbg">a href="#">真空泵a>span>span class="linesbg">a href="#">真空镀膜机a>span>span class="linesbg">a href="#">风机设备a>span>span class="linesbg">a href="#">空气压缩机a>span>span class="linesbg">a href="#">风幕机a>span>span class="linesbg">a href="#">鼓风机a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">粉碎a>a href="#">过滤筛分设备a>strong>
              p>span class="linesbg">a href="#">粉碎设备、粉碎机a>span>span class="linesbg">a href="#">破碎机a>span>span class="linesbg">a href="#">砂磨机a>span>span class="linesbg">a href="#">过滤筛分设备a>span>span class="linesbg">a href="#">过滤机a>span>span class="linesbg">a href="#">离心机a>span>span class="linesbg">a href="#">压滤机a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">加热、传热设备a>strong>
              p>span class="linesbg">a href="#">锅炉与原动机a>span>span class="linesbg">a href="#">锅炉a>span>span class="linesbg">a href="#">内燃机a>span>span class="linesbg">a href="#">汽轮机a>span>span class="linesbg">a href="#">传热设备a>span>span class="linesbg">a href="#">冷凝器a>span>span class="linesbg">a href="#">换热器a>span>span class="linesbg">a href="#">热处理设备a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">分离a>a href="#">混合设备a>strong>
              p>span class="linesbg">a href="#">分离设备a>span>span class="linesbg">a href="#">浓缩机a>span>span class="linesbg">a href="#">分离器a>span>span class="linesbg">a href="#">蒸发器a>span>span class="linesbg">a href="#">混合设备a>span>span class="linesbg">a href="#">搅拌机a>span>span class="linesbg">a href="#">混合机a>span>span class="linesbg">a href="#">分散机a>span>p>
            div>
            div class="sidebar_popup_item nobg"> strong>a href="#">包装机械a>strong>
              p>span class="linesbg">a href="#">灌装机a>span>span class="linesbg">a href="#">封口机a>span>span class="linesbg">a href="#">贴标机a>span>span class="linesbg">a href="#">集装机a>span>span class="linesbg">a href="#">喷码机a>span>span class="linesbg">a href="#">打号机/线号机a>span>span class="linesbg">a href="#">植绒机a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item nobg"> strong>a href="#">其它a>strong>
              p>span class="linesbg">a href="#">制冷设备a>span>span class="linesbg">a href="#">干燥设备a>span>span class="linesbg">a href="#">焊接与切割设备a>span>span class="linesbg">a href="#">储运设备a>span>span class="linesbg">a href="#">表面处理与涂装设备a>span>span class="more">a href="#">更多a>span>p>
            div>
          div>
          div class="sidebar_popup_all">a href="#">span class="linesbg">查看全部通用机械设备span>a>div>
        div>
      dd>
      dd>
        h3 class="">a href="#">行业专用设备a>h3>
        s>s> 
        
        div class="sidebar_popup dis2" style="display: none; ">
          div class="sidebar_popup_class clearfix">
            div class="sidebar_popup_item"> strong>a href="#">工程机械a>strong>
              p>span class="linesbg">a href="#">起重机械a>span>span class="linesbg">a href="#">装修机械a>span>span class="linesbg">a href="#">混凝土机械a>span>span class="linesbg">a href="#">钢筋加工机械a>span>span class="linesbg">a href="#">建材机械配件a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">冶金、石油、矿业机械a>strong>
              p>span class="linesbg">a href="#">炼铁设备a>span>span class="linesbg">a href="#">采掘设备a>span>span class="linesbg">a href="#">粉碎设备a>span>span class="linesbg">a href="#">井架a>span>span class="linesbg">a href="#">钻井修井设备a>span>span class="linesbg">a href="#">地质勘查设备a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">塑料橡胶机械a>strong>
              p>span class="linesbg">a href="#">注塑机a>span>span class="linesbg">a href="#">压塑机a>span>span class="linesbg">a href="#">吹塑机a>span>span class="linesbg">a href="#">吸塑机a>span>span class="linesbg">a href="#">轮胎生产机械a>span>span class="linesbg">a href="#">切胶机a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">汽保、维修专用设备a>strong>
              p>span class="linesbg">a href="#">充气机a>span>span class="linesbg">a href="#">补胎机a>span>span class="linesbg">a href="#">缓冲器a>span>span class="linesbg">a href="#">泡沫机a>span>span class="linesbg">a href="#">抛光打蜡机a>span>span class="more">a href="#">更多a>span>p>
            div>
            div class="sidebar_popup_item"> strong>a href="#">服装纺织设备a>strong>
              


评论


亲,登录后才可以留言!