Виджет аккордеон с полосой прокрутки.

Приветствую вас, друзья, читатели и гости блога. Наверняка вы обращали внимание, что на многих сайтах присутствуют всевозможные варианты меню или виджетов в стиле аккордеон. Очень красивая и удобная штука для размещения любой информации.

Пример такого аккордеон-виджета не так давно опубликовала на своём блоге моя коллега "по цеху" Ольга Протасова. Посмотрите этот вариант в её статье виджет вкладка для боковых панелей. Легко настраиваемый и достаточно элегантный.

Я сегодня хочу предложить вам свой вариант виджета -аккордеон.  Отличие его в том, что при нажатии на вкладку открывается полностью вся информация. Будь то картинка, страница меню, форма связи и прочее. Очень хорошо он подойдёт для создания вертикального меню блога. Ещё одним преимуществом его является то, что при отображении большого содержания вкладки в окне присутствует полоса прокрутки. Вертикальная и горизонтальная.

Посмотрите как он выглядит здесь.
Устанавливается такой аккордеон в блоге через гаджет HTML/JavaScript в любое место на блоге. Сначала копируем это код и поговорим о настройках.

<div class="gorizont">
  <input type="radio" name="vk" id="vk1" checked="checked"/>
  <label for="vk1">Заголовок 1</label>
  <div>Содержимое вкладка 1</div>
  <input type="radio" name="vk" id="vk2"/>
  <label for="vk2">Заголовок 2</label>
  <div>Содержимое Вкладки 2</div>
  <input type="radio" name="vk" id="vk3"/>
  <label for="vk3">Заголовок 3</label>
  <div> Содержимое вкладки 3</div>
</div>

<style>.gorizont [name="vk"] { display: none; }
.gorizont > :not(input):not(label) {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 2 .5em;
  border: 2px solid #808080;/ цвет и толщина рамки/
  border-top-style: none;
  transition: .5s;
}
.gorizont > label {
  overflow: hidden;
  display: block;
  padding: .5em 1em;
  background: # 666633; /цвет фона вкладки/
  color: rgb(200,200,200);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.gorizont> :checked + label + * {
  overflow: auto;
  height: 310px;
}
.gorizont > :checked + label {
  background: # 999966;
  cursor: default;
}</style>

Красным цветом в коде выделено само название вкладки. Синим - её содержимое. Сюда можно вставлять всё, что угодно-ссылки, коды, картинки и т.д. В стилях CSS меняйте цветовые значения по своему желанию. Обратите внимание на строку  height: 310px; высота аккордеона фиксированная. Тоже устанавливайте своё значение. Если есть необходимость добавить ещё вкладки, нужно вставить ещё вот такой участок кода поменяв vk3 на vk4 и т.д.

<input type="radio" name="vk" id="vk3"/>
  <label for="vk3">Заголовок 3</label>
  <div> Содержимое вкладки 3</div>

Сложного ничего нет. Таких виджетов на странице может быть несколько. Код достаточно лёгкий. Если при установке потребуется помощь, обращайтесь. Всегда рада помочь.

И на этом сегодня закончу. Пожелаю вам удачи и терпения. До новых встреч. Всегда рада видеть вас у себя на блоге.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email