資訊專(zhuān)欄INFORMATION COLUMN
摘要：首先，需要聲明的是本教程是寫(xiě)給初級(jí)者參考的，如果您已經(jīng)有一定的基礎(chǔ)請(qǐng)直接忽略吧二級(jí)菜單是網(wǎng)站開(kāi)發(fā)中很常見(jiàn)的功能模塊，但是對(duì)于初級(jí)者來(lái)說(shuō)卻還是有些困難，下面我就拿幾個(gè)常見(jiàn)的案例來(lái)講好了。
首先，需要聲明的是本教程是寫(xiě)給初級(jí)者參考的，如果您已經(jīng)有一定的基礎(chǔ)請(qǐng)直接忽略吧
二級(jí)菜單是網(wǎng)站開(kāi)發(fā)中很常見(jiàn)的功能模塊，但是對(duì)于初級(jí)者來(lái)說(shuō)卻還是有些困難，下面我就拿幾個(gè)常見(jiàn)的案例來(lái)講好了。
鼠標(biāo)滑過(guò)顯示顯示二級(jí)菜單
很簡(jiǎn)單，li標(biāo)簽嵌套一層ul
/*設(shè)置一級(jí)菜單樣式*/
.navs:after{
position: relative;
content: "";
width: 0;
height: 0;
visibility: hidden;
clear: both;
zoom: 1;
}
.nav {
position: relative;
float: left;
height: 30px;
line-height: 30px;
text-align: center;
}
.nav-a {
display: inline-block;
width: 80px;
font-size: 14px;
color: #d8ac00;
}
效果如下：
接著設(shè)置二級(jí)菜單
/*設(shè)置二級(jí)樣式*/
.sub-navs {
/*使用絕對(duì)定位，在文檔流中不占位，免得影響后面的布局*/
/*注意，因?yàn)檫@里使用了絕對(duì)定位，所以它的父元素.nav記得使用相對(duì)定位*/
position: absolute;
top: 100%;
width: 100%;
display: none;
/*先隱藏起來(lái)*/
}
.nav:hover .sub-navs {
/*鼠標(biāo)滑過(guò)時(shí)顯示二級(jí)菜單*/
display: block;
}
.sub-nav-a {
font-size: 12px;
color: #000;
}
這時(shí)候簡(jiǎn)單的二級(jí)菜單效果就出來(lái)了。如果想要?jiǎng)澾^(guò)的時(shí)候，一級(jí)菜單背景變黃，字體變白呢
.nav:hover .nav-a {
background-color: #d8ac00;
color: #fff;
}
添加這行就好了。
但是我們的效果圖還加了邊框，各位看官可能覺(jué)得很簡(jiǎn)單啊，加上border屬性不就就好了
.nav:hover .nav-a,
.sub-nav{
border: 1px solid #ccc;
}
結(jié)果邊框重疊了：
我們發(fā)現(xiàn)，其實(shí)二級(jí)菜單把border-top去掉就可以了
.sub-nav{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
還有一個(gè)問(wèn)題時(shí)，當(dāng)鼠標(biāo)滑動(dòng)到左邊第一個(gè)一級(jí)菜單的時(shí)候，右邊的一級(jí)菜單出現(xiàn)了閃動(dòng)現(xiàn)象，體驗(yàn)十分不友好，加上border-box屬性就可以解決此問(wèn)題
.nav-a {
box-sizing: border-box;
}
參考代碼：http://runjs.cn/detail/ep0eq85c
關(guān)注作者吧~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50618.html
摘要：首先，需要聲明的是本教程是寫(xiě)給初級(jí)者參考的，如果您已經(jīng)有一定的基礎(chǔ)請(qǐng)直接忽略吧二級(jí)菜單是網(wǎng)站開(kāi)發(fā)中很常見(jiàn)的功能模塊，但是對(duì)于初級(jí)者來(lái)說(shuō)卻還是有些困難，下面我就拿幾個(gè)常見(jiàn)的案例來(lái)講好了。 首先，需要聲明的是本教程是寫(xiě)給初級(jí)者參考的，如果您已經(jīng)有一定的基礎(chǔ)請(qǐng)直接忽略吧 二級(jí)菜單是網(wǎng)站開(kāi)發(fā)中很常見(jiàn)的功能模塊，但是對(duì)于初級(jí)者來(lái)說(shuō)卻還是有些困難，下面我就拿幾個(gè)常見(jiàn)的案例來(lái)講好了。 鼠標(biāo)滑過(guò)顯示顯...
摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...
摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...
摘要：需求當(dāng)鼠標(biāo)到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。設(shè)置是，默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在到按鈕區(qū)域時(shí)才會(huì)展開(kāi)下拉菜單以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專(zhuān)業(yè)《頁(yè)面制作》課程的作業(yè)題，當(dāng)時(shí)對(duì)題意理解錯(cuò)誤沒(méi)有實(shí)現(xiàn)題目要求，成了心中永遠(yuǎn)的痛，所謂念念不忘必有回響，在學(xué)校圖書(shū)館花了幾個(gè)小時(shí)做出來(lái)并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)，寫(xiě)了這篇博文...
摘要：需求當(dāng)鼠標(biāo)到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。設(shè)置是，默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在到按鈕區(qū)域時(shí)才會(huì)展開(kāi)下拉菜單以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專(zhuān)業(yè)《頁(yè)面制作》課程的作業(yè)題，當(dāng)時(shí)對(duì)題意理解錯(cuò)誤沒(méi)有實(shí)現(xiàn)題目要求，成了心中永遠(yuǎn)的痛，所謂念念不忘必有回響，在學(xué)校圖書(shū)館花了幾個(gè)小時(shí)做出來(lái)并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)，寫(xiě)了這篇博文...
閱讀 1318·2021-11-04 16:09
閱讀 3523·2021-10-19 11:45
閱讀 2411·2021-10-11 10:59
閱讀 1024·2021-09-23 11:21
閱讀 2776·2021-09-22 10:54
閱讀 1152·2019-08-30 15:53
閱讀 2622·2019-08-30 15:53
閱讀 3491·2019-08-30 12:57
