Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

понеделник

Хоризонтално меню за блог два варианта

Хоризонтално меню за блог
Здравейте всички! Позволете ми да ви предложа още варианти на хоризонталното меню за вашия блог. Ако съм ви разочаровала с това, че ви връщам към този широко популярен елемент от дизайна на блога, моля да бъда извинена.


    Наистина, тези два варианта на хоризонтално меню ми харесват много и инсталирането им е лесно, без да се променя код в темата на блога. Вмъкваме ги като притурка HTML/JavaScript. Разнообразието не е излишно.

    Първи вариант

    Код

    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://1.bp.blogspot.com/-e8VrFODNr7s/T2TK3jW0ZYI/AAAAAAAAALA/wH-oW-79nzA/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14pxarial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="" style="position: absolute;z-index:-11;"><img src="https://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

    <div class="noop-menu-blue">
        <ul class="menu">
            <li><a href="https://xxx/">Главна страница</a></li>
            <li><a href="https://ххх">За автора</a></li>
            <li><a href="https://xxx">Съдържание</a></li>
            <li><a href="https://xxx">Контакти</a></li>
            <li><a href="https://xxx">RSS</a></li>
            <li><a href="ххх">Blogger</a></li>
        </ul></div>


    Настройки

    ➤Font:14px е размер на шрифта;

    ➤Впишете адреса и заглавието на хипервръзката;

    ➤За да добавите нови хипервръзки добавете още редове като този:

    Втори вариант с ефекти

    Код


    <style type="text/css">
    .block-menu {
    display: block;
    background: #2288
    bb;
    }
    .block-menu li {
    display: inline-block;
    }
    .block-menu li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: 'Passion One',Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-transform: uppercase;
    overflow: visible;
    line-height: 20px;
    font-size: 24px;
    padding: 15px 10px;
    }
    /* animation domination */
    .three-d {
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    perspective: 200px;
    -webkit-transition: all .07s linear;
    -moz-transition: all .07s linear;
    transition: all .07s linear;
    position: relative;
    }
    .three-d:not(.active):hover {
    cursor: pointer;
    }
    .three-d:not(.active):hover .three-d-box,
    .three-d:not(.active):focus .three-d-box {
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -webkit-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
    }
    .three-d-box {
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    -webkit-transform: translatez(-25px);
    -moz-transform: translatez(-25px);
    -o-transform: translatez(-25px);
    transform: translatez(-25px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    }
    .front {
    -webkit-transform: rotatex(0deg) translatez(25px);
    -moz-transform: rotatex(0deg) translatez(25px);
    -o-transform: rotatex(0deg) translatez(25px);
    transform: rotatex(0deg) translatez(25px);
    }
    .back {
    -webkit-transform: rotatex(-90deg) translatez(25px);
    -moz-transform: rotatex(-90deg) translatez(25px);
    -o-transform: rotatex(-90deg) translatez(25px);
    transform: rotatex(-90deg) translatez(25px);
    color: #FFE7C4;
    }
    .front, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    padding: 15px 10px;
    color: white;
    pointer-events: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    </style>
    <ul class="block-menu">
    <li><a href="###" class="three-d">
    Главна
    <span class="three-d-box"><span class="front">Главна</span><span class="back">Главна</span></span>
    </a></li>
    <li><a href="###" class="three-d">
    За блога

    <span class="three-d-box"><span class="front">За блога</span><span class="back">За блога</span></span>
    </a></li>
    <li><a href="###" class="three-d">
    Услуги
    <span class="three-d-box"><span class="front">Услуги</span><span class="back">Услуги</span></span>
    </a></li>
    <li><a href="###" class="three-d">
    Карта
    <span class="three-d-box"><span class="front">Карта</span><span class="back">Карта</span></span>
    </a></li>
    <li><a href="###" class="three-d">
    Архив
    <span class="three-d-box"><span class="front">Архив</span><span class="back">Архив</span></span>
    </a></li>
    </ul>

    Настройки

    ➤background: #000; е цвят на менюто;

    ➤line-height: 20px; е височина на менюто;

    ➤font-size: 24px; е размер на шрифта;

    ➤Оцветеното в червено са местата за адресите и наименованията на хипервръзките в него;

    За добиване на представа за двата варианта на менюто използвайте този инструмент. А за въпроси, моля в коментарите.

    Доскоро!

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

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

    BGtop



    2 коментара:

    1. Маргарита Нейкова9 декември 2018 г., 11:29 ч.

      Менюто в един блог е важен вид навигация и благодаря, че ми помагате да експериментирам.

      ОтговорИзтриване
      Отговори
      1. Благодаря за правилната преценка за този елемент от дизайна на един блог. Благодаря и за посещението. Елате пак, ще откриете още интересни елементи.

        Изтриване