成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 關(guān)于多級(jí)菜單的內(nèi)邊距的處理方式

netmou / 656人閱讀

摘要：再經(jīng)過(guò)簡(jiǎn)單的修飾就可以達(dá)到上面的效果了。記得剛?cè)肭岸说臅r(shí)候就是采取的這種方式，效果實(shí)現(xiàn)就好。

原文地址，排版效果更好

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

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

在平時(shí)的項(xiàng)目中會(huì)經(jīng)常碰到這樣一種布局，暫且稱之為多級(jí)菜單吧

（截圖來(lái)自于ant-design）

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

    
    
  • 
        
    Navigation01
    
        
      
            
    • Option01
      • 
            
    • Option02
      • 
            
    • 
                
      Submenu
      
                
        
                    
      • Option03
        • 
                    
      • Option04
        • 
                
      
            
      • 
        
    
    
    • 
    
  • Navigation02
    •

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

再經(jīng)過(guò)簡(jiǎn)單的修飾就可以達(dá)到上面的效果了。

當(dāng)然，這個(gè)很容易，一般情況下我們是通過(guò)設(shè)置內(nèi)邊距來(lái)完成的，比如默認(rèn)為

ul{
    padding-left:40px;
}

然后每一層級(jí)跟隨父級(jí)逐步累積，然后就實(shí)現(xiàn)了，層級(jí)越深，距離左邊的縮進(jìn)越多的效果。

多級(jí)菜單選中范圍

通過(guò)上面的布局和樣式，很顯然每一項(xiàng)的選擇范圍都是逐步縮進(jìn)的，

但是，可能設(shè)計(jì)師覺(jué)得不好看，往往會(huì)設(shè)計(jì)成通欄的形式，比如像上面ant-design的設(shè)計(jì)

那么，該如何處理呢？

通欄的處理方式

首先，一個(gè)很自然的思路就是去除ul的padding，改為每一個(gè)子項(xiàng)分別指定padding

ul.parent{
    padding: 0;
}

然后將內(nèi)邊距直接寫在html上，如下

    
    
  • 
        
    Navigation01
    
        
      
            
    • Option01
      • 
            
    • Option02
      • 
            
    • 
                
      Submenu
      
                
        
                    
      • Option03
        • 
                    
      • Option04
        • 
                
      
            
      • 
        
    
    
    • 
    
  • Navigation02
    •

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

ant-design也是采取這種方式，可以自行打開(kāi)控制臺(tái)去查看。

記得剛?cè)肭岸说臅r(shí)候就是采取的這種方式，效果實(shí)現(xiàn)就好。

不過(guò)，在現(xiàn)在看來(lái)，在html中使用內(nèi)聯(lián)樣式始終不雅，而且數(shù)量較多時(shí)還需要和js扯上關(guān)系，能否優(yōu)化一下呢

下面列舉兩種css方式

1.子選擇器

我們可以在上面的基礎(chǔ)上，分別控制每一級(jí)的內(nèi)邊距，這里我們可以使用子選擇器>

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

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

2.absolute半依賴定位

在講這個(gè)方法之前，首先搞清楚一個(gè)問(wèn)題

absolute在不設(shè)置方向?qū)傩?b>left，top，right，bottom時(shí)，默認(rèn)位置是哪里？

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

其實(shí)，當(dāng)元素設(shè)置了absolute屬性，沒(méi)有方向?qū)傩詴r(shí)，元素仍保留在原來(lái)位置，只是不占空間而已

比如，我給上面每一項(xiàng)后面加一個(gè)角標(biāo)

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

可以看到，雖然設(shè)置了absolute屬性，但元素仍保留在原來(lái)位置，一旦設(shè)置了left等方位屬性，就會(huì)查找第一個(gè)有定位屬性的父級(jí)。

現(xiàn)在，我們把css還原為默認(rèn)的狀態(tài)，也就是

ul{
    padding-left:40px;
}

現(xiàn)在情況就和初始狀態(tài)一致，選中范圍逐層遞減，那么，如何實(shí)現(xiàn)選中范圍為通欄呢

我們可以給最外層父級(jí)設(shè)置position:relative，因?yàn)橥诘膶挾仁窍鄬?duì)于最外層的，然后給選中元素設(shè)置

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

這里只設(shè)置了水平方向的left和right，沒(méi)有設(shè)置垂直方向上的屬性，所以水平位置會(huì)跟隨父級(jí)定位元素（這里是最外層），而垂直方向位置還是基于當(dāng)前父級(jí)（這里是父級(jí)li元素）

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

這里有兩種方式來(lái)優(yōu)化。

方式一

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

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

或者

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

通常子項(xiàng)目的高度都是固定的，可以給子項(xiàng)目手動(dòng)指定一個(gè)高度，然后選中項(xiàng)繼承該高度即可

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

注意這里的height:inherit是繼承直接父級(jí)的高度，有興趣的可以看張?chǎng)涡竦倪@篇文章

這樣也實(shí)現(xiàn)了通欄的效果

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

小節(jié)

上面介紹了兩種實(shí)現(xiàn)通欄的方法，相比而言，absolute效果更好，也易于維護(hù)，可能一個(gè)并不怎么起眼的屬性，有時(shí)候也能發(fā)揮出意想不到的效果。

下面有一個(gè)案例，純css實(shí)現(xiàn)，可以查看一下

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114689.html

相關(guān)文章

  • CSS 盒模型

    摘要：概覽盒模型也叫框模型，規(guī)定了元素框處理元素內(nèi)容內(nèi)邊距邊框和外邊距的方式。不幸的是，和在使用自己的非標(biāo)準(zhǔn)模型。當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。如果缺少右外邊距的值，則使用上外邊距的值。 概覽 CSS 盒模型 (Box Model)也叫框模型，規(guī)定了元素框處理元素 內(nèi)容、 內(nèi)邊距、 邊框 和 外邊距 的方式。 showImg(http...

    heartFollower 評(píng)論0 收藏0

  • CSS規(guī)范 > 8 盒模型 Box Model

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

    suemi 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——CSS

    摘要：父元素沒(méi)有上邊框?yàn)樽釉卦O(shè)置上外邊距時(shí)在中嵌套一個(gè)子元素設(shè)置其尺寸為，并設(shè)置其背景顏色設(shè)置的上外邊距為觀察其結(jié)果。 前端知識(shí)點(diǎn)總結(jié)——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級(jí)聯(lián)樣式表（簡(jiǎn)稱：樣式表） 2.作用 設(shè)置HTML網(wǎng)頁(yè)元素的樣式 3.HTML與CSS的關(guān)系 HTML：負(fù)責(zé)內(nèi)容的展示 CSS：負(fù)責(zé)內(nèi)容（元素）...

    nicercode 評(píng)論0 收藏0

  • CSS入門指南-4：頁(yè)面布局

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

    ethernet 評(píng)論0 收藏0

  • CSS入門指南-4：頁(yè)面布局

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

    Stardustsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<