TERONI.RU



» » Кнопка «Показать еще» на HTML и CSS для сайта



Кнопка «Показать еще» на HTML и CSS для сайта

Кнопка «Показать еще» на HTML и CSS для сайта
Давайте разберем пример кнопки «Показать еще» на HTML и CSS для сайта. В этой статье узнаете про функцию, с которой можно отобразить больше контента в улучшенном интерфейсе при помощи кнопки «Загрузить еще» на CSS. Или по другому можно сказать, что произвести загрузку с большими возможностями на HTML и CSS. Как можно заметить ниже видео-обзор синие прямоугольники, которые созданы на li и ul теге HTML, но здесь также и div аналогично можно задействовать.

Безусловно, что показ контента вашего на сайте очень важен, но однако на веб-странице так много контента и очень мало места. И прежде чем гость или пользователь перестанет прокручивать страницу, и не найдет, то что ему нужно. И для этого был создан элемент функций для посетителей веб-сайта, где можно внедрить этот метод методы для отображения контента наиболее интуитивно понятным способом.

Теперь эту функцию, назовем ее «Загрузить больше» может быть реализован с помощью CSS, где не нужно применять jаvascript, JQuery или библиотеки. Также вы можете расположить изначально скрытым любой функционал или материал, но так, что изначально будет понятно, что при клике далее будет находиться. Но думаю вы поняли смысл этого материала, который самостоятельно можете создать.

Изначально при открытие сайта:

Кнопка «Показать еще» на HTML и CSS для сайта
При клике с дальнейшим просмотром открывается остальная информация:

Кнопка «Показать еще» на HTML и CSS для сайта

Пример Кнопки «Показать еще» для сайта


HTML

<div class="zagruska-proizvod-container">
  <input type="checkbox" id="zagruska-proizvod"/>
  <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>  
  </ul>
  <label class="zagruska-proizvod-btn" for="zagruska-proizvod">
  <span class="unloaded">ЗАГРУЗИТЬ БОЛЬШЕ</span>
  <span class="loaded">УМЕНЬШЕННЫЙ ПРОСМОТР</span>
  </label>
</div>

CSS

.zagruska-proizvod-container {
  background: #fff;
  width: 500px;
  min-height: 500px;
  margin: 20px auto;
  position: relative;
}
.zagruska-proizvod-container ul {
  list-style-type: none;
  padding: 0;
}
.zagruska-proizvod-container ul:after {
  content: "";
  display: table;
  clear: both;
}
.zagruska-proizvod-container ul li {
  width: calc(25% - 10px);
  margin: 10px 5px 0;
  height: 100px;
  background: #1D95F8;
  color: #fff;
  float: left;
  border-radius: 2px;
}
.zagruska-proizvod-container ul li:nth-child(1n + 5) {
  max-height: 0;
  opacity: 0;
  transition: 0.1s ease-in;
}
.zagruska-proizvod-container .zagruska-proizvod-btn {
  width: 264px;
  line-height: 42px;
  border-radius: 5px;
  margin: 0 auto;
  display: block;
  background: #3d3c50;
  color: #f5f2f2;
  cursor: pointer;
  text-align: center;
}
.zagruska-proizvod-container .zagruska-proizvod-btn:hover {
  background: #211e1e;
}
.zagruska-proizvod-container .zagruska-proizvod-btn .loaded {
  display: none;
}
.zagruska-proizvod-container #zagruska-proizvod {
  display: none;
}
.zagruska-proizvod-container #zagruska-proizvod:checked ~ ul li:nth-child(1n + 5) {
  max-height: 999px;
  opacity: 1;
  transition: 0.2s ease-in;
}
.zagruska-proizvod-container #zagruska-proizvod:checked ~ .zagruska-proizvod-btn .loaded {
  display: block;
}
.zagruska-proizvod-container #zagruska-proizvod:checked ~ .zagruska-proizvod-btn .unloaded {
  display: none;
}

посмотреть пример
Теперь у вас есть представление о том, как будет выглядеть после полноценной установки. Где появляется большая возможность установить эту функцию на домашней странице своего веб-сайта или на странице портфолио.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.