Понеделник 28 април 2025 г.
>> Крейзи Хорс, един безкраен празник  >> Кабаре Лидо, история на успеха и признанието  >> Най-необичайните кафенета от цял свят  >> Мулен руж, кабарето на живота  >> Дивали, индийската Нова година  >> Мозаечната стълба  >> Палмовите библиотеки в Индия  >> Плаващ автобус в Амстердам  >> Избрани цитати от Вятърничав - епизод 3  >> Вятърничав. Съдържание на 3 епизод  >> Багдатския булевард в Истанбул - Багдат джадеси  >> Вятърничав. Съдържание на епизодите. 2 епизод  >> Актьорски състав и героите от "Вятърничав"  >> Герои и актьорски състав от Вятърничав  >> Главни герои и актьорски състав от сериала "Вятърничав"  >> Вятърничав. Главни герои и актьорски състав  >> Имението Шадооулу в Мидят  >> За сюжета на сериала Harcai – Вятърничав  >> Избрани цитати от сериала Вятърничав - епизод 1  >> Вятърничав. Съдържание на епизодите. 1 епизод  >> Свежи пролетни и летни модни идеи 2023  >> Hercai-Bg - Вятърничав  >> Приказка за безсмъртната любов, родена от отмъщението  >> Тодоровден  >> Денят на Баба Марта  >> Коронацията на Чарлз III и смелата молба на Том Круз да присъства   >> Коронация Карла III и Том Круз   >> Coronation of Charles III and Tom Cruise  >> Она жила один раз, похоронена дважды  >> She lived once, buried twice  >> Живяла веднъж, погребана два пъти  >> Карнавал в Рио-де-Жанейро - часть вторая  >> Карнавал в Рио-де-Жанейро  >> Рио-де-Жанейро − ночная звезда Бразилии  >> Трифоновден  >> Рио де Жанейро - нощната звезда на Бразилия  >> Why Germany has no moral right to pressure us for Skopje  >> Почему Германия не имеет морального права оказывать на нас давление из-за Скопье  >> Защо Германия няма морално право да ни натиска за Скопие  >> Basta of the northern Macedonian melodrama    undefined

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

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



Описание

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

Код

В кода, който предлагам можете да промените почти всичко по свое усмотрение. Самият код се инсталира в притурката за оформление  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/AVvXsEh1-8aHwkef798LVaTeQdpxMc-8BbqXkgyA9dMg8FjV45YPsrItAgh0nR4ZjlGgxPuzF1zR09dzfiCtCARUfVBmpCjgNosytK8QtEe2m2oHEKw-BNQZAaYUtaA3P9UcvIPa5wmZ_jNEYGg/s31-no/);
}
ul#navigation li:nth-child(2) a {
background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPuzWritvIRkc215366Uma0O59CSgZk1PTjCQo9PvcgszGRhQ-LHe-kF3s4UYbpQ7d6F3KtvHDopn2y5xXUMyRqw8r6x76k-NnY3EBYcuN3HmnhRFppUdOj6yRiE-0GF40rh3llUR5M_U/s27-no/);
}
ul#navigation li:nth-child(3) a {
background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmwo6QKTA6-Zjbni8i7axfpxNs1pNPyqStYdVK1g4aLPZNnj6vRT3CNUEWwqYeZOEYUpN5_acg2Vtj9ouq88kAV2WuI6Y_hwVBlc6DKrJ_BA6NUE_46jcCcZgYAiWDMlu8OHWWVw3GOg/s32-no/);
}
ul#navigation li:nth-child(4) a {
background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFK2uM0fByBbCmoI8MertyJk5eBwSLhcZQkYzSjRI9luXXCiuNFrMgMty9tG84U1WLwWkhnKNqH8Jc2AKCjQGQ0aB1D4NKNmI68IciI6H3hJ-ftHB7NJSH5KHVb7eucdCz8d5-Ta-Jzg/s32-no/);
}
ul#navigation li:nth-child(5) a {
background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2bgRryjQaAlzy0QZ_yAovR6Mr45ubVEX_O9HFMDzonsU9O4Uy6c50CC7wtVDqCvPH7qQ3ztNHHH0qtqOM7c6Q5klp5jziFm210tb0vYTWDoy5KubVo-ka51xEFuRZGiJPN8GaVVzS1w/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/AVvXsEjjFK2uM0fByBbCmoI8MertyJk5eBwSLhcZQkYzSjRI9luXXCiuNFrMgMty9tG84U1WLwWkhnKNqH8Jc2AKCjQGQ0aB1D4NKNmI68IciI6H3hJ-ftHB7NJSH5KHVb7eucdCz8d5-Ta-Jzg/s32-no/);
}


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

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


@keyframes fxhompinav {
from{margin-right:-1000px;}
to  {margin-right:0px;}

}


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

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

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

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

BGtop


OpenCloseComments
Cancel