HTML5自助建站下怎么設置產品分類導航

時間: 2017-02-17 11:02:14 點擊數: 32706 來源: 耐(nai)思智(zhi)慧

當我們的商城網站產品比較多的時候，為了讓用戶快速找到想要的分類，錨點定位已經不夠用了，我們就需要為商城網站添加產品分類導航。像京東商城這樣的產品分類導航，借助建站寶盒V9，毫無代碼基礎的情況下也能做。

在京東的產品分類導航中，主要分為左側主欄目大類，右側擴展二級欄目，再到詳細的類別分類三級欄目，右側還除了了品牌的廣告欄。對比建站寶盒V9模板網站的產品分類導航效果：

要做一個這樣的(de)產品分類(lei)導航，其實很簡單。小耐今天(tian)給(gei)大家分享(xiang)幾個簡單步驟(zou)，看一遍就(jiu)能自己動手做！

操(cao)作過程(cheng)：

1、添(tian)加模塊(kuai)>產(chan)品(pin)模塊(kuai)>產(chan)品(pin)分類(lei)，這里有(you)很多風格可(ke)以選擇，小耐選擇第一(yi)種(zhong)。

直接把(ba)模(mo)塊拖(tuo)拽出來(lai)。大家(jia)拖(tuo)出來(lai)的效果(guo)可能(neng)是只(zhi)看(kan)(kan)到左(zuo)側橙色部分，我(wo)們(men)需要橫(heng)向和縱向拉伸(shen)，因為系統默認模(mo)塊是縮略顯示(shi)，需要拉伸(shen)后才能(neng)看(kan)(kan)到整體(ti)效果(guo)。

2、雙擊模(mo)塊(kuai)，在屬性框中可以看(kan)到(dao)勾選的產(chan)品分(fen)類(lei)，這些(xie)就是要(yao)在分(fen)類(lei)導(dao)航中顯(xian)示的內(nei)容。

這(zhe)里的設(she)置需要在系(xi)統(tong)設(she)置中的產品系(xi)統(tong)下進行(xing)。

比如想在手機數碼主(zhu)欄(lan)目(mu)(mu)下添加一(yi)個新(xin)二級欄(lan)目(mu)(mu)：品(pin)牌手機。選(xuan)擇添加產(chan)品(pin)>添加分類，設置一(yi)個“品(pin)牌手機”分類，并把(ba)上級分類選(xuan)為最頂(ding)級的“手機/運營商(shang)/數碼”。

品牌(pai)手(shou)機(ji)欄目下(xia)若(ruo)要(yao)新增多個品牌(pai)分類(lei)，選(xuan)擇添(tian)加產品>添(tian)加分類(lei)，設置(zhi)一個“華為”分類(lei)，并把上(shang)級分類(lei)選(xuan)為最(zui)頂級的“品牌(pai)手(shou)機(ji)”。

這(zhe)時候可以(yi)順便把(ba)產品的(de)具體信息補(bu)充完整，都是直接上傳圖(tu)片、添加(jia)文字的(de)簡單操作(zuo)。

3、所有分類添加完(wan)成后，我們可(ke)以(yi)在產品(pin)(pin)管理>產品(pin)(pin)分類下查(cha)看我們已經設置好的欄目。

回到網站編輯(ji)頁面(mian)，可(ke)以發(fa)現產品分類已經自(zi)動展現了新增的內容。

4、這時候，如果不喜歡目前的展示風格，可以直接(jie)在(zai)屬性框中切(qie)換樣式，已經(jing)修改的產品分類不會改變。

5、下圖(tu)的(de)橫向展示怎么(me)設置呢？在屬性框中(zhong)的(de)類別屬性中(zhong)開啟分(fen)類主菜單內容顯示，可(ke)以(yi)添加8個選項。

小(xiao)耐新增了(le)三個(ge)，可(ke)以(yi)對選項設置頁(ye)面(mian)跳轉(zhuan)。刷新頁(ye)面(mian)預覽即可(ke)看到效果。

6、右(you)側滾(gun)動廣告欄怎么(me)設置？同樣(yang)在(zai)屬(shu)性框的類(lei)別屬(shu)性中開啟右(you)側廣告位。選擇自定義，自由上(shang)傳圖片，設置跳轉。

7、刷新后(hou)預覽即可顯示最終效果。

由于(yu)建站(zhan)(zhan)寶盒(he)是H5響(xiang)應(ying)式建站(zhan)(zhan)，在電腦站(zhan)(zhan)頁面設置了分類導航后，手(shou)機站(zhan)(zhan)無需重(zhong)復設置，預(yu)覽(lan)手(shou)機站(zhan)(zhan)的(de)時候(hou)我(wo)們(men)會看到這樣一個按(an)鈕：