Хоризонтално разтварящо се меню за Blogger

Pepa Tabakova

понеделник

Здравейте, мои редовни читатели и гости на блога. Настоящата публикация ще влезе в категорията Меню. Как да направим хоризонтално разтварящо се меню. В затворен вид е просто красиво проектиран бутон, а когато се кликне върху него всички елементи от менюто се разтварят.
В публикацията за красиво анимирано меню за етикети беше разгледан подобен вариант. Там то се разтваряше вертикално. Е, днес ще го преобразим в хоризонтален вид.
Да се направи е достатъчно лесно. Кодът се инсталира в HTML / JavaScript притурка. Първо трябва да го копирате някъде, за да въведете адресите на страниците си, които ще се показват в менюто. По принцип не само елементите от менюто могат да се показват по този начин. Също и някои отделни страници, върху които искате да привлечете вниманието на читателите. Или поставете адресите на своите страници от социалните мрежи.
Как работи можете да проверите чрез познатия ви вече инструмент.

Код

<style>

body {

-webkit-animation: bugfix infinite 1s;

}

@-webkit-keyframes bugfix {

from {padding:0;}

to {padding:0;}

}

.iconicmenu {

position: relative;

height: 45px;

overflow: hidden;

}

.iconicmenu, .iconicmenu * {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.iconicmenu input[type="checkbox"] {

position: absolute;

left: 0;

top: 0;

opacity: 0;

}

.iconicmenu > label {

z-index: 1000;

display: block;

position: absolute;

width: 40px;

height: 40px;

float: left;

top: 0;

left: 0;

background: white;

text-indent: -1000000px;

border: 6px solid black;

border-width: 6px 0;

cursor: pointer;

-moz-transition: all 0.3s ease-in;

-webkit-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

}

.iconicmenu > label::after {

content: "";

display: block;

position: absolute;

width: 100%;

height: 18%;

top: 19%;

left: 0;

border: 6px solid black;

border-width: 6px 0;

-moz-transition: all 0.3s ease-in;

-webkit-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

}

.iconicmenu ul {

margin: 0;

padding: 0;

position: absolute;

margin-left: 40px;

background: #eee;

left: -100%;

height: 40px;

font: bold 14px Verdana;

text-align: center;

list-style: none;

opacity: 0;

-moz-border-radius: 0 5px 5px 0;

-webkit-border-radius: 0 5px 5px 0;

border-radius: 0 5px 5px 0;

-moz-perspective: 10000px;

perspective: 10000px;

-moz-transition: all 0.5s ease-in;

-webkit-transition: all 0.5s ease-in;

transition: all 0.5s ease-in;

}

.iconicmenu li {

display: inline;

margin: 0;

padding: 0;

}

.iconicmenu ul label {

cursor: pointer;

position: relative;

height: 100%;

text-align: center;

}

.iconicmenu ul label::after {

content: "x";

display: inline-block;

line-height: 14px;

color: white;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

width: 20px;

height: 20px;

background: black;

font-size: 18px;

margin: 5px;

margin-top: 10px;

-moz-transition: all 0.3s ease-in;

-webkit-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

}

.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {

-moz-transform: rotatey(180deg);

-ms-transform: rotatey(180deg);

-webkit-transform: rotatey(180deg);

transform: rotatey(180deg);

}

.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {

border-color: darkred;

}

.iconicmenu input[type="checkbox"]:checked ~ ul {

left: 8px;

opacity: 1;

-moz-box-shadow: 1px 1px 5px gray;

-webkit-box-shadow: 1px 1px 5px gray;

box-shadow: 1px 1px 5px gray;

}

.iconicmenu li a {

display: block;

float: left;

text-align: center;

text-decoration: none;

color: black;

margin: 0;

padding: 10px;

padding-right: 15px;

height: 100%;

}

.iconicmenu li a:hover {

background: black;

color: white;

}

@media screen and (max-width: 580px) {

.iconicmenu input[type="checkbox"]:checked ~ label {

display: none;

}

.iconicmenu input[type="checkbox"]:checked ~ ul {

margin-left: 0;

}

@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */

.iconicmenu {

overflow: visible;

}

.iconicmenu ul {

height: auto;

}

.iconicmenu ul li {

min-width: 200px;;

display: block;

}

.iconicmenu ul li a {

float: none;;

text-align: left;

}

</style>

<ul>

<li><a href="#">наименование</a></li>

</ul>

</div>

Както винаги споменавам, ако искате да добавите в менюто още страници, добавете към кода от тези редове:

<li><a href="#">наименование</a></li>

В тях ще впишете адресите и наименованието на страниците. Надявам се, че вече знаете къде и как да го направите.
Когато сте готови с редакцията на кода и сте го вписали в притурката, преместете я над публикациите в блога. Този бутон може да се разположи и ниско долу. Препоръчва се за по-удобна навигация меню да има и горе и долу.
За въпроси и отзиви, знаете, в коментарите.

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

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

Cancel

PEPA TABAKOVA