Вертикално изскачащо меню за Blogger

Добър ден на всички приятели, гости и редовни читатели на Blogzablogove . Имам поредното меню за вас. Но този път предлагам код на изскачащо, вертикалното и многостепенното меню. На страницата ще има само малък етикет с наименованието му.

Когато кликнете върху него, елементите на менюто се отварят с падащи раздели. Можете да вмъкнете много информация в това меню. В резултат на това ще имате меню:

➤Което винаги ще е в горния десен ъгъл на страницата и в стегнат вид изглежда така;

➤Ако е необходимо, лесно можете да добавите допълнителни елементи директно към кода му;

➤Което спестява много място на страницата;

➤С помощта на стиловете лесно можете да персонализирате вида му според вашия дизайн;

➤Инсталирането му в блога не изисква специални умения;

Предлагам да копирате кода по-долу и да го впишете в този редактор, за да видите как работи това изскачащо меню.

Код

<style>#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:# CC6666;transition:right .4s ease-in-out;margin:0;padding:0}
#menu-vertical:hover{right:0;}
#menu-label{display:inline-block;background:#CC0033;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
#menu-label:hover{opacity:0.67;}
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#333333; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }</style>

<div id="menu-vertical">
<h3 id="menu-label"><a href="#">Меню</a></h3>
<div class='vertical'>
<ul>
<li><a href='#' title='Menu1'>Меню 1</a>
<ul>
<li><a href='#' title='Menu1'>подменю 1 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 2 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 3 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 4 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 5 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 6 Меню 1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='#' title='Menu2'>Меню 2</a>
<ul>
<li><a href='#' title='елемент 1 Menu2'>подменю 1 Меню2</a></li>
<li><a href='#' title='елемент 2 Menu2'>подменю 2 Меню2</a></li>
<li><a href='#' title='елемент 3 Menu2'>подменю 3 Меню2</a></li>
<li><a href='#' title='елемент 4 Menu2'>подменю 4 Меню2</a></li>
<li><a href='#' title='елемент 5 Menu2'>подменю 5 Меню2</a></li>
<li><a href='#' title='елемент 6 Menu2'>подменю 6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='#' title='Menu3'>Меню 3</a>
<ul>
<li><a href='#' title='Sub1 Menu3'> подменю 1 Меню3</a></li>
<li><a href='#' title='Sub2 Menu3'> подменю 2 Меню3</a></li>
<li><a href='#' title='Sub3 Menu3'> подменю 3 Меню3</a></li>
<li><a href='#' title='Sub4 Menu3'> подменю 4 Меню3</a></li>
<li><a href='#' title='Sub5 Menu3'> подменю 5 Меню3</a></li>
<li><a href='#' title='Sub6 Menu3'> подменю 6 Меню3</a></li>
</ul>
</li>
</ul>
</div>
</div>

Настройки

◾background: # CC0033 е цветът менюто в стегнат вид;

◾На другите места background: променете по своя преценка;

◾В първата част на кода (затворена между маркерите <style> и </style>) са всички стилове, които могат да бъдат променени;

◾Меню в розово заменете с имената на страниците от вашето меню;

◾Подменю 1, 2, 3 и т.н. са имената на подменютата;

◾Във всички части на текста, където има <a href = '#'…., вместо решетката (#) въведете адресите на страниците и/ или подстраниците;

◾Начинаещи блогъри съветвам да  прочетат публикацията за страници и подстраници в блоговете;

◾При необходимост от допълнителни елементи Меню и Подменю, добавете толкова допълнителни елементи, като този, колкото ви са необходими;

<ul>
<li><a href='#' title='Menu1'>Меню 1</a>
<ul>
<li><a href='#' title='Menu1'>подменю 1 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 2 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 3 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 4 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 5 Меню 1</a></li>
<li><a href='#' title='Menu1'>подменю 6 Меню 1</a></li>
</ul>
</li>
</ul>

Това са всички настройки. Имате едно страхотно вертикално изскачащо меню за Blogger.

Ще съм благодарна ако оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!