CSS（九）——定位练习（二级菜单）

CSS（九）——定位练习（二级菜单）

本篇笔记的中描述的是二级菜单的其中一种做法，大多数的二级菜单做法的核心逻辑与本文的核心逻辑基本一致（重复一遍，是基本一致，不是一定一致！）。

本文中有不算少的代码，主要为了能直接显示除页面的效果。至于其他的效果……（看过我之前文章的朋友知道，博主较懒，能看就行。）

最后，严肃的说一下，本文不能先看结论，结论是总结用的。先看正文！

概述

一般来说，定位很少应用于主页面中的盒子，一般来说用于：二级菜单、弹出框以及页面上的图片轮播。本篇笔记先介绍一下二级菜单的相关知识点及需要注意的问题。

二级菜单

二级菜单一般出现在页面导航栏中，为了页面简洁并能对各种功能分类，则会提高网页的用户体验度。具体的二级菜单元素如下所示：

<header class="header">
        <ul class="topnav clearfix">
            <li>
                <a href="">测试</a>
                <div class="submenu">
                    简单写几个字，可以在鼠标移入*测试*的时候显示这段文字。
                    心机之蛙一直摸你肚子，心机之蛙一直摸你肚子，心机之蛙一直摸你肚子，心机之蛙一直摸你肚子，心机之蛙一直摸你肚子，心机之蛙一直摸你肚子，心机之蛙一直摸你肚子。
                </div>
            </li>
            <li><a href="">无二级菜单</a></li>
            <li><a href="">无二级菜单</a></li>
            <li><a href="">无二级菜单</a></li>
            <li><a href="">无二级菜单</a></li>
        </ul>
    </header>

【注】：二级菜单其实一直存在于他的一级元素内部，后文讲解为什么这么写。

设置导航栏样式

• 设置导航栏内的行高；
• 元素的高度固定。

.header{
	height: 40px;
    line-height: 40px;
}

设置内部li的具体样式：

• 宽高
• 间距
• 文字样式
• 设置背景颜色方便调整
• 设置为相对定位（因为二级菜单需要依据列表而定位）

.header>.topnav>li{
    margin: 0 20px;
    background-color: red;
    width: 100px;
    text-align: center;
    height: 40px;
}

设置二级菜单的相关样式：

• 二级菜单的位置
• 二级菜单的定位

.header>.topnav>li>.submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
    /*不生成盒子，后续等待光标移入来设置显示*/
    display: none;
    border: 2px solid lightblue;
    border-bottom: none;
	/*设置为绝对定位*/
    position: absolute;
	/*设置当前二级菜单的右边框与裂变元素的右边框对齐*/
    right: -2px;
}

设置光标移入时列表的变化：

.header>.topnav>li:hover{
    background-color: #ccc;
    border: 2px solid #ccc;
    border-bottom: none;
	/*单纯为了行高能不会随着光标的移入移出而发生变化*/
    line-height: 36px;
}

避免高度坍塌的设置

.clearfix::after{
    clear:left;
    display: block;
    content:"";
}

设置二级菜单的显示：

.header>.topnav>li:hover>.submenu{
    display: block;
}

总结

根据不同的业务需求或不同的程序员来做一个二级菜单，所用的办法也不一样，所以本篇笔记的总结主要指出二级菜单的核心逻辑。具体逻辑如下：

• 首先二级菜单一般出现在导航栏中（虽然其他地方也有出现，但主要还是在导航栏）；
• 在需要二级菜单的位置加上嵌套的元素，并将元素的display设置为none。——表示不给当前元素分配区域，这样在页面上就不会显示样式（即看不到）。
• 设置导航栏中的相关元素的为类选择器hover，表示光标移入后的样式，设置该二级菜单显示出来。
• 最重要的一步：一般来说，二级菜单会使用绝对定位来根据自己与导航栏相关元素的位置。所以需要补充导航栏中的每个选项为相对定位，然后将二级菜单设置为绝对定位。这样就可以理解为导航栏中的相关选项和对应的二级菜单在位置上绑定了。

主要逻辑就如上所述，其余的背景、边框等等属性的样式自己看着弄就行