Выдвижная панель (Шторка для радио)

Добрый день! Хочу поделится выдвижной панелью для радио в чате хотя не только для радио ее можно использовать и как дополнительное меню. Долго искала по форумам но такую нигде не нашла. Может кому понадобится.
Идем в HTML -шаблоны 1, далее кто в чате и на самый верх шаблона вставляем код:

Код:

<style type="text/css">
.tm {
  float: left;
}
#title {
  background-position: center top;
  background-repeat: no-repeat;
}
</style>
<div class="cm" style="position: fixed; top: -1000px; left: -1000px; user-select: none;"></div>

<center>
<style type="text/css">.verticalaccordion>ul {
 margin: 0;
 padding: 0;
 list-style:none;
 width: px;
}
.verticalaccordion>ul>li {
 display:block;
 overflow: hidden;
 margin: 0;
 padding:0;
 list-style:none;
 height:46px;
 width: 300px;
 /* Decorative CSS */
 background-color:#030000;
 /* CSS3 Transition Effect */
 transition: height 0.3s ease-in-out;
 -moz-transition: height 0.3s ease-in-out;
 -webkit-transition: height 0.3s ease-in-out;
 -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 {
 display:block;
 margin: 0;
 padding:10px;
 height:19px;
 /* Decorative CSS */
 border-top:#f0f0f0 1px solid;
 font-family: Arial, Helvetica, sans-serif;
 text-decoration:none;
 text-transform:uppercase;
 color: #000;
 background: #cccccc;
 /* CSS3 Gradient Effect */
 background: -moz-linear-gradient( top, #999999, #cccccc);
 background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */
}
.verticalaccordion>ul>li>div {
 margin:0;
 overflow:auto;
 padding:10px;
 height:350px
}
.verticalaccordion>ul>li:hover {
 height: 380px;
}
.verticalaccordion:hover>ul>li:hover>h3 {
 /* Decorative CSS */
 color:#fff;
 background: #000000;
 /* CSS3 Gradient Effect */
 background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
 background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}
.verticalaccordion>ul>li>h3:hover {
 cursor:pointer;
}
</style>
<center><div class="verticalaccordion">
<ul>
<li>
<center><img src="https://c.radikal.ru/c18/2005/d0/8692ece2bfe2.gif" /><br><br></center>
<center>
Код вашего радио или что там еще хотите туда впихнуть)
</div>
</div>
<br>

Дальше смотрим и саму кнопку можем поменять на свою с любым названием, радио, доп.меню и т.д.
Находим в коде :

Код:

<center><img src="https://c.radikal.ru/c18/2005/d0/8692ece2bfe2.gif" /><br><br></center>

Где :

Код:

<img src="https://c.radikal.ru/c18/2005/d0/8692ece2bfe2.gif" />

Меняем на свою ссылку с кнопкой залитую на любой хостинг изображений.
Далее находим:

Код:

Код вашего радио или что там еще хотите туда впихнуть)

Вместо этой фразы вставляем например код радио который хотите поставить в чат. 1, 2, 3, 4, сколько у вас радио.
Если что то не понятно обращайтесь подскажу.
Еще, забыла, эта панель удобна тем что ее можно сделать в длину на сколько вам хочется и позволяет шаблон кто в чате, находим в коде:

Код:

height:380px

тут меняем 380 на нужную вам длину.
От длинны зависит сколько кнопок вы поставите. Чем больше кнопок радио например тем больше должна быть длинна.
Кнопка в свернутом виде:

Спойлер: Тык

Кнопка в развернутом виде:

Спойлер: тык

 

Спасибо огромное за шторку на радио очень удобно !!! Поставил к себе в чат!!!

 

Рада что понадобилось.

 

привет всем! у меня не получается больше 2х радио поставить

 

Добрый день! Это потому что нужно изменить параметры длинны шторки я писала там где код

и меняйте длинну в зависимости от того сколько вы еще радио поставить хотите. если не получается скиньте сюда ссылку на ваш чат зайду помогу.