JavaScript закладки

Сегодня я решил рассказать Вам про один очень интересный метод, как можно экономить место на сайте, особенно оно ценится при просмотре на мобильных устройствах и различных планшетах, разместить активные JavaScript закладки при наведении. В целом код состоит из html, css и javascript. В принципе, пример очень схожий с JQuery закладки tabs, где вместо сворачивания менялись закладки при клике. 

Для начала нам потребуется контейнер и мы создаем тег div с классом header. Далее нужно придумать функцию, которая будет разворачивать активную закладку при наведении. Для этого создаем еще один тег div с классом content и присваиваем ему следующие события на JavaScript:

onmouseout='this.style.zIndex=0;this.style.position="absolute";'
onmouseover='this.style.zIndex=100;this.style.position="relative";'

Как видно, в первом событии onmouseout индекс равен нолю, а позиционирование absolute, которое придает событию сворачивать контент при выходе с активного элемента. То есть, когда на категорию "Веб-программирование" или "Веб-приложение" не было наведено, то оно находится в свернутом состоянии.

И в обратном случае с событием onmouseover, когда на категорию наведено, индекс резко повышается до 100 и позиционирование меняется на relative. А теперь давайте сделаем определение двух событий onmouseout и onmouseover, которые практически всегда плотно взаимодействуют друг с другом.

onmouseout - событие, которое срабатывает, когда наведение сводится с активного элемента.

onmouseover - событие, которое срабатывает, когда наведение происходит на активный элемент.

Как видно по определению, суть их довольно таки проста и взаимодействие понятно. Навел на элемент он открылся, ушел с элемента он закрылся. Теперь нам остается вывести категорию и текст. Все также, с помощью тегов div: для категории класс title, для текста text_content.

Весь код HTML и JavaScript.

<div class='header'>
<div class='content'
onmouseout='this.style.zIndex=0;this.style.position="absolute";'
onmouseover='this.style.zIndex=100;this.style.position="relative";'>
<div class='title'>Категория</div>
<div class='text_content'>
Ваш текст
</div>
</div>
</div>

Поговорим теперь о стилях CSS. Создаем класс header и указываем ему обязательные свойства: позиционирование отводится на relative, соответствую событию onmouseover и обязательное свойство padding-bottom, которое опускает каждую категорию на 20 пикселей, чтобы ее было видно.

.header{
  position:relative;
  width:500px;
  padding-bottom: 20px;
}

Создаем класс content с обязательными свойствами: позиционирование absolute, соответствуя событию onmouseout, а также background - текущий фон страницы и прописываем ему белый цвет - white.

.content {
  position:absolute;
  background:white;
  padding: 0px 10px 10px 10px;
  border: 1px solid red;
}

Создаем класс title и указываем ему обязательное свойство padding-bottom: 30px, которое будет опускать текст на 30 пикселей ниже категорий, тем самым его скрывая за следующей закладкой.

.title
{
 padding-bottom: 30px;
 font-weight: bold;
 cursor: pointer;
}

Весь код CSS.

.header{
  position:relative;
  width:500px;
  padding-bottom: 20px;
}

.content {
  position:absolute;
  background:white;
  padding: 0px 10px 10px 10px;
  border: 1px solid red;
}

.title
{
 padding-bottom: 30px;
 font-weight: bold;
 cursor: pointer;
}

.text_content
{
 text-align: justify
}

На этом реализация JavaScript закладок окончена, помимо данного скрипта имеется еще реализация JQuery закладок, можете ознакомиться и посмотреть. А на этом все, спасибо всем за внимание!