Меню за блог с шаблон от трети страни

Меню за блог
Здравейте приятели и читатели. За вашите блогове има и вариант за хоризонтално меню с падащи раздели. Но за правилната му инсталация и настройка ще трябва да отделите време. В заглавието на публикацията обърнах внимание, че това меню е подходящо основно за шаблони от трети страни, тоест, шаблони, които не се предлагат от Blogger, а са от странични разработчици.



    В такива шаблони менюто е по-лесно за инсталиране и конфигуриране, отколкото в тези на Blogger. Но и в родните блогерски шаблони също може да се инсталира, макар, че понякога стои некоректно, размества се.

    Описание

    Менюто заема цялата ширина на блога и не е фиксирано. В шаблоните на нашия Blogger можете да добавите притурка над заглавката или в долния колонтитул, където тя ще заема цялата ширина на блога. Ако го поставите под заглавката, където обикновено стои менюто "страници", оформлението на разделите ще се промени и е трудно да се конфигурира. Тогава ще трябва да изтриете в кода на шаблона приспособлението PageList. За да разгледате предлаганото меню копирайте посочения по-долу код и използвайте този инструмент.

    Код на менюто

    <style>
    #main-nav {
    width: 100%;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs341zcpmvyJPzkCNdgBRbCMroF4B0WJHlN1lVR7BJ3qvo1kmW1-rgkBjIqRCBuuwWj9utv3QuN0J4EgfeyQ9d-YESdBPIIRT8qnEDRdUspzivebRgrBwJ9IMFtx93RvvrEEBz20t1cV9v/s1600/main-nav-back.png);
    }
    ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
    }
    ul#main-nav li a {
    position: relative;
    width: 110px;
    height: 26px;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eI0dd4uwEyRqML_mUIJISdhOmYaWT-dwxG1nW9aaICgGX3kHair_Bx7bm5zURAnroFH0a6SouqDbHA4xr-ZsEQCRsHThTouzP8GofhSKx6gAWaUmX-isMksKn-RZv-4LUPvtiGTCJYtn/s1600/menuback4.png);
    background-position: center center;
    color: #404040;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-top: 12px;
    text-align: left;
    padding-left: 26px;
    font-weight: normal;
    text-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.2), 0 -0.6px #000;
    }
    ul#main-nav li.home a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUfFgD67lr01vGIRwZjBBL0jMxi6NLz3TGtN9uzSl_8cuaCbG2AOe7DDPzbyhRy89fAexiSkisQfCIM6iqiVJosT0nJ_jBPsPTIm4RZ6QM6CSu1PSh3FgUehlyu1g6E6eJhrebJrDB7-QD/s1600/menuback1.png);
    color: #03b4cc;
    }
    ul#main-nav li.home a:hover {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUfFgD67lr01vGIRwZjBBL0jMxi6NLz3TGtN9uzSl_8cuaCbG2AOe7DDPzbyhRy89fAexiSkisQfCIM6iqiVJosT0nJ_jBPsPTIm4RZ6QM6CSu1PSh3FgUehlyu1g6E6eJhrebJrDB7-QD/s1600/menuback1.png);
    color: #f7f7f7;
    }
    ul#main-nav li.current a {
    background-position: top;
    color: #ffffff;
    }
    ul#main-nav li a:hover {
    background-position: bottom;
    color: #c2c2c2;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZkkGFtGK3eKNFIebK-1l83ymbS8XTDHQQpiZ1tyYMfzwWGbDS1jZjeiMMSC1YacyYtLIHIjGH0tZ_XMPCOhduClwlf1AWqQBepcL2OmPvs5UhhKbcWGyNSAhDJuy0vflBTEfdihrpNXE/s1600/menuback5.png);
    padding-left: 25px;
    cursor: pointer;
    }
    ul#main-nav li.current a:hover {
    background-position: top;
    color: #ffffff;
    }
    ul#main-nav li.current {
    z-index: 100;
    }
    ul#main-nav li.home {
    z-index: 100;
    }
    ul#main-nav li.web-design {
    z-index: 99;
    }
    ul#main-nav li.web-development {
    z-index: 98;
    }
    ul#main-nav li.blogging {
    z-index: 97;
    }
    ul#main-nav li.blogger-tips {
    z-index: 96;
    }
    ul#main-nav li.widgets {
    z-index: 95;
    }
    ul#main-nav {
    margin-left: 10px;
    }
    ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
    }
    .mbt_navigation1 {
    position:absolute;
    display:none;
    }
    .mbt_navigation1 li {
    clear:both;
    }
    ul#mbt_navigation1 li a {
    background: #242424;
    width: 196px;
    padding-left: 10px;
    color: #c2c2c2;
    opacity: 0.9;
    font-family: arial;
    font-size: 14px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    }
    ul#mbt_navigation1 li a:hover {
    background: #535353;
    color: #f7f7f7;
    margin-left: -22px;
    }
    #main-nav li ul {
    background: #242424;
    border-left: 2px solid #2b2b2b;
    border-right: 2px solid #2b2b2b;
    border-bottom: 2px solid #2b2b2b;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.9;
    position: absolute;
    width: 177px;
    z-index: 200;
    -webkit-transition: all .2s ease-in-out;


    -moz-transition: all .2s ease-in-out;


    -ms-transition: all .2s ease-in-out;


    -o-transition: all .2s ease-in-out;


    transition: all .2s ease-in-out;
    /*top:1em;
    /*left:0;*/
    }
    #main-nav li:hover ul {
    display: block;
    background-image: none;
    }
    #main-nav li li {
    display: block;
    float: none;
    padding: 0px;
    width: 245px;
    }
    .searchbutton1:hover{
    opacity: 0.9;
    border: none;
    }
    .icon-right2 {
    color: #4e4e4e;
    font-size: 7px;
    }
    </style>
    <ul id='main-nav'>
    <li class='home'><a href='#'>Начало</a></li>
    <li class='web-design'><a>Название<span class='icon-right2'>&#9660;</span></a>
    <ul id='mbt_navigation1'>
    <li><a href='#'>название</a></li>
    <li><a href='#'>название</a></li>
    <li><a href='#'>название</a></li>
    <li><a href='#'>название</a></li>
    <li><a href='#'>название</a></li>
    <li><a href='#'>название</a></li>
    </ul></li>
    <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>


    <ul id='mbt_navigation1'>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>Название</a></li>
    </ul></li>

    <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
    <ul id='mbt_navigation1'>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>Название</a></li>
    </ul></li>
    <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
    <ul id='mbt_navigation1'>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>Название</a></li>
    </ul></li>
    <li class='blogging'><a href='#'>Название</a></li>
    <li class='widgets'><a href='адрес'>Виджети</a></li>
    <li class='main-nav'><a>Заглавие <span class='icon-right2'>&#9660;</span></a>
    <ul id='mbt_navigation1'>
    <li><a href='#'>SEO</a></li>
    <li><a href='#'>HTML Code</a></li>
    <li><a href='#'>HTML Code</a></li>
    <li><a href='#'>Заглавие</a></li>
    <li><a href='#'>Generator</a></li>
    <li><a href='#'>Бутони</a></li>
    </ul></li>

    </ul>


    Настройки

    Елементите в кода, които са оцветени могат да се променят по ваш избор. Те определят:

    ➤в зелено - размер на шрифта;

    ➤в син цвят - разделът на главната страница;

    ➤в бордо – цветът на заглавките при задържане на мишката;

    ➤в кафяво - отстъп на ръба от ляво (обърнете внимание на тази стойност);

    ➤в лилаво - размер шрифта на заглавието на връзките в падащото меню;в

    ➤в светло син цвят - размера на иконата ▼;

    ➤в черен цвят - изтриване или добавяне на раздели и връзки в падащото меню;

    ➤вместо решетките поставете адресите на връзките;

    ➤кодът &#9660; на иконата ▼ променете, ако смятате, че е необходимо;


    Ще отговоря на въпросите ви в коментарите относно настройките и инсталирането на менюто. Успех в работата над менюто и всичко най-добро.

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

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

    BGtop

    OpenCloseComments
    Cancel