很多朋友在制作網(wǎng)站時往往想要將網(wǎng)站的導(dǎo)航做成中英文兩種語言的,但是直接把兩種文案往上放效果出來又不好看,那么是否存在更好的解決方案呢?
答案就在今天的小教程里面,我們可以使用一串小代碼實現(xiàn)翻轉(zhuǎn)導(dǎo)航的效果,實際展示如下:
下面是我們的詳細教程,首先我們可以在導(dǎo)航組件下面新加一個代碼組件,并把效果代碼放置進去:
? ? .zz-nav .zz-menu .zz-menu-item .zz-menu-item__title>span:after{? ? ? font-style: normal;? ? ? font-family: Georgia;? ? ? padding-bottom: 2px;? ? ? border-bottom: 2px solid #762813;? ? ? text-align: center;.zz-nav .zz-menu .zz-menu-item:nth-child(2) .zz-menu-item__title>span:after{.zz-nav .zz-menu .zz-menu-item:nth-child(3) .zz-menu-item__title>span:after{? ? ? content: 'ONLINE STORE';.zz-nav .zz-menu .zz-menu-item:nth-child(4) .zz-menu-item__title>span:after{.zz-nav .zz-menu .zz-menu-item:nth-child(5) .zz-menu-item__title>span:after{? ? ? ? content: 'CONTACT US';.zz-nav .zz-menu .zz-menu-item:nth-child(6) .zz-menu-item__title>span:after{? ? ? ? ?content: 'INVITE BITS';.zz-nav .zz-menu-item .menu-link{.zz-nav .zz-menu-item .zz-menu-item__title{? ? ?transition:transform 0.3s;.zz-nav .zz-menu-item .zz-menu-item__title>span{? ? ? transition:transform 0.3s;.zz-nav .zz-menu-item:hover .zz-menu-item__title>span{? ? ? transform: translateY(-50%);代碼組件添加完成以后,我們需要點擊導(dǎo)航組件,給導(dǎo)航組件添加一個自定義class:zz-nav,就可以讓代碼生效啦,操作如下:
PS:上述代碼中紅色背景部分為英文導(dǎo)航以及其下劃線的顏色,可以修改顏色色號,藍色背景部分為英文導(dǎo)航顯示的單詞,同樣可以直接在代碼中進行修改。