Wysuwany widget na stronę

Tematem niniejszego artykułu będzie wysuwany widget na stronę.

Większość tego typu gadżetów jest wykonywana w jQuery/JavaScript.

W tym artykule przedstawię alternatywny sposób, wykorzystując jedynie możliwości jakie daje nam CSS3 z atrybutem transition.

Jeśli przeglądarka nie obsługuje powyższej właściwości, widget w dalszym ciągu będzie działał, lecz bez animacji.

Kod

#widget-1 {
  width: 200px;
  height: 200px;
  color: white;
  position: absolute;
  left: -171px;
  top: 50px;
  font: 14px arial, sans-serif;
  background: #3B579D url('FB-f-Logo__blue_29.png') no-repeat top right; /* https://www.facebookbrand.com/ */

  transition: left 0.5s ease;
  border-radius: 0px 5px 5px 0px;
}

#widget-1:hover {
  left: 0px;
}

#widget-1 .widget-content {
  padding: 1em;
  margin-right: 29px;
}

Podgląd blokowy

Rezultat