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

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

Наистина, тези два варианта на хоризонтално меню ми харесват много и инсталирането им е лесно, без да се променя код в темата на блога. Вмъкваме ги като притурка 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpw3yLMmPihJHBT5zbU28pPPpW645HT8Wz2kX8s_MfPDXUP4U5xn8HQGcUrHykdWn7tewylZEM5D799K4INW3DWBl-h6zx8dU6DSF07DgjuSoc7WrmBeuf9aLeoxK70qlngEbhWnEo0g/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqezukzGHQZyq6mhu1jylt80dqQEX14AbW3D6QTZtiT3e6y-kM4Tk9_YZiFVpAt2iiRA-iPKNjwwIe3NExMbW0KxGhHztG4F_fxXPwDuD9zKD_cVa3hbbx5M66fYdtcSou0sBpgfj66w/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: #2288bb;
}
.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; е размер на шрифта;

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

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

Доскоро!

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

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