Search code examples
htmlcssaccordionhorizontal-accordion

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

I have been trying to find css for creating an icon slider with tooltips. I haven't been able to find one that uses pure css. Instead I have found the below accordian which I think could be a nice alternative. However, I am struggling a bit with the css customisation. I cant figure out how to make it responsive. Also I would like to reference img urls as opposed to using unicode, but if I remove the unicode from the html, I get an error (ex. the icon dissapears)

Any help will be much appreciated.

Thanks, Ric

@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>

Solution

  • Im trying to figure out what it is that you want. Responsive or scalable.

    First off all the nav has a fixed width and height in your css:

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

    This makes it not so responsve. You can add a media query like so:

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

    If you play arround with the height and width of your elements you can scale it down depending on a breakpoint ( or multiple break-points )

    Also the unicode is a invisible spacer so to say to display the image. Since the image is set as a background you need a spaceholder to make it visible or set a static height and weight to that element as well.