2

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

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


    Наистина, тези два варианта на хоризонтално меню ми харесват много и инсталирането им е лесно, без да се променя код в темата на блога. Вмъкваме ги като притурка 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; е размер на шрифта;

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

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

    Доскоро!


    2 коментара :

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

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

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

        Изтриване


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита