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

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

Фиксирано меню за 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>

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

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

Кодът му е:

<style>

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmI1YAUBOAX0wMzLlxHtKdIJ8My_xrqK3Ewqze1iaUFzP-6_mIo9oqqkFJDpUYnKTr_WEiztqAAMk0pJXm-lWcQAiFiVXqa_V-_k79KSsuTV8IbBBC5uUlMyKBbKzOunfC_4hpd0fVdmA/h120/Pc+Tools+Tips.png') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

</style>


<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="URL HERE">
<span>Home</span>
</a>

</li>
<li>

<a class="about" href="URL HERE">
<span>About Us</span>
</a>
</li>

<li>
<a class="services" href="URL HERE">
<span>Categories</span>
</a>

</li>

<li>
<a class="portfolio" href="URL HERE">
<span>Disclaimer</span>
</a>
</li>

<li>

<a class="contact" href="URL HERE">
<span>Contact</span>
</a>
</li>
</ul>
</div>

Инсталиране

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

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

Доскоро!

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

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