Раздвижные ссылки как на GitHub. Style Sliding Links Like GitHub

- · Опубликовано · Обновлено

Заметил на GitHub прикольный эффект раздвижных ссылок.По умолчанию ссылки имеют усеченный текст, а при наведении на ссылку, появляется полностью его содержимое. Для реализации этого эффекта можно использовать один лищь CSS. Итак позвольте мне показать вам как это делается.

HTML

Очевидно что нужно добавить html элемент, содержащий ссылку, но менее очевидно, что нужно обернуть ссылку в свой контейнер, потом увидите, для чего это нужно. Пример:

  Pull request from: <a class="github-branch">david-walsh-test-branch-name</a>

CSS

Оборачиваемый элемент требует max-width и position, установленный в relative

.github-branch-wrap {
  max-width:690px;
  position:relative;
}

Анимация концентрируется вокруг CSS transitions и max-width

.github-branch {
  position: relative;
  height: 24px;
  display: inline-block;
  top: 7px;
  padding: 0 7px;
  background: #444;
  background: -moz-linear-gradient(#444, #222);
  background: -webkit-linear-gradient(#444, #222);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#222222')";
  border: 1px solid black;
  border-radius: 3px;
  color: white;
  font-family: Consolas,"Liberation Mono",Courier,monospace;
  font-size: 13px;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  z-index: 100;

  max-width: 125px;
  transition: .2s max-width linear;
  -o-transition: .2s max-width linear;
  -moz-transition: .2s max-width linear;
  -webkit-transition: .2s max-width linear;
  -ms-transition: .2s max-width linear;
}
/* Transition to complete width! */
.github-branch:hover, .github-branch:active {
  max-width: inherit;
}

[mantra-button-light url="/wp-content/uploads/2012/08/slide_links_demo.html"]Демо тут[/mantra-button-light]

 

Также вы можете посмотреть как создать раздвижкую панель используя jquery

Метки: