问题描述
我一直在寻找用于创建带有工具提示的图标滑块的 css。我一直没能找到一个使用纯 css 的。相反,我找到了下面的手风琴,我认为它可能是一个不错的选择。但是,我在 css 自定义方面有点挣扎。我无法弄清楚如何使其响应。另外我想引用 img urls 而不是使用 unicode,但是如果我从 html 中删除 unicode,我会收到一个错误(例如图标消失)
任何帮助将不胜感激。
谢谢, 瑞克
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css);
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
html,body {
height: 100%;
}
body {
font: 16px/1 'Open Sans',sans-serif;
background: #ddd;
}
.nav {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 80px;
margin-top: -40px;
margin-left: -250px;
background: #fff;
transform: translateZ(0);
}
.nav:hover .link {
width: 5%;
}
.nav .link {
position: relative;
float: left;
width: 20%;
height: 100%;
color: #aaa;
border-right: 1px solid #ddd;
transition: .5s width;
overflow: hidden;
cursor: pointer;
}
.nav .link:last-child {
border-right: 0;
}
.nav .link:hover {
width: 80%;
color: #555;
}
.nav .link .small {
position: absolute;
top: 0;
left: 0;
width: 100px;
line-height: 78px;
text-align: center;
font-family: fontawesome;
font-size: 24px;
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
}
.nav .link .full {
position: absolute;
top: 22px;
left: 100px;
text-transform: uppercase;
}
.nav .link .full .f1,.nav .link .full .f2 {
font-size: 16px;
font-weight: 700;
white-space: Nowrap;
}
.nav .link .full .f2 {
margin-top: 8px;
font-size: 12px;
}
.nav .link .prev {
position: absolute;
top: 0;
left: 7px;
font-family: fontawesome;
font-size: 12px;
line-height: 78px;
transition: .5s opacity;
opacity: 0;
background-size: 35px;
background-repeat: no-repeat;
background-position: center;
}
.nav .link:hover .prev {
opacity: 0;
}
.nav:hover .prev {
opacity: 1;
}
<!DOCTYPE html>
<html >
<head>
<Meta charset="UTF-8">
<title>Accordion Navigation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='nav'>
<div class='link'>
<div class='prev' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='full'>
<div class='f1'>headline</div>
<div class='f2'>some additional info to this link</div>
</div>
</div>
<div class='link'>
<div class='prev' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='full'>
<div class='f1'>headline</div>
<div class='f2'>some additional info to this link</div>
</div>
</div>
<div class='link'>
<div class='prev' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='full'>
<div class='f1'>headline</div>
<div class='f2'>some additional info to this link</div>
</div>
</div>
<div class='link'>
<div class='prev' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='full'>
<div class='f1'>headline</div>
<div class='f2'>some additional info to this link</div>
</div>
</div>
<div class='link'>
<div class='prev' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')"></div>
<div class='full'>
<div class='f1'>headline</div>
<div class='f2'>some additional info to this link</div>
</div>
</div>
</div>
<div>
</body>
</html>
解决方法
我想弄清楚你想要什么。响应式或可扩展。
首先,所有导航在您的 css 中都有固定的宽度和高度:
.nav { width: 500px; height: 80px; }
这使它不那么敏感。您可以像这样添加媒体查询:
@media (min-width: 576px) {custom style here}
或 @media (max-width: 576px) {custom style here}
如果你玩弄元素的高度和宽度,你可以根据断点(或多个断点)缩小它
此外,unicode 是一个不可见的分隔符,可以说是为了显示图像。由于图像被设置为背景,因此您需要一个空格符以使其可见或为该元素设置静态高度和重量。