使用標籤做出多元化的導航效果

功能作用

  • 讓網站導航內容更多元豐富化,突破以往只能顯示文字的導航方式。

實現效果

  • 鼠標移到對應的導航,下方顯示不同佈局的內容

一、添加標籤模塊(選擇風格6,風格3以及圖標標籤這三種樣式)

  • 路徑:編輯頁面——模塊——基礎——標籤模塊 (以風格6爲例)

二、樣式設置:

  • 內容展示:勾選擇內容懸浮:作爲導航樣式使用,需勾選標籤內容會默認隱藏,鼠標移入顯示的效果
  • 調整區域:標籤內容區編輯顯示的區域

三、標籤內容區佈局設置

  • 設置4S服務下方內容區爲例,鼠標點擊4S會出現對應標籤內容區,移到下面內容區的右側齒輪,分欄設置。

  • 設置選擇兩二列分欄,佈局可按實際需求設置。

四、把標籤內容放到對應佈局

  • 再拖動兩欄之間的豎線來調整兩邊所佔的寬度比例到合適

五、最後其它標籤的佈局同理,分別對應設置,及放置對應顯示的模塊即可。

常見問題:

  1. 問:爲什麼選擇了編輯區爲全屏也是隻有分欄的寬試 答: 標籤模塊不要放到分欄裏面,把標籤模塊拖到內容區就可以顯示全屏
  2. 問:爲什麼平板及手機不顯示對應設置好的樣式? 答:標籤的導航樣式只支持PC端,手機請設置手機導航