Discuz!X3.2(二級導航)導航下拉選單樣式修改?

真個針對的是Discuz!X3.2導航滑鼠滑過出現下拉選單的經驗,也就是出現二級導航。而今天程龍博將分享系統自帶的下拉效果和樣式修改!可能你是新站長,可能你還在網矇頭去找那些亂七八糟的外掛,或者想自己新增效果,但是都不能出現想要的效果,那就快了學習一下吧!如果感覺不錯記得給程龍博投票或者關注哦!

工具/原料

安裝好的Discuz!X3.2網站

懂得原始碼和後臺更改

方法/步驟

首先我們先來確定一下要做到什麼樣才能到達自己想要的效果,而在修改之前我們先來看一下目標吧!這樣方便接下來的修改:

Discuz!X3.2(二級導航)導航下拉選單樣式修改

想要看到效果首先就是現在後臺新增好一級欄目和二級欄目,這樣做出更改以後才能看到效果。開啟後臺---登入---選擇左上方介面----導航設定---新增主導航---新增二級導航

Discuz!X3.2(二級導航)導航下拉選單樣式修改

Discuz!X3.2(二級導航)導航下拉選單樣式修改

最終的效果就是新增一個主導航然後再在主導航裡新增兩三個二級導航,這樣在你接下來的修改才能看到明顯的效果。

Discuz!X3.2(二級導航)導航下拉選單樣式修改

這一步就是設定二級導航的樣式,也就是圖片的箭頭所指的位置,這裡可設定成1、選單樣式,2、橫排樣式,兩種效果,這兩種效果具體什麼樣的我就不說了,在這主要是圖片中框中的,這裡最好有連結,加上鍊接後樣式檔案中的a才能起到相應的效果:

Discuz!X3.2(二級導航)導航下拉選單樣式修改

做完第四步後更新一下快取,到前臺重新整理一下就能看到效果了。但是你很可能選擇橫排發現沒效果,但是不用擔心,這個問題你可以去原始碼中實現,找到common.css檔案(圖片中已經顯示中去那些資料夾裡找)

Discuz!X3.2(二級導航)導航下拉選單樣式修改

然後用DW開啟檔案(如果你不知道這個軟體就用記事本開啟也行),用查詢工具找到 .p_pop li 然後在後面的括號內加上: float:left; border-right:1px solid #666; padding-left:5px; padding-right:5px;

Discuz!X3.2(二級導航)導航下拉選單樣式修改

做到這一步基本上就完成了,如果你還想要加一下自己想要的效果的話可以在圖片中的程式碼中更改,絕對能達到你想要的效果的(前臺你懂那些程式碼)。

Discuz!X3.2(二級導航)導航下拉選單樣式修改

注意事項

程式碼的新增和更改要注意細節

做修改之前記得做備份,防止無法挽回

相關問題答案