
Я сегодня хочу предложить вам свой вариант виджета -аккордеон. Отличие его в том, что при нажатии на вкладку открывается полностью вся информация. Будь то картинка, страница меню, форма связи и прочее. Очень хорошо он подойдёт для создания вертикального меню блога. Ещё одним преимуществом его является то, что при отображении большого содержания вкладки в окне присутствует полоса прокрутки. Вертикальная и горизонтальная.
Посмотрите как он выглядит здесь.
Устанавливается такой аккордеон в блоге через гаджет 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>
<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>
Сложного ничего нет. Таких виджетов на странице может быть несколько. Код достаточно лёгкий. Если при установке потребуется помощь, обращайтесь. Всегда рада помочь.
И на этом сегодня закончу. Пожелаю вам удачи и терпения. До новых встреч. Всегда рада видеть вас у себя на блоге.
Ой, а что это там ниже? Ну надо же! Нажимаем!
оформите подписку на новые шпаргалки
Хороший вариант, но минус в том, что на любом, отличном от белого, фоне видна слева белая полоска около плюсов. У меня просьба расскажите как нибудь о содержании с прокруткой, только чтобы полоса прокрутки аккуратная была и не было отступов сверху и снизу - посмотрите мой блог energytaro.ru - справа есть "Содержание", так если прокручивать до конца все строки, то полоса еще остается, а строки заканчиваются, тоже самое вверху, строка ниже полосы прокрутки, это не очень красиво. Спасибо:)
ОтветитьУдалитьАнна. Вы просто установили ссылки с переходом. Он у вас не расскрывает содержание.
УдалитьНаверное, однако хочется полосу прокрутки аккуратную:)))
УдалитьАнна, нормально работает полоса прокрутки . Вот посмотрите на этом блоге http://b-v-blog.blogspot.ru/. Что-то в коде не то сделали.
ОтветитьУдалитья Вам на почту скину код.
Удалить