下拉滑動二級菜單

Michael_Lin 發布于2019-08-30 13:21 / 3373人閱讀

摘要：下拉滑動二級菜單的應用還挺多的，比較美觀。難點在把層次關系搞清楚，否則布局都不知道從何下手。主要分為三層底層是，高度為，寬度觸發高度變為注意要寫，否則超出來的就會一直顯示設置過渡屬性才會出現滑動的效果，由觸發。

下拉滑動二級菜單的應用還挺多的，比較美觀。
各層之間顏色的搭配挺重要的，多試幾次。
難點在把層次關系搞清楚，否則html布局都不知道從何下手。

主要分為三層

底層是class="menu-body"，高度為50px，寬度100%；hover觸發高度變為300px；注意要寫overflow:hidden，否則超出來的ul就會一直顯示；設置transition過渡屬性才會出現滑動的效果，由hover觸發。

中層是class="menu-head"，高度為50px，寬度100%。

上層是三個列表，用class="menu-content"包裹起來，設置一個正好能夠包裹住ul的寬度，方便用margin:0 auto居中；選中所有li設置一個寬度，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;
}

云服務器 GPU云服務器橫向滑動菜單弧形滑動菜單滑動圖片菜單 jquery菜單滑動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115495.html

下拉滑動二級菜單

摘要：下拉滑動二級菜單的應用還挺多的，比較美觀。難點在把層次關系搞清楚，否則布局都不知道從何下手。主要分為三層底層是，高度為，寬度觸發高度變為注意要寫，否則超出來的就會一直顯示設置過渡屬性才會出現滑動的效果，由觸發。下拉滑動二級菜單的應用還挺多的，比較美觀。各層之間顏色的搭配挺重要的，多試幾次。難點在把層次關系搞清楚，否則html布局都不知道從何下手。主要分為三層底層是class=...

gggggggbong 2019-08-01 16:09 評論0 收藏0
MUI使用總結

摘要：預加載自定義事件第三方擴展插件涉及的，除了，其它所有手機瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關注意瀏覽器沒有事件事件相關的，手機端瀏覽器均可使用端模擬手機瀏覽器也可以正常使用。最近項目中需要使用MUI做一個視頻播放的小功能。我就花時間研究了一下MUI。 MUI是一個使用JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用...

elliott_hu 2019-08-23 14:48 評論0 收藏0
CSS學習筆記(九) 界面組件之導航菜單

摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...

pingink 2019-08-28 18:03 評論0 收藏0