2024年11月淘宝导航栏如何变成全屏(淘宝店招导航装修技巧)

发布时间:

  ⑴店铺装修其中比较关键的应该算是店招和导航了吧。米色思索了半天,也没确定好该如何对这篇教程的内容分块。为了方便就按照终端划分吧。

  ⑵店招:没什么好说的,在装修后台,我们只能替换店铺店招背景图,建议尺寸px*px

  ⑶因为手机端太过简单,这里就不啰嗦了。重点说下电脑端店招和自定义导航的事情。

  ⑷默认的尺寸,只是淘宝建议的尺寸(宽度为像素,高度建议不超过像素,否则导航显示可能异常

  ⑸很多朋友经常问,怎么在店铺实现全屏店招。其实这里的全屏需要分种情况:

  ⑹注意店铺店招和导航的尺寸不是固定就那么大,你可以随意设置高度,甚至是你只用店招模块或者导航模块都可以。

  ⑺这里说的自定义导航是相对于默认导航来说的。因为有些人不懂代码,修改不了默认导航,所以只能通过自定义导航来实现效果了。(注意:自定义导航代码,只能放店招模块里面

  ⑻关于自定义导航有下面几个问题:

  ⑼-店铺默认情况下,店招里面的内容,如果超过店招模块的范围会自动隐藏不显示

  ⑽换句话说就是你自定义做好的导航效果,放店招模块后,超过px区域就会隐藏不显示。

  ⑾自定义导航,一般包含部分

  ⑿-导航条(如果不懂代码编写的话,可以使用PS+DW来制作导航条

  ⒀-鼠标经过弹出的二级分类

  ⒁要想实现鼠标经过导航条上面的分类弹出二级分类,我们就需要用到淘宝WIDGET组件,弹出层。

  ⒂首先我们来一个简单的弹出层代码来试试效果

  ⒃当我们把上面代码全部放进自定义店招,源码模式下的话会发现,弹出的内容,没有显示,为什么呢?因为弹出的内容在店招的px区域外,所以隐藏起来了看不到。

  ⒄那么怎么才能显示出来呢?

  ⒅我们只需要做一个简单的操作即可,就是把上面【自定义导航】代码放店招自定义里面。将弹出内容部分代码,放导航下面的另一个自定义模块里面。就会发现鼠标经过导航弹出的内容就显示了。

  ⒆但是需要注意,尽量不要把弹出内容部分的代码,单独放到一个自定义模块里面,不然到时候会发现自定义模块消失看不到了,怎么解决呢?

  ⒇很简单,把弹出的代码,放到一个已经有内容的自定义模块,源码模式上面就可以

  ⒈如果需要其他页面也弹出来,就需要在其他页面再把弹出内容代码放进去自定义模块

  ⒉-自定义店招的优劣对比

  ⒊【店铺默认导航】:

  ⒋优势:可以通过CSS代码,将导航条修改成任意你想要的效果。并且还能做CSS特效。还不需要那么麻烦手动添加分类,自动就会显示店铺分类。并且所有页面都可以弹出来。

  ⒌劣势:需要一定代码基础,才能修改导航实现想要的效果

  ⒍【自定义导航】:

  ⒎优势:导航条自定义成都更高,比如想在导航条上面做一个搜索框等。相对修改默认导航,某种意义说这个对代码要求更低点

  ⒏劣势:没办法所有页面都弹出。(不过也不需要担心,进入装修页面,将弹出部分的代码,放到详情页的一个自定义模块里面即可。而且店铺没有CSS权限的话,很难实现CSS特效。

  ⒐至于是想用默认导航还是自定义导航,看个人情况选择即可。

  ⒑因为内容比较多,详细的装修方法没有说,只是说了一些有点重要的技巧,以后有空再发布一些详细的装修教程。大家关注公众号,及时获取教程。