CSS——下拉框的制作（以小米商城为例）

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125680858

文章目录

前言
一、下载app下拉框实现
二、购物车下拉框实现
三、display:none ; 和 visibility:hidden；的区别
总结

前言

本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。

一、下载app下拉框实现

解决思路：

1、可以将下拉框设为下载app的一个子元素并将下拉框的位置，样式设置完备。

2、将准备好的下拉框起初设置为不可见。

3、当鼠标悬停在下载app 这个父元素时下拉框才可呈现。

HTML结构

<li class="code-upbox">
<a href="#">下载app</a>

<div class="triangle">
</div>

<div class="two-code">
<img src="./image/小米二维码.png" alt="">
<span>小米商城APP</span>
</div>
</li>

CSS样式

/* 下载app 二维码下拉框设置 */

.two-code {

visibility: hidden;

height: 0px;

width: 124px;

font-size: 14px;

box-shadow: 0 1px 5px #aaa;

color: #333;

position: absolute;

top: 40px;

left: 50%;

background: #fff;

text-align: center;

line-height: 1;

z-index: 99;

transition: height .3s linear;

}

/* 给二维码下拉框添加动画效果 */

.code-upbox:hover .two-code {

height: 148px;

}

.code-upbox:hover .two-code>img {

height: 90px;

}

/* 上方小三角形 */

.triangle {

visibility: hidden;

position: absolute;

top: 26px;

width: 0;

height: 0;

margin-left: 15px;

border: 7px solid white;

border-top-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

/* 设置二维码下拉框的样式 */

.two-code>img {

width: 90px;

height: 0px;

margin: 18px 17px 10px 17px;

transition: height .2s;

}

/* 使二维码下拉框hover时显示出来*/

.code-upbox:hover .two-code {

visibility: visible;

}

.code-upbox:hover .triangle {

visibility: visible;

}

二、购物车下拉框实现

解决思路在上文已经介绍，这里不再赘述。

HTML结构

<li class="shopping-car">

<div class="car-upbox">

<i class="iconfont"></i>

<a href="#">购物车（0）</a>

</div>

<div class="car-downbox"><span>购物车中还没有商品，赶紧选购吧！</span></div>

</li>

CSS样式

/* 导航购物车的样式 */

.shopping-car {

background-color: #424242;

width: 120px;

height: 40px;

margin-left: 15px;

}

/* 购物车下拉框的上方盒子样式 */

.car-upbox {

position: relative;

padding-left: 20px;

z-index: 1000;

}

/* 购物车下拉框的样式 */

.car-downbox {

visibility: hidden;

position: relative;

width: 316px;

height: 0px;

background-color: #fff;

right: 196px;

box-shadow: 0 2px 10px rgb(0 0 0 / 15%);

z-index: 40;

transition: height .3s;

}

/* 给购物车下拉框添加动画效果 */

.shopping-car:hover .car-downbox {

height: 98px;

}

/* 下拉框中文字的样式设置 */

.car-downbox span {

color: #424242;

line-height: 100px;

text-align: center;

margin-left: 70px;

}

/* 购物车的hover效果 */

.shopping-car:hover .car-upbox,

.shopping-car:hover .car-downbox {

background-color: #ffffff;

visibility: visible;

}

/* 使购物车区域hover时变色 */

.shopping-car:hover .car-upbox i,

.shopping-car:hover .car-upbox a {

color: #FF6714;

}