HTML5自助建站下怎么设置产品分类导航

当我们的商城网站产品比较多的时候，为了让用户快速找到想要的分类，锚点定位已经不够用了，我们就需要为商城网站添加产品分类导航。像京东商城这样的产品分类导航，借助建站宝盒V9，毫无代码基础的情况下也能做。

在京东的产品分类导航中，主要分为左侧主栏目大类，右侧扩展二级栏目，再到详细的类别分类三级栏目，右侧还除了了品牌的广告栏。对比建站宝盒V9模板网站的产品分类导航效果：

要做一个这样的产品分类导航，其实很简单。小耐今天给大家分享几个简单步骤，看一遍就能自己动手做！

操作过程：

1、添加模块>产品模块>产品分类，这里有很多风格可以选择，小耐选择第一种。

直接把模块拖拽出来。大家拖出来的效果可能是只看到左侧橙色部分，我们需要横向和纵向拉伸，因为系统默认模块是缩略显示，需要拉伸后才能看到整体效果。

2、双击模块，在属性框中可以看到勾选的产品分类，这些就是要在分类导航中显示的内容。

这里的设置需要在系统设置中的产品系统下进行。

比如想在手机数码主栏目下添加一个新二级栏目：品牌手机。选择添加产品>添加分类，设置一个“品牌手机”分类，并把上级分类选为最顶级的“手机/运营商/数码”。

品牌手机栏目下若要新增多个品牌分类，选择添加产品>添加分类，设置一个“华为”分类，并把上级分类选为最顶级的“品牌手机”。

这时候可以顺便把产品的具体信息补充完整，都是直接上传图片、添加文字的简单操作。

3、所有分类添加完成后，我们可以在产品管理>产品分类下查看我们已经设置好的栏目。

回到网站编辑页面，可以发现产品分类已经自动展现了新增的内容。

4、这时候，如果不喜欢目前的展示风格，可以直接在属性框中切换样式，已经修改的产品分类不会改变。

5、下图的横向展示怎么设置呢？在属性框中的类别属性中开启分类主菜单内容显示，可以添加8个选项。

小耐新增了三个，可以对选项设置页面跳转。刷新页面预览即可看到效果。

6、右侧滚动广告栏怎么设置？同样在属性框的类别属性中开启右侧广告位。选择自定义，自由上传图片，设置跳转。

7、刷新后预览即可显示最终效果。

由于建站宝盒是H5响应式建站，在电脑站页面设置了分类导航后，手机站无需重复设置，预览手机站的时候我们会看到这样一个按钮：

点击后就是手机展示效果啦！

有没有很简单？一遍不会，看多几遍就能轻松设置啦！当然，有用户会觉得这样的设置还是有点麻烦，但和一个个代码敲出来相比，这已经是对小白最友好的设置办法了。想零基础做出精美商城网站的，不妨试试建站宝盒V9。

免费体验地址：http://www.iisp.com/special/v9special/index.php?s=yuqiuping

H5响应式建站宝盒V9线上发布会火热报名中，全程免费还有互动大奖，想深入了解建站宝盒V9的你千万不要错过！报名：http://www.iisp.com/video/?s=yuqiuping