Фиксированное боковое меню для Blogger (2 варианта)

меню

Доброго времени суток, читатели и гости блога. Предлагаю вам сегодня 2 варианта фиксированного бокового меню, которые места практически не занимают и всегда перед глазами читателя. Яркие, нескучные, оригинальные без внимания не останутся. Зафиксируем обе менюшки с правой стороны макета блога.

Установка не займёт много времени. Стоит только вставить в нужные строки адреса ваших страниц и их названия. Сначала посмотрите как выглядит каждое меню. Просто скопируйте один из кодов и установите в поле этого редактора, чтобы увидеть результат.

1. Зелёное фиксированное выдвигающиеся меню с красивым эффектом при на ведении.

Меню при наведении курсора на панель выдвигается и появляются красивые вкладки. Используя свойства gradient получаем симпатичный эффект при наведении на них.

Код

<div id="hawkMenu">
    <a href="http://www.shpargalochki.ru/" class="hawkMenuA">Главная</a>
        <a href="http://www.shpargalochki.ru/p/blog-page.html" class="hawkMenuA">Содержание</a>
        <a href="http://www.shpargalochki.ru/p/blog-page_29.html" class="hawkMenuA">Об авторе</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_34.html" 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="http://www.shpargalochki.ru/p/blog-page_29.html" class="hawkMenuA">Об авторе</a>


2. Цветное боковое меню с лёгким движением вкладок и красивым эффектом.

Код

<div class="menuHolder2">
<ul class="menu2">
<li><a href="http://www.shpargalochki.ru/" class="red">вкладка1</a></li>
<li><a href="http://www.shpargalochki.ru/" class="orange">вкладка 2</a></li>
<li><a href="http://www.shpargalochki.ru/" class="yellow">вкладка 3</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="green">вкладка 4</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="blue">вкладка 5</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="indigo">вкладка6</a></li>
<li><a href="http://www.shpargalochki.ru/" class="violet">вкладка 7</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 во вкладке дизайн в любое место макета блога.

Всем спасибо и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


6 комментариев:

  1. круто, что ещё сказать. а я как остановился на стандартном простом дизайне, так пока и иду, да и развития толком нет никакого)))) затянувшийся период стагнации)

    ОтветитьУдалить
    Ответы
    1. семён, оно может и лучше. У тебя на блоге как- то спокойненько так.

      Удалить
  2. Очень интересный блог, столько полезной информации! Подписалась на Вас через Постоянные читатели, и надеюсь на взаимную подписку и общение: beauty4fem.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Victoria, благодарю Вас за оценку моих шпаргалок и подписку. Побывала у У вас и нашла тоже много полезной информации.

      Удалить
  3. Привет Виктория. Как вы после праздника?
    А что изменить в коде так, чтобы меню было на правой стороне?

    ОтветитьУдалить
    Ответы
    1. Привет Пепа, спасибо, но как - то в этом году не очень праздновалось. трагедия у всех на душе общая. А насчёт кода. Во втором коде нужно вот в этом участке поменять float:left; на float:right;

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

      А первый код некрасиво бегает , поскольку оно выскальзывающее . И за расположение отмечает вот это значение left:-180px;

      Удалить

Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск
Foto Saya
My Photo