Фиксирано странично меню за Blogger в три варианта

Pepa Tabakova

сряда

Да ви е добър денят, читатели и гости на блога. Предлагам ви три варианта на фиксирано странично меню, което практически не заема място и винаги е пред очите на читателя. С ярки цветове, раздвижени, оригинални и ще привличат вниманието. И трите фиксирани менюта ще се показват отляво при оформлението на блога ви.

Фиксирано меню за Blogger

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

Първи вариант

Меню, което при задържане на курсора на мишката върху панела, показва красиви цветни раздели. Използвайки свойството gradient, получаваме приятен ефект.

Кодът е:

<div id="hawkMenu">
      <a href="#"class="hawkMenuA"> Наименование </a>
<a href="#"class="hawkMenuA"> Наименование </a>
<a href="#"class="hawkMenuA"> Наименование </a>
      <a href="#"class="hawkMenuA"> Наименование </a>
</div>
<style>
#hawkMenu {
background: rgb(180,223,91);
background: -moz-linear-gradient(-45deg, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1)));
background: -webkit-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: -o-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: linear-gradient(135deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=1 );
position:fixed;
width:210px;
left:-180px;
transition-duration:1.0s;
border-radius:15px;
}
#hawkMenu:hover {
left:-10px;

}
.hawkMenuA {
font-f
text-decoration:none;
color:#000;
border-radius:10px;
width:140px;
margin-left:25px;
padding:5px;
display:block;
background: rgb(191,210,85);
background: -moz-linear-gradient(-45deg, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1)));
background: -webkit-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: -o-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: linear-gradient(135deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 );
margin-top:5px;
margin-bottom:5px;

}

.hawkMenuA:hover {
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}</style>

При необходимост да добавите още пунктове в менюто добавете още редове като този

<a href="#" class="hawkMenuA">Наименование</a>

Втори вариант

Както и при първия вариант направете съответните изменения в кода. Премахвайте или прибавяйте раздели в менюто по начина, който вече знаете.

Код

<div class="menuHolder2">
<ul class="menu2">
<li><a href="# " class="red"> Наименование </a></li>
<li><a href="#" class="orange"> Наименование </a></li>
<li><a href="# " class="yellow"> Наименование </a></li>
<li><a href="#" class="green"> Наименование </a></li>
<li><a href="#" class="blue"> Наименование </a></li>
<li><a href="#" class="indigo"> Наименование </a></li>
<li><a href="#" class="violet"> Наименование </a></li>
</ul>
<div class="shadow"></div>

<style>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}
</style>

Трети вариант

Още едно вертикално меню за блога ви. Оформено е само с икони. Добавяйки го ще имате в шаблона ( темата) си нещо красиво и полезно едновременно. Оцветените места в него са удобни за корекция.

Кодът му е:

Инсталиране

Кодът на менюто, което ви е допаднало, впишете в притурка HTML/JavaScript. Изберете за нея подходящо място в блога си. И трите менюта ще се показват в лявата му страна.

Ако имате въпроси, пишете.

Доскоро!

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

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

Cancel

Фиксирано меню за Blogger

Първи вариант

Втори вариант

Трети вариант

Инсталиране

PEPA TABAKOVA