定位练习 1：二级菜单

最新推荐文章于 2024-05-29 15:45:18 发布

guai_guai_guai

最新推荐文章于 2024-05-29 15:45:18 发布

阅读量92

点赞数

分类专栏： # 前端知识总结文章标签： css html 前端

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134298388

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这次就尝试制作以下二级菜单吧

首先还是先准备好reset.css以及二级菜单.css,之后在设计自己的样式时，名字最好用英文来表示。先将二级菜单中的元素结构设计出来。

<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">Lorem.</a></li>
            <li><a href="">Libero?</a></li>
            <li><a href="">Nobis.</a></li>
            <li>
                <a href="">客户服务</a>
                    </ul>
            </li>
            <li><a href="">Illo!</a></li>
        </ul>
    </header>
    
</body>

之后设置菜单背景颜色，字体颜色，单行文本垂直居中（line-height=height），高度，li会自动换行，故这里li元素要设置浮动，设置浮动时，一定要注意高度坍塌问题，解决该问题的方法详见上一节浮动练习

之后是每个li元素之间的左右margin以及文字水平居中和左右padding

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.header{
    background: #e3e4e5;
    color: #999;
    height: 40px;
    line-height: 40px;
}
/* >选中是含有topnav属性元素里子元素里的所有li元素 */
.header .topnav>li{
    float: left;
    margin: 0 20px ;
    padding: 0 8px; 
    text-align: center;
    height: 40px;
    box-sizing: border-box;
}

效果如下图：

二级菜单

接下来我们做这个区域：

首先在客户服务这个li元素里添加一个类名为submenu的div，并添加某些文字

<li>
                <a href="">客户服务</a>
                <div class="submenu">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid recusandae rerum pariatur id! Corrupti vitae nam similique blanditiis beatae, nisi repellat nulla, minima ipsum illum culpa at dolorem inventore.
                   
                </div>
                
            </li>

以下为效果：

内容撑开固定区域问题

为了方便看出问题，我将li元素设置了背景，发现客户服务的二级菜单内容将页面充满了，说明此时li元素要定宽，不可用padding 。

.header .topnav>li{
    float: left;
    margin: 0 20px ;
    /* padding: 0 8px; */
    width: 150px;
  
    text-align: center;
    height: 40px;
}

定宽之后就是这个效果

子菜单里内容宽度，文字排列方式，行高与父元素均不同，这时就要单独设置 submenu的样式，设置其宽度，高度等，紧接着设置鼠标移入菜单时的样式，边框（无下边框），背景颜色，

处理鼠标移入是的文字偏移问题

这时会发现鼠标移入li元素时，li元素左右上下位置有轻微的的变化，这是因为字体行高是固定的，加上边框后，字体就会略向下偏移，这时只要适当减小行高即可

实现鼠标移入时显示二级菜单，移出时不显示

那么怎么实现当鼠标移入菜单时二级菜单显示，而移出时就不显示了呢？只需在鼠标未移出时设置display为block，而鼠标移出时，设置display为none即可

接着为二级菜单的div设置边框，设置边框时要注意加上box-sizing:boder-box;确保盒子的大小不会因为添加边框而改变。

绝对定位包含块的有关细节

可以发现二级菜单的右边缘紧靠着客户服务的右边缘，这时就需要用到绝对定位的知识，在调整精确的位置时，二级菜单相对于包含块（上一个li元素的内容区），该包含块有边框，不能直接设置right为0，要适当往右移动一点

添加元素遮盖某些边框

之后我们就要解决如何将二级菜单上偏右边框消失或隐藏，我们可以再写一个元素将其覆盖即可，这个元素我们可以设置其为伪元素选择器，再用绝对定位将其放到适宜位置即可

.header .topnav>li:hover::after{
    content: "";
    width: 100%;
    height: 5px;
    background-color: #fff;
    position: absolute;
    bottom: -2px;
    left: 0;

}

设置完成后，就很好的达到了这种效果。

之后再为header设置一个固定定位，这是一定要设置宽度为100%，因为绝对定位，固定定位宽度适应内容高度，必须要定宽，之后再给二级菜单以及下面的内容区添加文字，二级菜单不会影响内容位置。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/../css/二级菜单.css">
</head>
<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">Lorem.</a></li>
            <li><a href="">Libero?</a></li>
            <li><a href="">Nobis.</a></li>
            <li>
                <a href="">客户服务</a>
                <div class="submenu">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid recusandae rerum pariatur id! Corrupti vitae nam similique blanditiis beatae, nisi repellat nulla, minima ipsum illum culpa at dolorem inventore.
                    <ul >
                        <li>Lorem.</li>
                        <li>Vero.</li>
                        <li>Ut!</li>
                        <li>Modi.</li>
                        <li>Repellat.</li>
                        <li>Quaerat!</li>
                        <li>Libero!</li>
                        <li>Exercitationem!</li>
                        <li>Omnis?</li>
                        <li>Debitis.</li>
                    </ul>
                </div>
                
            </li>
            <li><a href="">Illo!</a></li>
        </ul>
    </header>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium, delectus! Aspernatur quaerat corrupti pariatur ullam ipsa tempore voluptatem, eius illum iusto earum esse, commodi eaque a fuga ab accusantium mollitia, vel nulla eligendi iure hic voluptate! Tenetur, libero. Dolore, necessitatibus recusandae. Perferendis incidunt minima fugit velit, consequatur placeat amet cupiditate esse error, earum exercitationem possimus rem! Quae, culpa tempore enim tenetur quasi in molestiae dignissimos quidem aliquid vitae eaque sapiente voluptates possimus doloremque reiciendis eveniet quam nobis placeat repellat alias eos earum? Qui explicabo amet non cum natus, fugit hic harum quaerat porro molestias delectus corrupti deleniti? Incidunt praesentium necessitatibus doloremque consectetur aliquam dolores dicta quibusdam animi, accusantium aliquid assumenda nihil officiis maxime quod veniam! Quia excepturi repudiandae, molestiae fugiat vel voluptatem eligendi dicta inventore aspernatur laborum reprehenderit odit, in ducimus voluptate, placeat modi explicabo corporis! Voluptas, sed reprehenderit? Pariatur ipsum, magni officiis, accusamus corrupti unde nostrum repellat vitae nobis, corporis eos eaque provident praesentium quidem! Sapiente deserunt doloribus eaque saepe totam fugit quo velit voluptates! Rerum, quos repellat iste tempora omnis praesentium, veritatis odio ab aspernatur voluptates doloremque. Eligendi nemo ipsa eaque officia aliquam quaerat aut odio porro doloremque sit, atque, ea aperiam est qui necessitatibus obcaecati, vero tempore corporis earum! Recusandae, eos architecto odio voluptas nostrum culpa illum quidem beatae ad pariatur iste alias impedit, dignissimos odit maxime modi exercitationem temporibus quod quas! Dolores odit blanditiis explicabo, architecto quo nulla tempora culpa recusandae quia dicta veritatis minus iste quisquam repellat! Tenetur ipsum aperiam sequi odio fugit! Nulla molestias eligendi minima quod excepturi vel corporis autem ab rerum neque quasi eos repellendus aperiam, nostrum corrupti officia maxime expedita deserunt dolor unde explicabo hic. Maxime voluptatibus hic in est cum nemo qui quidem libero perspiciatis delectus, possimus vel nobis dolore debitis ratione nisi? Non culpa est pariatur exercitationem minima, doloremque ea, provident aperiam, quam inventore temporibus dolorem soluta sed fugit labore deleniti suscipit omnis doloribus eum at libero? Ipsa expedita blanditiis soluta quisquam distinctio placeat, dignissimos itaque consequatur est autem recusandae natus voluptatum unde amet quasi adipisci consequuntur! Iusto mollitia labore reiciendis sunt id omnis quam quibusdam animi reprehenderit neque nam repellat iure, soluta quos officiis esse, quis blanditiis nemo veritatis culpa quia quas, voluptas nisi. Sed similique facere molestias corrupti neque blanditiis qui temporibus accusantium nisi reiciendis iste corporis aliquam voluptatem ut possimus, debitis doloribus. Doloribus maiores ab maxime deserunt delectus! Ut molestias iste voluptatibus, aut numquam voluptates aspernatur unde labore sit accusantium veniam beatae. Nostrum explicabo, expedita deserunt sed cumque, beatae, eligendi maiores libero error quas cum quaerat! In neque quos ullam corporis ex unde nulla enim harum nesciunt laudantium tenetur aliquid obcaecati atque ipsum doloremque, iste, dolore perferendis suscipit deserunt alias illo? Iusto, enim itaque? Accusantium voluptates eveniet illum minima autem cupiditate vitae consequuntur facilis tempora quaerat suscipit eius veniam necessitatibus voluptate laboriosam quia quibusdam dolorem, beatae perferendis, at minus blanditiis nulla ab! Id, deserunt qui quaerat voluptate non vitae saepe ex corrupti similique quae veniam, totam beatae, maiores expedita et! Nisi, quos. Vitae dignissimos laudantium possimus saepe mollitia unde, inventore, sunt, reprehenderit qui nostrum earum dicta labore ab excepturi! Culpa explicabo, accusamus asperiores perferendis eveniet quod praesentium nam, nisi exercitationem labore eum quidem maxime. Dicta ut molestiae vitae quia. Ipsa sunt dolores placeat quidem enim modi neque velit sit distinctio consequatur optio aliquam libero dolorum voluptates ut rerum id repudiandae, facere eos atque accusantium voluptatum pariatur voluptatem nihil? Perferendis delectus accusantium, exercitationem consectetur placeat asperiores doloremque quae provident minus adipisci eaque nihil velit sit non. Nam, et accusamus? Nihil amet dolorum modi ratione suscipit commodi! Inventore magnam eveniet, quas optio exercitationem, ipsa hic quisquam adipisci perferendis et error, necessitatibus tempora? Iste labore deleniti tempora, sed saepe quaerat excepturi reprehenderit at numquam voluptates tempore, sint fuga maxime necessitatibus eius et dolores harum nihil molestias dolorum aut assumenda cupiditate vel? Autem, facere officia! Officia commodi vero ad dolor, doloribus illum ipsum in ipsam dignissimos iusto laborum deserunt et. Eius quam est modi! Dolorem distinctio dolore nemo ut aliquam quibusdam sit ipsum, et obcaecati, maxime ipsam corporis accusantium expedita explicabo, possimus odio quaerat? Voluptas ut atque animi nemo accusamus, aliquid sed quidem neque quam dolores numquam fugit doloremque sapiente voluptate esse reiciendis porro omnis autem! Suscipit minus dolorem aliquid, reiciendis inventore aperiam eos, maiores, enim itaque eum quasi. Similique facilis architecto accusantium magni vero dignissimos odio, nostrum molestias? Deserunt asperiores facilis tempore, alias tempora inventore aut repellendus tenetur, ad, magnam officia debitis a soluta consectetur mollitia quod nobis. Excepturi laborum earum cum, optio numquam laboriosam voluptate vero quidem iusto voluptatibus, quibusdam quae obcaecati autem iure voluptatem esse pariatur reprehenderit. Ex molestiae in cum explicabo rerum at cumque, corrupti voluptatem? Labore numquam reprehenderit voluptatibus recusandae voluptate, nulla possimus eum magni saepe culpa facere ipsa voluptatum nihil fugiat corporis placeat deserunt voluptates et nam, exercitationem similique nisi veritatis quo at? Laboriosam, fugit accusamus? Ducimus, odit, sequi cum, explicabo iste eveniet dolorum aperiam assumenda dolorem corporis nam at fugit error quisquam vitae exercitationem. Illum molestias quis, asperiores minima nobis a modi aliquam corrupti minus eaque! Similique impedit praesentium sed quisquam nobis maiores exercitationem molestias expedita! Dolores cupiditate, distinctio veniam iure rerum deserunt placeat in quibusdam nesciunt est ullam expedita exercitationem odit enim quae itaque suscipit obcaecati ab asperiores, labore eos? Quia autem voluptas expedita et culpa laborum corporis inventore ducimus mollitia, architecto tempora? Reiciendis, vitae rem animi culpa fuga consectetur labore quisquam aspernatur quidem nulla ratione accusantium doloremque ipsa a, voluptas aliquid dolor ex possimus in earum maiores impedit atque blanditiis ut. Repudiandae eligendi architecto animi. Ea ex inventore quas magni tenetur. Quaerat explicabo molestias tempore odio? Deserunt cupiditate obcaecati esse voluptatum asperiores harum quidem, a dolores earum expedita corporis cum mollitia veniam iusto quod odit vel optio consequuntur vitae aspernatur dolore? Cum delectus voluptatem nostrum dolorum error, unde ducimus omnis repellendus, quisquam nisi vel beatae porro officia nemo odit nulla rem alias harum illo a ratione. Voluptas ex dolor iusto in natus laborum necessitatibus, at accusamus corporis reprehenderit aliquid libero tempora, suscipit perspiciatis, nam repudiandae illo cumque! Aut, consequuntur? Nobis, labore.
    </div>
</body>
</html>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.header{
    background: #e3e4e5;
    color: #999;
    height: 40px;
    line-height: 40px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}
/* >选中是含有topnav属性元素里子元素里的所有li元素 */
.header .topnav>li{
    float: left;
    margin: 0 20px ;
    /* padding: 0 8px; */
    width: 150px;
  
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    position: relative;
}
.header .topnav>li:hover{
background-color:#fff;
border: 2px solid #ccc;
border-bottom: none;
/* 适当减小行高 */
line-height: 38px;
}
 .header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
    /* 不生成盒子 */
    display: none;
    border: 2px solid #ccc;
    box-sizing: border-box;
    position:absolute ;
    right: -2px;
    background:#fff ;
} 
/* 鼠标移入li时，找到下面的submenu */
.header .topnav>li:hover .submenu{
    display: block;
}
/* 找到鼠标移入时的li添加元素 */
.header .topnav>li:hover::after{
    content: "";
    width: 100%;
    height: 5px;
    background-color: #fff;
    position: absolute;
    bottom: -2px;
    left: 0;

}

整体效果：