資訊專欄INFORMATION COLUMN
摘要：下拉滑動(dòng)二級菜單的應(yīng)用還挺多的，比較美觀。難點(diǎn)在把層次關(guān)系搞清楚，否則布局都不知道從何下手。主要分為三層底層是，高度為，寬度觸發(fā)高度變?yōu)樽⒁庖獙懀駝t超出來的就會(huì)一直顯示設(shè)置過渡屬性才會(huì)出現(xiàn)滑動(dòng)的效果，由觸發(fā)。
下拉滑動(dòng)二級菜單的應(yīng)用還挺多的，比較美觀。
各層之間顏色的搭配挺重要的，多試幾次。
難點(diǎn)在把層次關(guān)系搞清楚，否則html布局都不知道從何下手。
主要分為三層
底層是class="menu-body"，高度為50px，寬度100%；hover觸發(fā)高度變?yōu)?00px；注意要寫overflow:hidden，否則超出來的ul就會(huì)一直顯示；設(shè)置transition過渡屬性才會(huì)出現(xiàn)滑動(dòng)的效果，由hover觸發(fā)。
中層是class="menu-head"，高度為50px，寬度100%。
上層是三個(gè)列表，用class="menu-content"包裹起來，設(shè)置一個(gè)正好能夠包裹住ul的寬度，方便用margin:0 auto居中；選中所有l(wèi)i設(shè)置一個(gè)寬度，height和line-height相同，以便垂直居中。
html代碼：
css代碼：
*{
margin:0px;
padding:0px;
}
.menu-body{
height:50px;
background:#FFD6A4;
overflow:hidden;
transition:ease 0.5s;
}
.menu-body:hover{
height:300px;
}
.menu-head{
height:50px;
background:#F38181;
}
.menu-content{
width:600px;
margin:0 auto;
}
.menu-content ul{
display:inline-block;
height:300px;
list-style:none;
}
.menu-content ul:hover{
background:rgba(100,100,100,0.1);
}
.menu-content ul li{
width:180px;
height:50px;
line-height:50px;
color:#45171D;
font-size:16px;
font-weight:700;
text-align:center;
}
.menu-content a{
color:#45171D;
cursor:pointer;
text-decoration:none;
}
.menu-content a:hover{
text-decoration:underline;
}
.menu-caption{
font-size:18px;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115495.html
摘要：下拉滑動(dòng)二級菜單的應(yīng)用還挺多的，比較美觀。難點(diǎn)在把層次關(guān)系搞清楚，否則布局都不知道從何下手。主要分為三層底層是，高度為，寬度觸發(fā)高度變?yōu)樽⒁庖獙懀駝t超出來的就會(huì)一直顯示設(shè)置過渡屬性才會(huì)出現(xiàn)滑動(dòng)的效果，由觸發(fā)。 下拉滑動(dòng)二級菜單的應(yīng)用還挺多的，比較美觀。各層之間顏色的搭配挺重要的，多試幾次。難點(diǎn)在把層次關(guān)系搞清楚，否則html布局都不知道從何下手。 主要分為三層 底層是class=...
摘要：預(yù)加載自定義事件第三方擴(kuò)展插件涉及的，除了，其它所有手機(jī)瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關(guān)注意瀏覽器沒有事件事件相關(guān)的，手機(jī)端瀏覽器均可使用端模擬手機(jī)瀏覽器也可以正常使用。 最近項(xiàng)目中需要使用MUI做一個(gè)視頻播放的小功能。我就花時(shí)間研究了一下MUI。 MUI是一個(gè)使用JavaScript開發(fā)Android和IOS應(yīng)用的前端框架。這篇文章將以知識樹的形式對MUI的使用...
摘要：為了讓包圍列表項(xiàng)，沒有使用，而是使用了，是因?yàn)榍罢邥?huì)導(dǎo)致后來添加到下拉菜單中的子菜單無法顯示它們最終會(huì)顯示在父元素的外面，結(jié)果會(huì)導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級元素...
閱讀 1207·2021-11-24 11:16
閱讀 3437·2021-11-15 11:38
閱讀 1937·2021-10-20 13:47
閱讀 553·2021-09-29 09:35
閱讀 2202·2021-09-22 15:17
閱讀 1017·2021-09-07 09:59
閱讀 3390·2019-08-30 13:21
閱讀 2912·2019-08-30 12:47
