|
| 1 | +<html> |
| 2 | + <head> |
| 3 | + <meta charset="utf-8" /> |
| 4 | +<meta name="description" content="" /> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | +<title>CSS 关于多级菜单的内边距的处理方式 | XboxYan</title> |
| 7 | +<link rel="shortcut icon" href="https://xboxyan.codelabo.cn/favicon.ico?v=1558443456100"> |
| 8 | +<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
| 9 | +<link rel="stylesheet" href="https://xboxyan.codelabo.cn/styles/main.css"> |
| 10 | + |
| 11 | +<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script> |
| 12 | +<script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js"></script> |
| 13 | + |
| 14 | + |
| 15 | + </head> |
| 16 | + <body> |
| 17 | + <div class="main"> |
| 18 | + <div class="main-content"> |
| 19 | + <div class="site-header"> |
| 20 | + <a href="https://xboxyan.codelabo.cn"> |
| 21 | + <img class="avatar" src="https://xboxyan.codelabo.cn/images/avatar.png?v=1558443456100" alt=""> |
| 22 | + </a> |
| 23 | + <h1 class="site-title"> |
| 24 | + XboxYan |
| 25 | + </h1> |
| 26 | + <p class="site-description"> |
| 27 | + 世界美好 你也是。 |
| 28 | + </p> |
| 29 | + <div class="menu-container"> |
| 30 | + |
| 31 | + |
| 32 | + <a href="/" class="menu"> |
| 33 | + 首页 |
| 34 | + </a> |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | + <a href="/archives" class="menu"> |
| 39 | + 归档 |
| 40 | + </a> |
| 41 | + |
| 42 | + |
| 43 | + |
| 44 | + <a href="/tags" class="menu"> |
| 45 | + 标签 |
| 46 | + </a> |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | + <a href="/post/about" class="menu"> |
| 51 | + 关于 |
| 52 | + </a> |
| 53 | + |
| 54 | + |
| 55 | + </div> |
| 56 | + <div class="social-container"> |
| 57 | + |
| 58 | + |
| 59 | + <a href="https://github.com/XboxYan" target="_blank"> |
| 60 | + <i class="fab fa-github"></i> |
| 61 | + </a> |
| 62 | + |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | + </div> |
| 73 | +</div> |
| 74 | + |
| 75 | + |
| 76 | + <div class="post-detail"> |
| 77 | + <article class="post"> |
| 78 | + <h2 class="post-title"> |
| 79 | + CSS 关于多级菜单的内边距的处理方式 |
| 80 | + </h2> |
| 81 | + <div class="post-info"> |
| 82 | + <time class="post-time"> |
| 83 | + · 2019-05-21 · |
| 84 | + </time> |
| 85 | + |
| 86 | + <a href="https://xboxyan.codelabo.cn/tag/css" class="post-tags"> |
| 87 | + # css |
| 88 | + </a> |
| 89 | + |
| 90 | + </div> |
| 91 | + |
| 92 | + <div class="post-content"> |
| 93 | + <h2 id="多级菜单">多级菜单</h2> |
| 94 | +<p>在平时的项目中会经常碰到这样一种布局，暂且称之为多级菜单吧</p> |
| 95 | +<p><img src="https://xboxyan.codelabo.cn/post-images/1558439549223.png" alt=""></p> |
| 96 | +<p>（截图来自于<a href="https://ant.design/components/menu-cn/">ant-design</a>）</p> |
| 97 | +<p>这类布局也很容易，大概就是这样<code>ul</code>和<code>li</code>嵌套，如下</p> |
| 98 | +<pre><code class="language-html"><ul class="parent"> |
| 99 | + <li> |
| 100 | + <div>Navigation01</div> |
| 101 | + <ul> |
| 102 | + <li><div>Option01</div></li> |
| 103 | + <li><div>Option02</div></li> |
| 104 | + <li> |
| 105 | + <div>Submenu</div> |
| 106 | + <ul> |
| 107 | + <li><div>Option03</div></li> |
| 108 | + <li><div>Option04</div></li> |
| 109 | + </ul> |
| 110 | + </li> |
| 111 | + </ul> |
| 112 | + </li> |
| 113 | + <li><div>Navigation02</div></li> |
| 114 | +</ul> |
| 115 | +</code></pre> |
| 116 | +<p>这样就有了下面的效果</p> |
| 117 | +<p><img src="https://xboxyan.codelabo.cn/post-images/1558440703375.png" alt=""></p> |
| 118 | +<p>再经过简单的修饰就可以达到上面的效果了。</p> |
| 119 | +<p>当然，这个很容易，一般情况下我们是通过设置内边距来完成的，比如默认为</p> |
| 120 | +<pre><code class="language-css">ul{ |
| 121 | + padding-left:40px; |
| 122 | +} |
| 123 | +</code></pre> |
| 124 | +<p>然后每一层级逐步累积，然后就实现了，层级越深，距离左边的缩进越多的效果。</p> |
| 125 | +<h2 id="多级菜单选中范围">多级菜单选中范围</h2> |
| 126 | +<p>通过上面的布局和样式，很显然每一项的选择范围都是逐步缩进的，</p> |
| 127 | +<p><img src="https://xboxyan.codelabo.cn/post-images/1558441705019.png" alt=""></p> |
| 128 | +<p>但是，可能设计师觉得不好看，往往会设计成通栏的形式，比如像上面<a href="https://ant.design/components/menu-cn/">ant-design</a>的设计</p> |
| 129 | +<p><img src="https://xboxyan.codelabo.cn/post-images/1558441856625.png" alt=""></p> |
| 130 | +<p>那么，该如何处理呢？</p> |
| 131 | +<h2 id="通栏的处理方式">通栏的处理方式</h2> |
| 132 | +<p>首先，一个很自然的思路就是去除<code>ul</code>的<code>padding</code>，改为每一个子项分别指定<code>padding</code></p> |
| 133 | +<pre><code class="language-css">ul.parent{ |
| 134 | + padding: 0; |
| 135 | +} |
| 136 | +</code></pre> |
| 137 | +<p>然后将内边距直接写在<code>html</code>上，如下</p> |
| 138 | +<pre><code class="language-html"><ul class="parent"> |
| 139 | + <li> |
| 140 | + <div style="padding-left:40px">Navigation01</div> |
| 141 | + <ul> |
| 142 | + <li><div style="padding-left:80px">Option01</div></li> |
| 143 | + <li><div style="padding-left:80px">Option02</div></li> |
| 144 | + <li> |
| 145 | + <div style="padding-left:80px">Submenu</div> |
| 146 | + <ul> |
| 147 | + <li><div style="padding-left:120px">Option03</div></li> |
| 148 | + <li><div style="padding-left:120px">Option04</div></li> |
| 149 | + </ul> |
| 150 | + </li> |
| 151 | + </ul> |
| 152 | + </li> |
| 153 | + <li><div style="padding-left:40px">Navigation02</div></li> |
| 154 | +</ul> |
| 155 | +</code></pre> |
| 156 | +<p>如果菜单层级较多，我们通常使用js来辅助生成，注意每一次循环来指定不同的内边距就可以了</p> |
| 157 | +<p><img src="https://xboxyan.codelabo.cn/post-images/1558442384266.png" alt=""></p> |
| 158 | +<p><a href="https://ant.design/components/menu-cn/">ant-design</a>也是采取这种方式，可以自行打开控制台去查看。</p> |
| 159 | +<p>记得刚入前端的时候就说采取的这种方式，效果实现就好。</p> |
| 160 | +<p>不过，在现在看来，在<code>html</code>中使用内联样式始终不雅，而且数量较多时还需要和<code>js</code>扯上关系，能否优化一下呢</p> |
| 161 | +<p>下面列举两种css方式</p> |
| 162 | +<h3 id="1子选择器">1.子选择器</h3> |
| 163 | +<p>我们可以在上面的基础上，分别控制每一级的内边距，这里我们可以使用子选择器<code>></code></p> |
| 164 | +<pre><code class="language-css">ul.parent>li>div{/**第一级**/ |
| 165 | + padding-left: 40px; |
| 166 | +} |
| 167 | +ul.parent>li>ul>li>div{/**第二级**/ |
| 168 | + padding-left: 80px; |
| 169 | +} |
| 170 | +ul.parent>li>ul>li>ul>li>div{/**第三级**/ |
| 171 | + padding-left: 120px; |
| 172 | +} |
| 173 | +/** ... **/ |
| 174 | +</code></pre> |
| 175 | +<p>通常，在层级不是特别多的情况下，我们可以一一罗列出来，只需用选择器<code>ul>li</code>叠加即可，是不是比<code>style</code>方便维护了很多呢？</p> |
| 176 | +<h3 id="2absolute半依赖定位">2.absolute半依赖定位</h3> |
| 177 | +<p>未完待续...</p> |
| 178 | + |
| 179 | + </div> |
| 180 | + </article> |
| 181 | + </div> |
| 182 | + |
| 183 | + |
| 184 | + <div class="next-post"> |
| 185 | + <div class="next">下一篇</div> |
| 186 | + <a href="https://xboxyan.codelabo.cn/post/css3-of-type-child"> |
| 187 | + <h3 class="post-title"> |
| 188 | + CSS3 中关于 *-of-type 和 *-child的差异性及适用场景 |
| 189 | + </h3> |
| 190 | + </a> |
| 191 | + </div> |
| 192 | + |
| 193 | + |
| 194 | + |
| 195 | + |
| 196 | + <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> |
| 197 | +<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script> |
| 198 | + |
| 199 | +<div id="gitalk-container"></div> |
| 200 | + |
| 201 | +<script> |
| 202 | + |
| 203 | + var gitalk = new Gitalk({ |
| 204 | + clientID: '76f6db0817582f8fcf7e', |
| 205 | + clientSecret: '0bff99f569efc8e061740c67585348de78e81e58', |
| 206 | + repo: 'XboxYan.github.io', |
| 207 | + owner: 'XboxYan', |
| 208 | + admin: ['XboxYan'], |
| 209 | + id: location.pathname, // Ensure uniqueness and length less than 50 |
| 210 | + distractionFreeMode: false // Facebook-like distraction free mode |
| 211 | + }) |
| 212 | + |
| 213 | + gitalk.render('gitalk-container') |
| 214 | + |
| 215 | +</script> |
| 216 | + |
| 217 | + |
| 218 | + |
| 219 | + |
| 220 | + |
| 221 | + |
| 222 | + <div class="site-footer"> |
| 223 | + Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> |
| 224 | +</div> |
| 225 | + |
| 226 | +<script> |
| 227 | + hljs.initHighlightingOnLoad() |
| 228 | +</script> |
| 229 | + |
| 230 | + </div> |
| 231 | + </div> |
| 232 | + </body> |
| 233 | +</html> |
0 commit comments