Не знаю как сделать social bar

222

31 мая 2017, 02:58

Доброго времени суток. Не знаю как сделать такой сошиал бар ( правый нижний угол ):

после с номером, и странами у меня же есть, не понимаю как сделать чтобы при нажатии на иконку выежало поле ( там где нужно вводить номер телефона ). В не активном состоянии это просто иконка с телефоном. После нажатия она выежает вправо, одталкивает другие иконки в лево. При нажатии на другую иконку, та заежает на зад, выежает вторая ( такое нужно только для телефона и емейла ).

Answer 1

$("div").hover(function() { 
  $(this).toggleClass("overEveryone"); 
});

.ha div { 
  display: inline-block; 
  height: 30px; 
  position: relative; 
  padding: 10px; 
  width: 30px; 
  border: 1px solid red; 
  background-color: green; 
  //transition-property: background-color; 
  transition-duration: 1s; 
} 
 
.ha div:not(:nth-child(1)) { 
  margin-left: -20px; 
} 
 
.b2 { 
  z-index: 10; 
} 
 
.b3 { 
  z-index: 11; 
} 
 
.b1 { 
  z-index: 1; 
} 
 
div .overEveryone { 
  margin:0 20px; 
  background: red; 
  z-index: 99999; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="ha"> 
  <div class="b1">1</div> 
  <div class="b2">2</div> 
  <div class="b3 ">3</div> 
</div>

Это примерный набросок того, с чего можно начать. Тут еще много можно поиграться с анимацией, но смысл надеюсь понятен.