CSS 關于多級菜單的內邊距的處理方式

netmou 發布于2019-08-30 10:58 / 654人閱讀

摘要：再經過簡單的修飾就可以達到上面的效果了。記得剛入前端的時候就是采取的這種方式，效果實現就好。

原文地址，排版效果更好

https://blog.codelabo.cn/article/5ce4f0eb8aab210ff34d0150

https://xboxyan.codelabo.cn/post/css-tree-padding/

在平時的項目中會經常碰到這樣一種布局，暫且稱之為多級菜單吧

（截圖來自于ant-design）

這類布局也很容易，大概就是這樣ul和li嵌套，如下


    
        Navigation01
        
            Option01
            Option02
            
                Submenu
                
                    Option03
                    Option04
                
            
        
    
    Navigation02

于是就得到下面一個很原始的樣式。

再經過簡單的修飾就可以達到上面的效果了。

當然，這個很容易，一般情況下我們是通過設置內邊距來完成的，比如默認為

ul{
    padding-left:40px;
}

然后每一層級跟隨父級逐步累積，然后就實現了，層級越深，距離左邊的縮進越多的效果。

多級菜單選中范圍

通過上面的布局和樣式，很顯然每一項的選擇范圍都是逐步縮進的，

但是，可能設計師覺得不好看，往往會設計成通欄的形式，比如像上面ant-design的設計

那么，該如何處理呢？

通欄的處理方式

首先，一個很自然的思路就是去除ul的padding，改為每一個子項分別指定padding

ul.parent{
    padding: 0;
}

然后將內邊距直接寫在html上，如下


    
        Navigation01
        
            Option01
            Option02
            
                Submenu
                
                    Option03
                    Option04
                
            
        
    
    Navigation02

如果菜單層級較多，我們通常使用js來輔助生成，注意每一次循環來指定不同的內邊距就可以了

ant-design也是采取這種方式，可以自行打開控制臺去查看。

記得剛入前端的時候就是采取的這種方式，效果實現就好。

不過，在現在看來，在html中使用內聯樣式始終不雅，而且數量較多時還需要和js扯上關系，能否優化一下呢

下面列舉兩種css方式

1.子選擇器

我們可以在上面的基礎上，分別控制每一級的內邊距，這里我們可以使用子選擇器>

ul.parent>li>div{/**第一級**/
    padding-left: 40px;
}
ul.parent>li>ul>li>div{/**第二級**/
    padding-left: 80px;
}
ul.parent>li>ul>li>ul>li>div{/**第三級**/
    padding-left: 120px;
}
/** ... **/

通常，在層級不是特別多的情況下，我們可以一一羅列出來，只需用選擇器ul>li疊加即可，是不是比style方便維護了很多呢？

2.absolute半依賴定位

在講這個方法之前，首先搞清楚一個問題

absolute在不設置方向屬性left，top，right，bottom時，默認位置是哪里？

在我的學習過程中，很多地方講到的都是說absolute是絕對定位，是相對于第一個有定位屬性的父級的，所以基本上都是和relative一起使用，反正不管三七二十一，直接就給父級加上position:relative，有一個可靠的父級，看著比較靠譜，不是嗎？

其實，當元素設置了absolute屬性，沒有方向屬性時，元素仍保留在原來位置，只是不占空間而已

比如，我給上面每一項后面加一個角標

ul.parent div:after{
    content:"new";
    font-size: 10px;
    position:absolute;
    margin-top: -5px;
    color: red
}

可以看到，雖然設置了absolute屬性，但元素仍保留在原來位置，一旦設置了left等方位屬性，就會查找第一個有定位屬性的父級。

現在，我們把css還原為默認的狀態，也就是

ul{
    padding-left:40px;
}

現在情況就和初始狀態一致，選中范圍逐層遞減，那么，如何實現選中范圍為通欄呢

我們可以給最外層父級設置position:relative，因為通欄的寬度是相對于最外層的，然后給選中元素設置

ul.parent div:hover:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:21px;
    background: violet;
    z-index: -1;
}

這里只設置了水平方向的left和right，沒有設置垂直方向上的屬性，所以水平位置會跟隨父級定位元素（這里是最外層），而垂直方向位置還是基于當前父級（這里是父級li元素）

注意，這里的高度由于是基于最外層元素，所以，這里不能設置height:100%，那么，如何解決這一個小瑕疵呢，畢竟在這里寫一個固定高度實在不怎么合適。

這里有兩種方式來優化。

方式一

上面的方式如果不指定高度，由于沒有內容，高度自然為0，解決方式也很簡單，在content插入一個空字符或者透明字符即可

ul.parent div:hover:before{
    content:"A0";
}

或者

ul.parent div:hover:before{
    content:"任意字符";
        color:transparent;
}

方式二

通常子項目的高度都是固定的，可以給子項目手動指定一個高度，然后選中項繼承該高度即可

ul.parent div{
    height:24px;
    line-height:24px;
}
ul.parent div:hover:before{
    content:"";
        height:inherit
}

注意這里的height:inherit是繼承直接父級的高度，有興趣的可以看張鑫旭的這篇文章

這樣也實現了通欄的效果

https://codepen.io/xboxyan/pe...

小節

上面介紹了兩種實現通欄的方法，相比而言，absolute效果更好，也易于維護，可能一個并不怎么起眼的屬性，有時候也能發揮出意想不到的效果。

下面有一個案例，純css實現，可以查看一下

https://codepen.io/xboxyan/pe...

GPU云服務器云服務器內邊距負內邊距 html文字內邊距 html 左右內邊距

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

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

CSS 盒模型

摘要：概覽盒模型也叫框模型，規定了元素框處理元素內容內邊距邊框和外邊距的方式。不幸的是，和在使用自己的非標準模型。當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。如果缺少右外邊距的值，則使用上外邊距的值。概覽 CSS 盒模型 (Box Model)也叫框模型，規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。 showImg(http...

heartFollower 2019-08-28 18:17 評論0 收藏0
CSS規范 > 8 盒模型 Box Model

摘要：當兩個及以上外邊距折疊，合并后的外邊距寬度是發生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評論0 收藏0
前端知識點總結——CSS

摘要：父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為，并設置其背景顏色設置的上外邊距為觀察其結果。前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表） 2.作用設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML：負責內容的展示 CSS：負責內容（元素）...

nicercode 2019-08-30 14:01 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 評論0 收藏0