淘宝店铺导航条(淘宝店铺装修导航设置)

跨境电商 2021-06-09 12:40:36

这个效果是作为案例演示的一个效果。然后放到了店铺里面,很多小伙伴看到觉得喜欢。

所以这里米色免费将源码分享出来。有喜欢的小伙伴可以自己去测试下。

一:效果演示

大家可以复制代码在店铺测试,注意代码里面有图片,需要换成你店铺的图片才可以。

可以先复制代码里面的图片在浏览器打开,保存到电脑上,然后上传到图片空间再替换到代码里面测试预览

二:源码分享

/*====整体导航====*/。皮肤盒bd .所有的猫。全是猫。链接,皮肤盒bd .菜单列表,皮肤盒bd .菜单列表。菜单,皮肤盒bd .菜单列表。链接,皮肤盒bd .菜单列表。菜单选择。链接标题{背景:透明;}。皮肤-盒子-BD { font-family :微软雅黑;背景: # c7a 462 width : 1200 pxpadding :0 360 px相对位置:左侧:-485像素;}。皮肤盒bd .所有的猫。全是猫。链接,皮肤盒bd .全是猫。标题,皮肤盒bd .菜单列表,皮肤盒bd .菜单列表。菜单,皮肤盒bd .菜单列表。链接,皮肤盒bd .菜单列表。菜单标题{ height:70px行高:70 px}。全卡特彼勒{ _ width : 125 px最大宽度: 125 px背景图片: URL(https://img。alicdn。com/imgextra/i3/675431384/tb2 qd4 ejcfjpufjsszhxxabuvxa _!675431384 .png);}。全是猫链接{ width: 85px}。皮肤盒bd .全是猫标题{ color: transparent}

/*====右侧分类导航====*/。皮肤盒bd .菜单列表{ float : right width : auto }。皮肤盒bd .菜单列表。菜单标题{背景图片: URL(https://img。alicdn。请访问www . analog.com/imgextra/i4/675431384/tb2 ex vtj 3r kufj y1zexxc。6 fxa _!675431384 .gif);背景-重复:不重复;背景-位置:-150像素50像素;color: # fff}。皮肤盒bd .菜单列表菜单。title :悬停{ background-position : left 50px;color: # 000}。皮肤盒bd .菜单列表。菜单,全是猫。链接{ border : 0;}

/*小图标-主要是配合导航效果,对图标位置做了调整*/。皮肤盒bd .全是猫。链接。弹出图标{ position : relative eleft : 60px }。皮肤盒bd .菜单列表。菜单。链接。弹出图标,皮肤盒bd .全是猫。链接popup-icon { margin-top : 31px;}。皮肤盒bd .菜单列表。菜单选择。链接标题{ color: # 000}。皮肤盒bd .菜单列表。菜单选择。链接标题{背景图片: URL(https://img。alicdn。请访问www . analog.com/imgextra/i4/675431384/tb2 ex vtj 3r kufj y1zexxc。6 fxa _!675431384 .gif);背景-重复:不重复;背景-位置:0-70px;}。皮肤盒bd .菜单列表。菜单选择:悬停。链接。标题{背景-位置:0 50px}

/*====导航弹出====*/。菜单弹出猫sub cat-hover { background : # 2f2f2f;}。菜单弹出猫。子猫-悬停。猫名,皮肤盒bd .弹出内容。猫树。卡特彼勒高清悬停. FST-cat-name { text-indent :17 px;}。皮肤盒bd .菜单列表。菜单选择。链接。标题,皮肤盒bd .菜单列表。菜单标题{ transit : all-easy-in-out。7s;-WebKit-transit :全易出。7s;}。tshop-pbsm-shop-nav-ch .菜单弹出猫。子猫-悬停,菜单弹出猫。子猫-悬停。猫名,皮肤盒bd .弹出内容。猫树。卡特彼勒高清悬停。皮肤盒bd .弹出内容。猫树。卡特彼勒高清悬停FST-cat-name { transit : all-easy-in-out。6s;-web kit-transit :所有进出方便。6s;}

三:使用说明

我店铺是基础版,所以用到天猫导航可能会有点改变,如果没有的话就忽视这条

为了方便小伙伴使用,特意把代码做了一些简单说明。这些说明可以直接复制到店铺,淘宝会自动过滤掉注释

代码中添加了图片,所以最好是先把图片传到你自己的图片空间替换掉,然后再测试效果

至于如何保存代码中的图,应该都会把。不会的话就复制图片地址下载或者在浏览器打开图片,右键保存图片

相关文章

热门文章

最近发表