實現需求是：當處于某個分類下，或者在內容詳情頁時，上一級分類及一級分類，所在導航的分類要實現自動高亮，有點類似當前位置，對用戶起到提示作用，告訴用戶當前瀏覽的是哪一個分類，在網站的什么位置。同時導航是響應式的，對于PC和移動端能夠自適應；所以使用了bootstrap 4.4和結合dedecms自動添加current的功能，之前分享過一篇子欄目的技術文章，本次是導航欄的全部代碼，可以直接使用哦。
如上圖所示，此時在內容詳情頁，對應的一級分類導航也處于高亮狀態，這個對用戶體驗很好，一眼就可以看到自己在網站的哪一個分類下面。如果用戶的當前位置在一級分類下面的某一個二級分類也是一樣的效果。
一、HTML響應式代碼
我的這端代碼是整個導航，只調用了dedecms系統的一級分類，可以放在head.htm中直接用，為了不太會dedecms系統標簽的使用，所以全部都貼出來吧。
1.
2.
{dede:global.cfg_webname/}
3.
4.
5.
6.{dede:channel type='top' row='10' currentstyle="
7.
~typename~
"}
8.
[field:typename/]
9.{/dede:channel}
10.
11.
12.
13.
14.
15.搜索
16.
其中第5~9行是dedecms的一級分類調用標簽，其他的是bootstrap導航代碼，如使用的不是dedecms系統，只要把5~9行替換成對應的數據調用即可。
二、自定義css代碼
因為默認bootstrap沒有激活狀態下顏色等直接可用的代碼，需要自定義寫幾行css，下面是自定義樣式代碼，先將其拷貝到Dreamweaver等編輯器里面格式化一下，看起來就會很清爽了。
a.@media (min-width: 992px) and (max-width:1200px) {.navbar-collapse > .form-inline > .input-group > .form-control {width: 9rem ！important}}
b.@media (max-width: 992px) {.navbar-collapse .mr-auto{margin-top: .5rem}.navbar-collapse .mr-auto li:nth-of-type(2n-1){background: #eee;}}
c.navbar-collapse .mr-auto li a{color: rgba(0, 0, 0, 0.9);display: block;padding: 0.5rem 0.5rem;}
d.navbar-collapse .mr-auto li a:hover,.navbar-collapse .mr-auto li a:active,.navbar-collapse .mr-auto li a:focus{color: #fff;background: #c1962f;text-decoration: none;border-radius: .2rem;}
f.navbar-collapse .mr-auto li > .current{background: #af8a33;color: #fff;border-radius: .2rem;}
bootstrap版本是4.4，直接復制使用的話注意不能使低于此版本，默認實現了移動端的樣式。
錄制了一個gif演示，因為我的首頁模板還沒有做出來，當前只是完成了部分欄目和詳情頁的設計制作，移動端在后面，處于欄目的分類下時也是有效果的，具體可以拷貝代碼在本地測試。
本文由岑輝宇博客整理發布，微信搜索微信公眾號“岑輝宇 ”可查看更多內容。
