Многоуровневое вертикальное меню аккордеон для боковой панели Blogger

Меню из типа аккордеон несколько уровней, интуитивно понятные, которые открываются « гармошкой » , а не выпадающее, как это происходит с большинством горизонтальных меню. Это меню особенно полезна если мы хотим использовать её на боковой панели.
Я уже представил два Аккордеонных меню , первое с изображениями на слайде, которое очень характерно и которое можно установить горизонтально или вертикально, а второе - только по вертикали на двух уровнях, основанных на jQuery для вставки в боковую панель.

Вертикальное меню аккордеон для Blogger

Меню, которое я собираюсь проиллюстрировать, состоит из трех уровней, что довольно редко встречается в меню аккордеон, в нём также используется библиотека jQuery, и его можно установить в Blogger или Wordpress без изменения шаблона или темы CMS.


Меню из типа аккордеон



Как вы можете видеть из GIF, различные уровни меню открываются щелчками курсора. Для его установки на Blogger вы идете в Дизайн> Добавить гаджет>  HTML / Javascript в разделы блога, затем вы вставляете код и по желанию название. Нажимаете Сохранить и размещаете в нужном вам месте на боковой панели.

<style>#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a,#cssmenu > ul > li.open > a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#1fa0e4, #1992d1);
background: -moz-linear-gradient(#1fa0e4, #1992d1);
background: -o-linear-gradient(#1fa0e4, #1992d1);
background: -ms-linear-gradient(#1fa0e4, #1992d1);
background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,#cssmenu > ul > li.last > a {
border-bottom: 1px solid #1682ba;
}
.holder {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
}
.holder::after,.holder::before {
display: block;
position: absolute;
content: "";
width: 6px;
height: 6px;
right: 20px;
z-index: 10;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.holder::after {
top: 17px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,#cssmenu > ul > li.active > a > span::after,#cssmenu > ul > li.open > a > span::after {
border-color: #eeeeee;
}
.holder::before {
top: 18px;
border-top: 2px solid;
border-left: 2px solid;
border-top-color: inherit;
border-left-color: inherit;
}
#cssmenu ul ul li a {
cursor: pointer;
border-bottom: 1px solid #32373e;
border-left: 1px solid #32373e;
border-right: 1px solid #32373e;
padding: 10px 20px;
z-index: 1;
text-decoration: none;
font-size: 13px;
color: #eeeeee;
background: #49505a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.open > a,#cssmenu ul ul li.active > a {
background: #424852;
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,#cssmenu > ul > li > ul > li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,#cssmenu > ul > li > ul > li.last.open > a {
border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
display: block;
position: absolute;
content: "";
width: 5px;
height: 5px;
right: 20px;
z-index: 10;
top: 11.5px;
border-top: 2px solid #eeeeee;
border-left: 2px solid #eeeeee;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,#cssmenu ul ul li.open > a::after,#cssmenu ul ul li > a:hover::after {
border-color: #ffffff;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
}
);
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
(function getColor() {
var r, g, b;
var textColor = $('#cssmenu').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else {
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
}
)();
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0);
break;
case g: h = (b - r) / d + 2;
break;
case b: h = (r - g) / d + 4;
break;
}
h /= 6;
}
return l;
}
}
);
}
)( jQuery );
</script>
<div id="cssmenu">
<ul>
<li><a href="#">Home</a></li>
<li class="active has-sub"><a href="#">Prodotti</a>
<ul>
<li class="has-sub"><a href="#">Prodotto 1</a>
<ul>
<li><a href="#">Marca 1.1</a></li>
<li><a href="#">Marca 1.2</a></li>
<li><a href="#">Marca 1.3</a></li>
<li class="last"><a href="#">Marca 1.4</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Prodotto 2</a>
<ul>
<li><a href="#">Brand 1.1</a></li>
<li><a href="#">Brand 1.2</a></li>
<li><a href="#">Brand 1.3</a></li>
<li><a href="#">Brand 1.4</a></li>
<li class="last"><a href="#">Brand 1.5</a></li>
</ul>
</li>
</ul>
</li>
<li class="active has-sub"><a href="#">Clienti</a>
<ul>
<li class="has-sub"><a href="#">Clienti Nord</a>
<ul>
<li><a href="#">Cliente N.1</a></li>
<li><a href="#">Cliente N.2</a></li>
<li><a href="#">Cliente N.3</a></li>
<li class="last"><a href="#">Cliente N.4</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Clienti Sud</a>
<ul>
<li><a href="#">Cliente S.1</a></li>
<li><a href="#">Cliente S.2</a></li>
<li><a href="#">Cliente S.3</a></li>
<li><a href="#">Cliente S.4</a></li>
<li class="last"><a href="#">Cliente S.5</a></li>
</ul>
</li>
</ul>
</li>
<li class="active has-sub"><a href="#">Fornitori</a>
<ul>
<li class="has-sub"><a href="#">Fornitori Nord</a>
<ul>
<li><a href="#">Fornitore N.1</a></li>
<li><a href="#">Fornitore N.2</a></li>
<li><a href="#">Fornitore N.3</a></li>
<li class="last"><a href="#">Fornitore N.4</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Fornitori Sud</a>
<ul>
<li><a href="#">Fornitore S.1</a></li>
<li><a href="#">Fornitore S.2</a></li>
<li><a href="#">Fornitore S.3</a></li>
<li><a href="#">Fornitore S.4</a></li>
<li class="last"><a href="#">Fornitore S.5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>

Код делится на три части . Первый - это CSS, который определяет внешний вид и в котором цветовые коды могут быть изменены, чтобы адаптировать их к кодам нашего сайта. Второе задается сценарием, в котором jQuery присутствует в желтой выделенной строке . Если это уже было установлено в вашей теме или шаблоне,не вставляйте эту строку. Третья часть - это актуальное меню, которое можно настроить по желанию.


Конфигурация меню

Основные пункты меню установлены таким образом

<div id='cssmenu'><ul>   <li><a href='#'><span>Home</span></a></li>   <li class='active has-sub'><a href='#'><span>Prodotti</span></a> </li>   <li class='active has-sub'><a href='#'><span>Clienti</span></a> </li>    <li class='active has-sub'><a href='#'><span>Fornitori</span></a> </li>   <li><a href='#'>   <span>About</span></a></li>   <li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

где вместо цифровых знаков ( # ) вставляются адреса страниц, которые мы хотим показать. В последнюю основную запись вставляется тег class='last', поэтому, если вы измените структуру, запомните ее, иначе меню не будет работать. В элементах с подменю мы вместо этого вставляем тег class='active has-sub', а затем создаем подменю, которое начинается с <ul> и заканчивается </ul> и должно быть вставлено до конца </li> строки основной пункт.

Пример подменю:

<ul>         <li class='has-sub'><a href='#'><span>Prodotto 1</span></a>            <ul>               <li><a href='#'><span>Marca 1.1</span></a></li>               <li><a href='#'><span>Marca 1.2</span></a></li>               <li><a href='#'><span>Marca 1.3</span></a></li>               <li class='last'><a href='#'><span>Marca 1.4</span></a></li>            </ul>         </li>         <li class='has-sub'><a href='#'><span>Prodotto 2</span></a>            <ul>               <li><a href='#'><span>Brand 1.1</span></a></li>               <li><a href='#'><span>Brand 1.2</span></a></li>               <li><a href='#'><span>Brand 1.3</span></a></li>               <li><a href='#'><span>Brand 1.4</span></a></li>               <li class='last'><a href='#'><span>Brand 1.5</span></a></li>            </ul>         </li>      </ul>

Подменю также могут быть созданы с использованием классов class='has-sub' и class='last' соответственно для основной записи и для последнего элемента, как и раньше.

ОткрытьЗакрытьКомент
Cancel