CSS

Question

我一直在寻找 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>

Answer 1

我正在尝试弄清楚你想要什么。响应式或可扩展。

首先，在您的 css:

中，所有导航都有固定的宽度和高度

.nav { width: 500px; height: 80px; }

这使得它没有那么敏感。您可以像这样添加媒体查询：

@media (min-width: 576px) {custom style here} 或 @media (max-width: 576px) {custom style here}

如果您调整元素的高度和宽度，您可以根据断点（或多个断点）缩小它

此外，unicode 是一个不可见的间隔符，可以说是显示图像。由于图像被设置为背景，因此您需要一个占位符以使其可见，或者也为该元素设置一个静态高度和重量。

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

CSS - How to make horizontal accordian with icon and text responsive

html

accordion

horizontal-accordion