CSS - 如何使带有图标和文本响应的水平手风琴

如何解决CSS - 如何使带有图标和文本响应的水平手风琴

我一直在寻找用于创建带有工具提示的图标滑块的 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')">&#xf1cb;</div>
    <div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')">&#xf1cb;</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')">&#xf1cb;</div>
    <div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')">&#xf1cb;</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')">&#xf1cb;</div>
   <div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')">&#xf1cb;</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')">&#xf1cb;</div>
    <div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')">&#xf1cb;</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')">&#xf1cb;</div>
    <div class='small' style=" background-image:url('https://ecodoghub.com/wp-content/uploads/2021/01/low-impact-dyes.png')">&#xf1cb;</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 是一个不可见的分隔符，可以说是为了显示图像。由于图像被设置为背景，因此您需要一个空格符以使其可见或为该元素设置静态高度和重量。