Меню типу "баян"

Біла 3D людинка з баяном
Ще одна Html кориснисть - це бокове навігаційне меню типу "баян", що розтягується при наведенні курсору.

Таке меню зазвичай застосовується у сайдбарі сайту, але у смартфоні працює не так ефективно, як на десктопі. 

Використовується для сайтів, що зроблені на платформі BLOGGER. У цьому движку штатними засобами віджетів не можна робити розділи випадаючого підменю.

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

Слід зазначити, що, з точки зору пошукової оптимізації сайту, треба уникати бажання зробити меню з великою кількістю рівнів вкладень. Їх має бути не більш двох. Якщо треба додати у меню багато посилань на різні сторінки, то краще зробити декілька посилань, але з одним рівнем вкладення.

Зразок меню:
Для встановлення меню скопіюйте скрипт, що наводиться нижче. Відкоригуйте його (колір, розмір, назви та посилання на сторінки) та розмістіть код у 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>


Раздел: