Оригинално изскачащо фиксирано меню за блог

Здравейте, читатели, приятели и гости на блога. Предлагам днес да направите красиво хоризонтално меню. Менюто е под формата на изскачащ прозорец и е фиксирано. При превъртане на страницата то остава в горния ѝ край и се вижда постоянно.

Описание

Изключително лесно е за инсталиране. Перфектно се вписва под всякакъв дизайн. В допълнение, то може да бъде изцяло уникално за всеки блог. Всичко зависи от вашето въображение и желание за корекции в кода му.
Аз исках да го поставя тук, в публикацията си. Но поради индивидуалността на шаблона и претовареността му с кодове, то не се вписва много добре. Отварям една скоба и уточнявам: ако в качеството на меню това, което ви предлагам не ви допада, използвайки същия код, вие имате възможност да създадете изскачащ прозорец с други хипервръзки в него, като към социални мрежи, например, или нещо друго.

Код

В кода, който предлагам можете да промените почти всичко по свое усмотрение. Самият код се инсталира в притурката за оформление  HTML / JavaScript. Дори начинаещите могат лесно да се справят с това. Така, че добре дошли в Blogzablogove.com и моля, копирайте кода, който ви предлагам, поставете го тук и го разгледайте.

<style>ul#navigation {

position:fixed;

margin:0px;

padding:0px;

top:0px;

right:10px;

list-style:none;

z-index:999999;

width:735px;

font:normal 11px Arial,Sans-Serif;

-webkit-animation:2s fxhompinav ease-in-out;

-moz-animation:2s fxhompinav ease-in-out;

-ms-animation:2s fxhompinav ease-in-out;

animation:2s fxhompinav ease-in-out;

}

ul#navigation li {

width:103px;

display:inline;

float:left;

margin:0 0 0 2px;

}

ul#navigation li a {

display:block;

float:left;

margin-top:-78px;

width:100px;

height:22px;

background-color: #009999;

background-repeat:no-repeat;

background-position:50% 150px;

border:2px solid #e6e6e6;

-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

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

-webkit-border-bottom-right-radius:10px;

-webkit-border-bottom-left-radius:10px;

-khtml-border-bottom-right-radius:10px;

-khtml-border-bottom-left-radius:10px;

border-radius:0px 0px 10px 10px;

color:#ccc;

text-decoration:none;

text-align:center;

text-shadow:0 1px 1px #000;

padding-top:85px;

-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

}

ul#navigation li a:hover {

margin-top:-3px;

background-position:50% 10px;

color:#fff;

position:relative;

}

ul#navigation li a:hover:after {

content:"";

width:0px;

height:0px;

position:absolute;

top:100%;

left:45%;

margin-top:-10px;

border-width:5px;

border-style:solid;

border-color:transparent transparent #e6e6e6 transparent;

}

ul#navigation li:nth-child(1) a {

background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSPYXnpnmUSMqebSL3NX4JY1wKyis_8G7TiD-yWFdguC-wIq-M2p2_aS58ctfI1QPZ3dyGgYFmNMhkSEsv-s4MYtpwDTn75rHifkR4Sr_qz3-TO-BqJ5rTpksZmadwfdOjGBnfU2TfZiI/s31-no/);

}

ul#navigation li:nth-child(2) a {

background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-zdIn4pYeo8wa7tajZWRNAvzu9KjYqfzrI9q8x8YE3-S9oHiOHXh5ZtlVXhT6L9bhNdgdnnpV41GJSpEW4stmC9hBcVMT_nExcF7aB2JEO3eQvroVDAN4D1Hyn_2rVLSddPtNFOrpXQ/s27-no/);

}

ul#navigation li:nth-child(3) a {

background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4wRXyYoo0Lt31_2J-1UqwzhJdut9CyNDNkDyX_fY6lx-8gsZzY_dyZnxvN-rMmDOVCmqOo6VKxFrxJtLeSXeXoZ2USFda0ore5STX_ASVz9hQ4zKBBT4ucsbBY-ffOabhITaKYJQSGm8/s32-no/);

}

ul#navigation li:nth-child(4) a {

background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeTjBUEK0B_zZh6csnUz0XllD8h5vCgRal6uRBLu6ndI9CTbjpxELhOLa16tLzCaCv1mKdlH1UvOkSnQ6o3aqzIrf21mMUCJ6fPGa0rVlRMNsv4HkAU_jQ0QhK-H8ND4l8cxtHMcLC0g/s32-no/);

}

ul#navigation li:nth-child(5) a {

background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwlBZk91TQL-XNEDn3LEB3cSJ3szwEGWfPLq1FPV8CN_uY4gPVP2Lku4EaITQOH3yOaFioY2W-havXcrdRP5XRkVfHZaG7cRq0V4KIa1sZB_ZCWQ9B1kpA7t1TgCCBEYum5NNWEwcfu6c/h120/icon-32x32png.png);

}

@-webkit-keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

@-moz-keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

@-ms-keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

@keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

@keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

</style>

<ul id='navigation'>

<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>

Копирайте кода, ако ще го използвате, пренесете го в черновата си и направите съответните настройки.

Настройки

➤Това, което е маркирано в червено, е цветът на фона на разделите в менюто. Използвайте този генератор на цветове, за да изберете правилния за вашия блог цвят.

➤Когато кликнете върху секцията, се появява икона. Маркирах адресите на техните изображения в синьо. Така че тук отново имате възможност да ги редактирате, като поставите свои.

➤В зелено са оцветени местата, където ще впишете адресите на страниците, там където ще водят хипервръзките.

➤А наименованията на страниците са маркирани в жълто.

Имайте предвид, че тук ви показах меню само с 4 раздела. Ако искате да добавите още, трябва да направите следното:

◾Добавете ето такъв участък в кода с адресите на иконите:

ul#navigation li:nth-child(4) a {
  background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeTjBUEK0B_zZh6csnUz0XllD8h5vCgRal6uRBLu6ndI9CTbjpxELhOLa16tLzCaCv1mKdlH1UvOkSnQ6o3aqzIrf21mMUCJ6fPGa0rVlRMNsv4HkAU_jQ0QhK-H8ND4l8cxtHMcLC0g/s32-no/);
}

В него сменете цифрата 4 с цифрата 5.

◾И добавете още една такава секция в кода преди </style>.

@keyframes fxhompinav {

from{margin-right:-1000px;}

to  {margin-right:0px;}

}

Гарантирам ви, че ако направите всичко правилно, ще имате отлично и оригинално меню. Само моля, бъдете внимателни към всички точки, линии и скоби в кода. Само това, което е отбелязано с друг цвят в него, можете да изтриете и да вмъкнете ваши стойности.
Ако имате въпроси относно настройките, не забравяйте да попитате в коментарите. Ще уточним всичко.
Ще се радвам, ако информацията в днешната ми публикация е полезна за вас.

До следващия път. Успех.

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

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