CodePen实例分析 --- 下拉菜单

CodePen实例分析 --- 下拉菜单

CodePen网站链接: https://codepen.io/andornagy/pen/ALbdbJ

效果展示

HTML 基本布局

就是 ul, li 无限嵌套

其次, 对于 id 和 class 的选用 ----- 在实际应用的时候，class可能对文字的排版等比较有用，而id则对宏观布局和设计放置各种元素较有用。

引自: ID和CLASS的区别_喵弟的博客-CSDN博客

     <div class="container">
         <nav>
             <ul>
                 <li><a href="#">Home</a></li>
                 <li>
                     <a href="#">WordPress+</a>
                     <ul>
                         <li><a href="#">Themes</a></li>
                         <li><a href="#">Plugins</a></li>
                         <li><a href="#">Tutorials</a></li>
                     </ul>
                 </li>
                 <li><a href="#">Web Design+</a>
                     <ul>
                         <li><a href="#">Resources</a></li>
                         <li><a href="#">Links</a></li>
                         <li><a href="#">Tutorials+</a>
                             <ul>
                                 <li><a href="#">HTML/CSS</a></li>
                                 <li><a href="#">jQuery</a></li>
                                 <li><a href="#">Other+</a>
                                     <ul>
                                         <li><a href="#">Stuff</a></li>
                                         <li><a href="#">Things</a></li>
                                         <li><a href="#">Other Stuff</a></li>
                                     </ul>
                                 </li>
                             </ul>
                         </li>
                     </ul>
                 </li>
                 <li><a href="#">Graphic Design</a></li>
                 <li><a href="#">Inspiration</a></li>
                 <li><a href="#">Contact</a></li>
                 <li><a href="#">About</a></li>
             </ul>
         </nav>
     </div>
     <h1>Pure CSS Drop Down Menu</h1>
     <p>A simple dropdown navigation menu made with CSS Only. 
         Dropdowns are marked with a plus sign(+)</p>

CSS渲染

整体设置

word-wrap:break-word 与 word-break:break-all

word-wrap:break-word 与 word-break:break-all 共同点是都能把长单词强行断句，不同点是 word-wrap:break-word 会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而 word-break:break-all 则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

引自: 深入理解display属性 - 小火柴的蓝色理想 - 博客园 (cnblogs.com)

 /* 引入字体 */
 @import url(https://fonts.googleapis.com/css?family=Open+Sans);
 @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
 body {
     background: #212121;
     font-size: 22px;
     line-height: 32px;
     color: #fff;
     /* word-wrap:break-word 在长单词或 URL 地址内部进行换行。*/
     /* 因为css有继承的样式，加上!importanrt可以覆盖父级的样式 
     引自: https://zhidao.baidu.com/question/354368457.html */
     word-wrap: break-word !important;
     font-family: 'Open Sans', sans-serif;
 }

字体位置样式设计

对照结果图设置即可

不过要注意的一点就是, 由于 margin 的设置是上下重叠的, 也就是两个元素设置的上下margin, 只会取二者中较大者. 所以nav底部 和 h1顶部 仅相距 100px, 即 h1 的 margin

 h1 {
     font-size: 60px;
     text-align: center;
     color: #FFF;
 }
 ​
 a {
     color: #fff;
 }
 ​
 h1 {
     margin-top: 100px;
     text-align: center;
     font-size: 60px;
     font-family: 'Bree Serif', 'Serif';
 }
 ​
 #container {
     margin: 0 auto;
 }
 ​
 p {
     text-align: center;
 }
 ​
 nav a {
     display: block;
     padding: 0 10px;
     color: #fff;
     font-size: 20px;
     /* 把 li 的高度撑到 60px */
     line-height: 60px;
     text-decoration: none;
 }
 ​
 nav a:hover {
     /* 悬浮时, 被选中的元素背景为黑色 */
     background-color: #000;
 }

一层菜单样式

关于 display 属性

这里只介绍用到的 block, inline-block, none, 事实上,这也是最为常用的几个

display: block;

【特征】

　　[1]不设置宽度时，宽度为父元素宽度

　　[2]独占一行

　　[3]支持宽高

【不支持的样式】

　　[1]vertical-align

display: inline-block;

【特征】

　　[1]不设置宽度时，内容撑开宽度

　　[2]非独占一行

　　[3]支持宽高

　　[4]代码换行被解析成空格

【不支持的样式】

　　[1]clear

display: none;

【特征】

　　隐藏元素并脱离文档流

引自: 深入理解display属性 - 小火柴的蓝色理想 - 博客园 (cnblogs.com)

 nav {
     margin: 50px 0;
     background-color: #E64A19;
 }
 ​
 nav ul {
     padding: 0;
     margin: 0;
     /* 去掉列表属性的装饰 */
     list-style: none;
     position: relative;
 }
 ​
 nav ul li {
     display: inline-block;
     background-color: #E64A19;
 }

二层菜单样式

 nav ul ul {
     /* 隐藏元素并脱离文档流 */
     display: none;
     /* 使用 absolute 使之脱离文档流*/
     position: absolute;
     top: 60px;
 }
 ​
 nav ul ul li {
     width: 170px;
     float: none;
     display: list-item;
     position: relative;
 }

三层菜单样式

 nav ul ul ul li {
     position: relative;
     top: -60px;
     left: 170px;
 }

显示

 /* 选择作为 li 元素子元素的所有 ul 元素 */
 nav ul li:hover > ul {
     display: inherit;
 }

最后加"+"

 /* 属于 li 的所有 a 加上" + " */
 li > a:after { content: '+';}
 /* li 的唯一子元素(不包含下层分类的元素)中的每个 a 元素后的"+"去掉 */
 li > a:only-child::after {content: '';}