Вертикално меню тип "акордеон" за блог

Поздравявам всички, които четат в момента или случайно са попаднали тук. Днес реших да се върна малко назад. Искам да ви запозная с едно вертикално падащо меню тип "акордеон", лесно за инсталиране в страничната лента на платформата Blogger. Може да ви се стори старомодно, но то е компактно и най-важното, спестява много място. Освен това в него можете лесно да добавяте неограничен брой връзки в подменютата и да променяте външния му вид така, че да подхожда на дизайна на вашия блог.
Не ви е нужно меню? Тогава опитайте се да поставите в него други връзки. Или до любимите ви блогове или до други, важни според вас страници или публикации. Вариантите за използването му са много. Необходимо е да вложите малко въображение и ще разнообразите вашия дизайн.


Копирайте кода на менюто.

<style>.vbb {
 margin: 0 auto;
 width: 206px; /* ширина на меню*/
 height: auto;
 background: rgba(0, 0, 0, 0.8); /*цвят фон */
 border: 2px solid #666666; /*размери и цвят рамка */
 }
.vbb>ul {
 margin: 3px;
 padding: 0;
 list-style: none;
 width: 200px;
 }
.vbb>ul>li {
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
 height: 40px;
 width: 200px;
 background-color: #f0f0f0;
 transition: height 0.5s ease-in-out;
 -moz-transition: height 0.5s ease-in-out;
 -webkit-transition: height 0.5s ease-in-out;
 -o-transition: height 0.5s ease-in-out;
 }
.vbb>ul>li>h3 {
 display: block;
 margin: 0;
 padding: 7px 10px 13px 10px;
 height: 19px;
 font-family: Georgia, Arial, Helvetica, sans-serif;
 text-decoration: none;
 color: #fff; /*цвят текст на пунктове */
 background: #666; /* цвят на фон на пунктове */
 font-weight: normal;
 }
.vbb>ul>li>div {
 margin: 0;
 overflow: auto;
 padding: 10px;
 height: 210px;
 }
.vbb>ul>li>div>a {
 display: block;
 text-decoration: none;
 text-align: center;
 margin: 1px;
 padding: 3px;
 color: #000;
 background: #СССССС; /*цвят на фон */
 }
.vbb>ul>li>div>a:hover {
 color: #FFF;
 text-shadow: 0px -1px 0px #00518a;
 background: #CCCCFF; /* цвят под курсор*/
 }
.vbb>ul>li:hover {
 height: 200px;
 }
.vbb>ul>li>h3:hover {
 cursor: pointer;
 }</style>

<div class="vbb">
 <ul>
  <li>
   <h3>»МЕНЮ 1</h3>
   <div>
   <a href="#"> Име на страница</a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
   </div>
  </li>
  <li>
   <h3>»МЕНЮ 2</h3>
   <div>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
   </div>
  </li>
  <li>
   <h3>»МЕНЮ 3</h3>
   <div>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
   <a href="#"> Име на страница</a>
   </div>

/*тук можете да добавите още елементи на менюто*/

  </li>
 </ul>
</div>

С думата „меню“ е обозначено мястото на заглавието на страницата.
Вместо „#“ задайте адреса на вашите под-страници (подменюта) и техните заглавия.
Ако имате нужда от повече елементи на менюто, можете да добавите тази част от кода му на посоченото място.

<li>
   <h3>»МЕНЮ 2</h3>
   <div>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
    <a href="#"> Име на страница </a>
   </div>
  </li>

Това са всичките му настройки. Искам да ви предложа веднага да се опитате да направите своя версия на падащото меню. Копирайте кода, който ви предлагам по-горе и идете на тази страница. В предложената форма за редакция на HTML кодове вложете кода на вертикалното меню. Натиснете бутона в долния край на формата и веднага ще видите резултата. Ако искате да ползвате във вашия блог подобно меню върнете се към кода му, редактирайте го, направете промени и отново проверете как изглежда. И така, докато не получите желания от вас резултат, подхождащ на вашия дизайн.
Кода на менюто вложете в притурка HTML /JavaSkript. Сложете я в страничната колона на блога си.
Това е за днес. Благодаря на всички ви. Ще се видим скоро.

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

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