Как сделать такой переключатель на css?

123
12 января 2017, 03:51

Нужно закодить такой переключатель на css+html. Должен прыгать индикатор - верхняя зеленая полоска:

Answer 1

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.b { 
  text-align: center; 
} 
.b-inner { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  font-size: 0; 
} 
.b-item { 
  margin: 10px; 
  width: 100px; 
  min-height: 150px; 
  display: inline-block; 
  vertical-align: top; 
  border: 1px solid #ccc; 
  position: relative; 
  font-size: 16px; 
} 
.b-item:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 50%; 
  width: 70px; 
  margin-left: -35px; 
  height: 2px; 
  background: #555; 
} 
.b-line { 
  position: absolute; 
  top: 10px; 
  left: 25px; 
  width: 70px; 
  height: 4px; 
  background: green; 
  transition: 0.5s linear; 
} 
.b-item:nth-of-type(2):hover ~ .b-line { 
  left: calc(100px + 45px); 
} 
.b-item:nth-of-type(3):hover ~ .b-line { 
  left: calc(200px + 65px); 
}
<div class="b"> 
  <div class="b-inner"> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-line"></div> 
  </div> 
</div>

Example Fiddle

READ ALSO
Как сделать форму обратной связи с загрузкой нескольких изображений?

Как сделать форму обратной связи с загрузкой нескольких изображений?

Саму форму и загрузку нескольких изображений я делаю так:

125
Как связать плагин Dropzone.js с обычной формой обратной связи?

Как связать плагин Dropzone.js с обычной формой обратной связи?

Мне нужно реализовать возможность отправки нескольких изображений + введенные данные (имя, телефон и тд)

284
Включение и выключение таблиц стилей

Включение и выключение таблиц стилей

Как можно сделать переключение css не input-ом, а списком li ну или хотябы ссылкойТ

128
Проблемы с отображением шрифта

Проблемы с отображением шрифта

При подключении шрифта в таком варианте

163