Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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


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

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

    Бутон на  меню за Blogger

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

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

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

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

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

    Код


    <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.

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

    BGtop

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

    Няма коментари:

    Публикуване на коментар