Бокове меню "баян"

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

Для встановлення меню скопіюйте скріпт, що наводиться нижче. Відкоригуйте його (колір, розмір, назви та посилання на сторінки) та розмістіть код у html віджеті сайдбару шаблону Blogger.

Відмічені маркером рядки дозволяють змінити колір меню та фону.
<style>

#mymenu  {
 width: 200px;
 margin: 0 auto;
}
#mymenu .mydiv {
 width: 200px;/*ширина всего меню*/
 transition: height ease-in-out 500ms;
 -o-transition: height ease-in-out 500ms;
 -moz-transition: height ease-in-out 500ms;
 -webkit-transition: height ease-in-out 500ms;
 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}
.mydiv h3{height: 45px;
 cursor:pointer;
 margin: 0 0 0 0;
 text-align: center;
 color:white;padding: 12px 0px 0px 0px;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
background: #999999;/*цвет наружного меню*/
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );

}
#mymenu p {
 text-align: center;
 margin: 0 0 1px 0;
 height: 0px;
 overflow: hidden;
 transition: height ease-in-out 500ms;
 -o-transition: height ease-in-out 500ms;
 -moz-transition: height ease-in-out 500ms;
 -webkit-transition: height ease-in-out 500ms;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 background: #cccccc; /*
цвет фона внутреннего меню*/
filter: progid:DXImageTransform.Microsoft.gradient
        ( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );
}

#mymenu p:hover {
 background: #999999;
 cursor:pointer;
}
#mymenu div:hover  > p {
 height: 45px;padding: 12px 0px 0px 0px;
}

* html #mymenu .mydiv  {
 filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );
 height: 45px;
 overflow: hidden;
 forIE: expression(
  onmouseover = function()  {this.className += ' hover'},
  onmouseout = function() {this.className = this.className.replace('hover', '')}
  );
}
* html #mymenu .mydiv.hover  {
 height: auto;
}
#mymenu p a {
 color:white;
}
</style>

<div id="mymenu">
<div class="mydiv">
<h3><a href="#">СТОРІНКА1</a></h3>
<p><a href="#">Сторінка 1-1</a></p>
<p><a href="#">Сторінка 1-2</a></p>
</div>
<div class="mydiv">
<h3><a href="#">СТОРІНКА2</a></h3>
<p><a href="#">Сторінка 2-1</a></p>
<p><a href="#">Сторінка 2-2</a></p>
<p><a href="#">Сторінка 2-3</a></p>
</div>
<div class="mydiv">
<h3><a href="#">СТОТРІНКА3</a></h3>
<p><a href="#">Сторінка 3-1</a></p>
<p><a href="#">Сторінка 3-2</a></p>
<p><a href="#">Сторінка 3-3</a></p>
<p><a href="#">Сторінка 3-4</a></p>
</div>
<div class="mydiv">
<h3><a href="#">СТОРІНКА4</a></h3>
<p><a href="#">Сторінка 4-1</a></p>
<p><a href="#">Сторінка 4-2</a></p>
<p><a href="#">Сторінка 4-3</a></p>
<p><a href="#">Сторінка 4-4</a></p>
<p><a href="#">Сторінка 4-5</a></p>
</div></div>