二級(jí)導(dǎo)航、導(dǎo)航欄3D立體菜單案例，前端學(xué)習(xí)，CSS制作二級(jí)菜單欄

時(shí)間：2023-07-24 20:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 20:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

二級(jí)導(dǎo)航、導(dǎo)航欄3D立體菜單案例，前端學(xué)習(xí)，CSS制作二級(jí)菜單欄：導(dǎo)航欄下拉菜單、菜單欄是前端工程師常寫(xiě)的功能，在各種網(wǎng)站，電商網(wǎng)站逗游應(yīng)用。如何寫(xiě)出2級(jí)菜單，如何制作3D效果的菜單欄，請(qǐng)跟隨本文，帶你揭秘。

在通過(guò)reset.css初始化樣式，配合hover效果，來(lái)展示二級(jí)菜單或3D菜單。

一、二級(jí)菜單

網(wǎng)游二級(jí)菜單演示https://www.zhihu.com/video/1596840896850608128二級(jí)菜單通常是會(huì)用的是無(wú)序列表; li里面會(huì)繼續(xù)嵌套無(wú)序列表，已網(wǎng)游中的機(jī)能為例，以下是HTML結(jié)構(gòu)

<ul class="box"> <li>上路 <ul> <li>亞瑟</li> <li>項(xiàng)羽</li> <li>花木蘭</li> <li>鐘無(wú)艷</li> <li>夏侯惇</li> </ul> </li> <li>下路 <ul> <li>魯班七號(hào)</li> <li>狄仁杰</li> <li>李元芳</li> <li>百里守約</li> <li>后裔</li> </ul> </li> <li>中路 <ul> <li>安其拉</li> <li>小喬</li> <li>王昭君</li> <li>小妲己</li> <li>西施</li> </ul> </li> <li>輔助 <ul> <li>蔡文姬</li> <li>孫臏</li> <li>瑤妹</li> <li>桑啟</li> <li>明世隱</li> </ul> </li> <li>打野 <ul> <li>孫悟空</li> <li>李白</li> <li>韓信</li> <li>張飛</li> <li>菲</li> </ul> </li> </ul>下面一起看看CSS部分如何實(shí)現(xiàn)

.box{ width:500px; height:40px; background-color: yellow; /* 水平居中 */ margin:0 auto; }整個(gè)菜單欄命名為box，設(shè)置寬高，利用margin:0 auto實(shí)現(xiàn)水平居中

.box>li{ float: left; width:100px; height:40px; text-align: center; line-height: 40px; }一級(jí)菜單設(shè)置float：left實(shí)現(xiàn)橫向顯示，根據(jù)菜單項(xiàng)的數(shù)目，設(shè)置寬100px，高40px，再設(shè)置文本居中

.box>li>ul{ display: none; }以下為實(shí)現(xiàn)二級(jí)菜單的核心

當(dāng)鼠標(biāo)放在一級(jí)菜單時(shí)，一級(jí)菜單背景色變?yōu)閍qua色

.box>li:hover{ background-color: aqua; }當(dāng)鼠標(biāo)放在一級(jí)菜單時(shí)，二級(jí)菜單的ul默認(rèn)的情況下應(yīng)該:隱藏，通過(guò)display:none來(lái)實(shí)現(xiàn)

.box>li:hover ul{ display: block; background-color: cadetblue; }當(dāng)鼠標(biāo)劃過(guò)一級(jí)上面的li的時(shí)候讓li里面的ul（二級(jí)菜單）以cadetblue背景色顯示

注意：通過(guò)以上兩步代碼，不難理解hover的效果：兩種情況下細(xì)微的效果差別，也就是使用hover時(shí)：你的鼠標(biāo)滑過(guò)誰(shuí)，誰(shuí)要有效果，考慮兩個(gè)問(wèn)題。

.box>li>ul>li:hover{ background-color: orange; }當(dāng)鼠標(biāo)滑過(guò)某一個(gè)二級(jí)菜單時(shí)，某個(gè)二級(jí)菜單的背景色變?yōu)閛range

補(bǔ)充：
活動(dòng)鏈接偽類:四個(gè)
:link======鼠標(biāo)訪問(wèn)前
:visited===鼠標(biāo)訪問(wèn)后
:hover=====鼠標(biāo)懸停時(shí)
:active====鼠標(biāo)激活瞬間
如果一同使用的時(shí)候,經(jīng)常應(yīng)用在a標(biāo)簽上面
但是hover會(huì)經(jīng)常單獨(dú)行動(dòng)使用:用來(lái)做劃過(guò)效果

需要完整代碼的，請(qǐng)咨詢我或關(guān)注我私聊發(fā)送。

二、3D二級(jí)菜單

3D菜單演示https://www.zhihu.com/video/1596844324838359040HTML代碼和上面是一樣的，這里就不多說(shuō)了

<ul class="box"> <li>上路 <ul> <li><a>亞瑟</a></li> <li><a>項(xiàng)羽</a></li> <li><a>花木蘭</a></li> <li><a>鐘無(wú)艷</a></li> <li><a>夏侯惇</a></li> </ul> </li> <li>下路 <ul> <li>魯班七號(hào)</li> <li>狄仁杰</li> <li>李元芳</li> <li>百里守約</li> <li>后裔</li> </ul> </li> <li>中路 <ul> <li>安其拉</li> <li>小喬</li> <li>王昭君</li> <li>小妲己</li> <li>西施</li> </ul> </li> <li>輔助 <ul> <li>蔡文姬</li> <li>孫臏</li> <li>瑤妹</li> <li>桑啟</li> <li>明世隱</li> </ul> </li> <li>打野 <ul> <li>孫悟空</li> <li>李白</li> <li>韓信</li> <li>張飛</li> <li>菲</li> </ul> </li> </ul>主要看如何實(shí)現(xiàn)3D效果的二級(jí)菜單，看一下CSS代碼，重點(diǎn)是hover效果這一段代碼，如下

.box>li:hover ul { display: block; } .box>li>ul>li { position: relative; width: 200px; background: #3e3f46; margin-top: 35px; z-index: var(--i); transition: .5s; cursor: pointer; } .box>li>ul>li::before { content: ''; position: absolute; top: 0; left: -40px; width: 40px; height: 100%; background: #35383e; transform-origin: right; transform: skewY(45deg); transition: .5s; } .box>li>ul>li::after { content: ''; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: #35383e; transform-origin: bottom; transform: skewX(45deg); transition: .5s; } .box>li>ul>li:hover { background: #33a3ee; transform: translateX(50px); } .box>li>ul>li::before { background: #2982b9; } .box>li>ul>li::after { background: #1f5378; } .box>li>ul>li>a { text-decoration: none; color: #ccc; display: block; text-transform: uppercase; letter-spacing: .05em; transition: .5s; } .box>li>ul>li:hover { color: #fff; } .box>li>ul>li:last-child::after { box-shadow: -100px 100px 20px rgba(0, 0, 0, .25); }

補(bǔ)充：3d立體效果
在你的x軸和y軸的基礎(chǔ)上多個(gè)一個(gè)立體的z軸,會(huì)形成一個(gè)立體空間
z軸相當(dāng)于是從屏幕串過(guò)來(lái)的一跳軸線
離眼睛越來(lái)越近的方向被稱之為正向(正數(shù));離眼睛越來(lái)越遠(yuǎn)的方向被稱之為負(fù)向(負(fù)數(shù))
學(xué)習(xí)3d立體效果的時(shí)候,我主要學(xué)習(xí)的是3d上面的函數(shù): 平移,旋轉(zhuǎn)和縮放
屬性:transform屬性
前提:要想使用看到立體效果:必須要觸發(fā)3d旋轉(zhuǎn)舞臺(tái)
如何觸發(fā):transform-style:preserve-3d(3d)/flat(2d)
3d里面上面的高級(jí)函數(shù)
1)平移:
transform:translateX()
translateY()
translateZ()===z周上面的移動(dòng)
translate3d(x,y,z)
2)旋轉(zhuǎn):
transform:rotateX()
rotateY()
rotateZ()======效果與繞著中心旋轉(zhuǎn)一致
rotate3d(x,y,z,numdeg)
x,y,z===向量值0-1 向量===具有方向的一個(gè)量
立方體案例中應(yīng)用
3)縮放:
transform:scaleX()
scaleY()
scaleZ()===注意事項(xiàng):z周上面如果想要實(shí)現(xiàn)縮放必須配合其他的函數(shù)一起使用
會(huì)出現(xiàn)一個(gè)近大遠(yuǎn)小的效果===配合平移是先用
使用縮放的時(shí)候還需要注意一個(gè): 需要添加一個(gè)視距 一般添加在父元素上面
視距的取值最佳一般在900-1200
視距:眼睛到物體的距離

需要完整代碼的，請(qǐng)咨詢我或關(guān)注我私聊發(fā)送。