使用HTML+css 写一个靠右边顶端悬浮停靠菜单包含3个div按钮按钮竖着排列菜单会自动收缩
<!DOCTYPE html>
<html>
<head>
<title>靠右边顶端悬浮停靠菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<pre><code> .container {
position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: #333;
color: #fff;
z-index: 999;
}
.btn {
display: block;
width: 30px;
height: 30px;
margin-bottom: 5px;
background-color: #fff;
color: #333;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #555;
color: #fff;
}
.btn span {
display: inline-block;
transform: rotate(-90deg);
transition: all 0.3s ease;
}
.container:hover .btn span {
transform: rotate(0deg);
}
.menu {
height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.container:hover .menu {
height: 100px;
padding-top: 10px;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="btn">
<span>+</span>
</div>
<div class="menu">
<div class="btn">按钮1</div>
<div class="btn">按钮2</div>
<div class="btn">按钮3</div>
</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/eCh3 著作权归作者所有。请勿转载和采集!