jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程
2020-12-13 04:07
标签:style blog class c code java 有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图: 我们也可以到这里来查看这款菜单的DEMO演示。 接下来还是分析一下源代码,源码由HTML、CSS和jQuery组成,先来看看HTML,东西很多,但结构非常简单: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>