Кнопка всплывающего бокового меню для блоггер

Здравствуйте друзья и читатели блога. С нововведением Google использовать протокол HTTPS (с шифрованием) для блогов блоггер, полетели гаджеты с внешними ссылками. Гугл предупреждает не загружать небезопасные скрипты, а мы остались без виджетов. У многих в блогах не работают скрипты карт, меню, слайдеров и.т.д.

Предлагаю сегодня удобную кнопку скрытой боковой панели меню. Расположить её можно в любом месте макета блога. В сайдбаре, над или под сообщением, в футере (подвале). Вот такая кнопочка, скриншот:

Кнопка скрытой всплывающей панели бокового меню для блоггер

Рабочий вариант меню сходите посмотреть в тестовый блог, в сайдбаре жмите кнопку. А сейчас давайте приступим к установке меню. Ничего сложного нет, работаем только в дизайне, шаблон трогать не будем.

Стили CSS для настройки и оформления меню, установить дизайн добавить гаджет лучше вниз макета блога.

label#sidemenutoggler {

z-index:100;

display:block;

position:relative;

width:5.5em;

height:1.5em;

top:0;

left:0;

background:#f8f8ff; *//фон кнопки

text-indent:-1000px;

border:.7em solid green; *// цвет фона верхней и нижней полосы кнопки

cursor:pointer;

-webkit-transition:all .3s ease-in;

transition:all .3s ease-in;

border-width:.6em 0

}

label#sidemenutoggler::before,label#sidemenutoggler::after {

content:"";

display:block;

position:absolute;

width:100%;

height:.6em;

top:50%;

margin-top:-.3em;

left:0;

background:#A3D; *// цвет фона средней полосы кнопки

-webkit-transform:rotate(0);

transform:rotate(0);

-webkit-transition:all .3s ease-in;

transition:all .3s ease-in

}

#sidemenucheckbox:checked ~ label#sidemenutoggler {

border-color:transparent

}

#sidemenucheckbox:checked ~ label#sidemenutoggler::before {

-webkit-transform:rotate(-45deg);

transform:rotate(-45deg)

}

#sidemenucheckbox:checked ~ label#sidemenutoggler::after {

-webkit-transform:rotate(45deg);

transform:rotate(45deg)

}

#sidemenucheckbox {

display:none

}

#leftsidemenu {

position:fixed;

top:0;

left:0;

width:300px; *// ширина боковой панели меню

height:100%; *// высота боковой панели меню

background:#f8f8ff; *// фон бокового меню

z-index:1001;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

visibility:hidden;

box-shadow:5px 0 10px rgba(0,0,0,.2);

-webkit-transform:translate3d(-100%,0,0) rotate(20deg);

transform:translate3d(-100%,0,0) rotate(20deg)

}

#leftsidemenu a {

font:bold 1.5em georgia,arial;

text-decoration:none;

color:#2b2b2b; *// цвет текста ссылок в боковом меню

font-size:16px; *// размер шрифта ссылок

text-transform:inherit

}

#leftsidemenu ul {

list-style:none;

position:relative;

display:block;

font-size:20px; *// размер шрифта категории

color:#f00; *// цвет шрифта

-webkit-transform:translate3d(0,-20%,0);

transform:translate3d(0,-20%,0);

opacity:0;

margin:0 0 0 20px;

padding:0

}

#leftsidemenu ul li a {

display:block;

padding:3px 20px

}

#leftsidemenu ul li a:hover {

background:#e0f2c7; *// цвет при наведении на ссылку

transition:all .5s

}

.overlay {

content:'';

position:fixed;

visibility:hidden;

width:100%;

height:100%;

background:gray;

left:0;

top:0;

opacity:0;

z-index:1000;

-webkit-transition:opacity .3s, visibility 0 .3s;

transition:opacity .3s, visibility 0 .3s

}

.overlay label {

width:100%;

height:100%;

left:0;

top:0;

position:absolute

}

#leftsidemenu label#closex {

width:30px; *// ширина крестика

height:30px; *// высота крестика

overflow:hidden;

display:block;

position:absolute;

cursor:pointer;

text-indent:-1000px;

z-index:10;

top:0;

right:0

}

#leftsidemenu label#closex::before,#leftsidemenu label#closex::after {

content:"";

display:block;

position:absolute;

width:100%;

height:6px;

background:#f00; *// цвет крестика

top:50%;

margin-top:-3px;

-ms-transform:rotate(-40deg);

-webkit-transform:rotate(-40deg);

transform:rotate(-40deg)

}

#leftsidemenu label#closex::after {

-ms-transform:rotate(40deg);

-webkit-transform:rotate(40deg);

transform:rotate(40deg)

}

#sidemenucheckbox:checked ~ #leftsidemenu {

visibility:visible;

-webkit-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

-webkit-transition:0 .5s ease-in-out;

transition:transform .5s ease-in-out

}

#sidemenucheckbox:checked ~ #leftsidemenu ul {

-webkit-transform:translate3d(0,50px,0);

transform:translate3d(0,50px,0);

opacity:1;

-webkit-transition:opacity 1s .5s, 0 1s .5s;

transition:opacity 1s .5s, transform 1s .5s

}

#sidemenucheckbox:checked ~ .overlay {

opacity:.8;

visibility:visible;

-webkit-transition:opacity .3s;

transition:opacity .3s

</style>

Необходимые настройки я отметила. Для уверенных код CSS можно вставить в шаблон выше строки ]]></b:skin>, удалите в коде тэг <style></style>.

Теперь добавляем гаджет кнопки со ссылками и названием. Здесь возможны два варианта. Первый, ссылки как в меню навигации: главная, карта, контакты, об авторе и.т.д.

<label for="sidemenucheckbox" id="sidemenutoggler" onclick="legacybrowsertoggle()">Toggle Menu</label>

<ul><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><label for="sidemenucheckbox" id="closex" onclick="legacybrowsertoggle()">Close</label>

</nav> <div class="overlay">

Можно дать ссылки на вебинары, тренинги, конкурсы, мероприятия, партнерские программы или на все ярлыки. Адрес ярлыков скопировать в адресной строке браузера. Предварительно добавьте гаджет ярлыки, нажмите по названию и копируйте адрес.

Второй вариант установлен в демо блоге, с названием по разделам. Пишем название, к примеру, партнерки, и даем ссылки на все партнерские программы. Или можно выбрать из ярлыков самые читаемые статьи.

<label for="sidemenucheckbox" id="sidemenutoggler" onclick="legacybrowsertoggle()">Toggle Menu</label>

<ul><li><span>Название</span></li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>

</ul>

<ul><li><span>Название</span></li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li></ul>

<ul><li><span>Название</span><li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>

<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li></li></li></ul>

<label for="sidemenucheckbox" id="closex" onclick="legacybrowsertoggle()">Close</label>

</nav> <div class="overlay">

В верхнем коде ссылки открываются в том же окне, во втором в новом. Добавляйте или удаляйте строку target="_blank".

На этом у меня вся информация. На вопросы отвечу в комментариях или в меню обращайтесь черех контактную форму. Всего доброго.

Задержитесь, посмотрите другие статьи по теме: