域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)
實(shí)現(xiàn)需求是：當(dāng)處于某個(gè)分類(lèi)下，或者在內(nèi)容詳情頁(yè)時(shí)，上一級(jí)分類(lèi)及一級(jí)分類(lèi)，所在導(dǎo)航的分類(lèi)要實(shí)現(xiàn)自動(dòng)高亮，有點(diǎn)類(lèi)似當(dāng)前位置，對(duì)用戶(hù)起到提示作用，告訴用戶(hù)當(dāng)前瀏覽的是哪一個(gè)分類(lèi)，在網(wǎng)站的什么位置。同時(shí)導(dǎo)航是響應(yīng)式的，對(duì)于PC和移動(dòng)端能夠自適應(yīng)；所以使用了bootstrap 4.4和結(jié)合dedecms自動(dòng)添加current的功能，之前分享過(guò)一篇子欄目的技術(shù)文章，本次是導(dǎo)航欄的全部代碼，可以直接使用哦。
如上圖所示，此時(shí)在內(nèi)容詳情頁(yè)，對(duì)應(yīng)的一級(jí)分類(lèi)導(dǎo)航也處于高亮狀態(tài)，這個(gè)對(duì)用戶(hù)體驗(yàn)很好，一眼就可以看到自己在網(wǎng)站的哪一個(gè)分類(lèi)下面。如果用戶(hù)的當(dāng)前位置在一級(jí)分類(lèi)下面的某一個(gè)二級(jí)分類(lèi)也是一樣的效果。
一、HTML響應(yīng)式代碼
我的這端代碼是整個(gè)導(dǎo)航，只調(diào)用了dedecms系統(tǒng)的一級(jí)分類(lèi)，可以放在head.htm中直接用，為了不太會(huì)dedecms系統(tǒng)標(biāo)簽的使用，所以全部都貼出來(lái)吧。
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的一級(jí)分類(lèi)調(diào)用標(biāo)簽，其他的是bootstrap導(dǎo)航代碼，如使用的不是dedecms系統(tǒng)，只要把5~9行替換成對(duì)應(yīng)的數(shù)據(jù)調(diào)用即可。
二、自定義css代碼
因?yàn)槟J(rèn)bootstrap沒(méi)有激活狀態(tài)下顏色等直接可用的代碼，需要自定義寫(xiě)幾行css，下面是自定義樣式代碼，先將其拷貝到Dreamweaver等編輯器里面格式化一下，看起來(lái)就會(huì)很清爽了。
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，直接復(fù)制使用的話(huà)注意不能使低于此版本，默認(rèn)實(shí)現(xiàn)了移動(dòng)端的樣式。
錄制了一個(gè)gif演示，因?yàn)槲业氖醉?yè)模板還沒(méi)有做出來(lái)，當(dāng)前只是完成了部分欄目和詳情頁(yè)的設(shè)計(jì)制作，移動(dòng)端在后面，處于欄目的分類(lèi)下時(shí)也是有效果的，具體可以拷貝代碼在本地測(cè)試。
本文由岑輝宇博客整理發(fā)布，微信搜索微信公眾號(hào)“岑輝宇 ”可查看更多內(nèi)容。
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
