CSS3二級(jí)導(dǎo)航菜單制作步驟詳解

1、css3二級(jí)導(dǎo)航菜單制作步驟詳解假如想要實(shí)現(xiàn)網(wǎng)頁(yè)的二級(jí)導(dǎo)航，我們可以用法js技術(shù)，動(dòng)態(tài)的顯示和躲藏二級(jí)菜單，固然也可以用法css技術(shù)來實(shí)現(xiàn)。并且這里推舉用法css，由于其效率更高，更流暢。這里將介紹二級(jí)菜單的動(dòng)態(tài)顯示與躲藏。1結(jié)構(gòu)普通導(dǎo)航的主體我們主要是用法ulli標(biāo)簽首頁(yè)產(chǎn)品小程序微信企業(yè)站服務(wù)技術(shù)支持產(chǎn)品外包關(guān)于我們?nèi)瞬牌刚?qǐng)2布局導(dǎo)航的布局，因?yàn)樽釉匾S著父元素，所以對(duì)二級(jí)菜單選取定位布局。要想讓多個(gè)li在一行中顯示，那么就需要讓li舉行浮動(dòng)。bodymargin:0;font-size:14px;color:666ul,olmargin:0;padding:0;list-style:n

2、one;atext-decoration:none;color:666;/*一級(jí)導(dǎo)航*/*背景色*/ul.menu,ul.submenubackground-color:ededed;/*一級(jí)導(dǎo)航浮動(dòng)*/ul.menu:aftercontent:&39;&39;display:block;clear:both;ul.menu>lifloat:left;width:120px;line-height:3em;height:3em;text-align:center;cursor:pointer;/*二級(jí)導(dǎo)航項(xiàng)分割線*/ul.submenu/*默認(rèn)躲藏*/display:no

3、ne;ul.submenu>liborder-bottom:1pxsolidfff;/*內(nèi)容區(qū)*/.contentmin-height:800px;background-color:fff;3.二級(jí)菜單顯示特效光標(biāo)放到導(dǎo)航上，當(dāng)前元素背景色變深，字體色彩變淡。假如有二級(jí)菜單，顯示二級(jí)菜單為了實(shí)現(xiàn)上述兩個(gè)特效，我們可以利用偽類挑選器（:hover）來捕獲光標(biāo)懸浮的操作。并且用法偽類挑選器（:hover）來挑選到當(dāng)前菜單對(duì)應(yīng)的二級(jí)菜單利用如下css可以迅速實(shí)現(xiàn)該特效。/*選中特效*/ul.menu>li:hoverbackground-color:666;ul.menu>li:h

4、over>acolor:fff;ul.menu>li:hover>ul.submenudisplay:block;4.動(dòng)畫上述代碼中二級(jí)菜單的顯示是眨眼的。能否提供一個(gè)緩慢動(dòng)畫過渡的效果，固然也是沒問題。這里需要用法animation來舉行動(dòng)畫的配置，那么動(dòng)畫幀可以自己寫或者是尋求第三方代碼庫(kù)（animate.css）的支持。這里我將用法透亮度來實(shí)現(xiàn)這個(gè)淡入效果/*動(dòng)畫幀*/keyframesfadefromopacity:0;toopacity:1;/*基礎(chǔ)動(dòng)畫樣式*/.animatedanimation-duration:1s;animation-fill-mode:both;.fadeinanimation-name:fade;animation-direction:normal;動(dòng)畫定義好后，可以挺直將動(dòng)畫樣式引用到ul.submenu上，注重，假如用法的