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



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

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

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

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

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

<style type="text/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>.

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

<input id="sidemenucheckbox" type="checkbox" />
<label for="sidemenucheckbox" id="sidemenutoggler" onclick="legacybrowsertoggle()">Toggle Menu</label>
<nav id="leftsidemenu">
<ul><li><a href="ссылка">Главная</a></li>
<li><a href="ссылка">Карта блога</a></li>
<li><a href="ссылка">HTML</a></li>
<li><a href="ссылка">CSS</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"></label></div>


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

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

<input id="sidemenucheckbox" type="checkbox" />
<label for="sidemenucheckbox" id="sidemenutoggler" onclick="legacybrowsertoggle()">Toggle Menu</label>
<nav id="leftsidemenu">
<ul><li><span>Название</span></li>
<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>
<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>
<li><a href="ссылка"rel="nofollow" target="_blank">название</a></li>
<li><a href="ссылка"rel="nofollow" target="_blank">название</a></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><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><a href="ссылка"rel="nofollow" target="_blank">название</a></li></li></li></ul>
<label for="sidemenucheckbox" id="closex" onclick="legacybrowsertoggle()">Close</label>
</nav> <div class="overlay">
<label for="sidemenucheckbox"></label></div>


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

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

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/23/2016 Ярлыки ►


Открыть комментарии →

8 коммент. :

  1. Здравствуйте,Ольга! Слайдер действительно остановился, как на это повлиять не знаете?

    ОтветитьУдалить
  2. Спасибо за информацию, заинтересовало!!!

    ОтветитьУдалить
    Ответы
    1. Нина Зоркина здравствуйте. На слайдер уже никак не повлиять, удаляйте гаджет. Если автор скрипта изменит адрес ссылки по протоколу HTTPS с шифрованием, тогда слайдер будет работать. В чем я сомневаюсь, что он это сделает. Понаблюдаю еще пару недель, если не изменит адрес ссылки, придется удалять в блоге посты со скриптами слайдеров.

      Благодарю за отзыв о меню.

      Удалить
  3. Добрый день Ольга! Вот решила сделать себе всплывающую кнопку. Нужна ваша помощь: у меня: 1. фон открывшегося окна серый, как сделать белым (поменяла на background:#FFFFFF; *// фон бокового меню) все равно остался серым?
    2. крестик у открывшегося окна какой-то кривой получился, меняла ширину и высоту, в исходнике он почему-то наполовину виден?
    3. на открывшееся окно почему-то "набегает" нижний футер?
    4. при нажатии на ссылки они не открываются в новом окне, т.е. не активны?
    в тестовом блоге я разместила кнопочку probtestez.blogspot.ru, посмотрите пожалуйста.
    С уважением к вам и вашему творчеству. Тата

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Tata. Просмотрела Ваш вставленный код:
      1. Цветовой код для фона вставлен правильно, странно почему не меняется. Попробуйте вписать фон цвета на английском языке, только без решетки, к примеру white-белый.

      2. Высота и ширина крестика должны быть одинаковы, 30х30 или 40х40, скриншот goo.gl/JoM0zU. Не ставьте большие размеры.

      3. Уменьшите высоту открывающего блока меню в процентах, настройте 90% например, а не 100%, и размер шрифта ссылок.
      Скриншот goo.gl/nH3hJx

      4. В коде пропустили название меню Toggle Menu, скриншот goo.gl/kd80Ov

      PS: По фону напишите, получилось или нет.

      Удалить
    2. Доброго времени суток Ольга! Благодарю вас за отзывчивость! Вот мои исправления:
      1. поменяла на white, фон не поменялся;
      2. высоту и ширину сделала 30*30, половина крестика куда-то исчезло, (<) осталась её только правая часть?
      3. уменьшила высоту на 90%, у меня подзаголовки (пример: 1 ступень)почему-то получаются жирнее и крупнее самого заголовка (пример: Школа "Кайлас").
      4. название меню Toggle Menu внесла, но по ссылкам так и нет перехода? И нахлест нижнего футера так и осталось!
      С уважением Тата

      Удалить
    3. Tata, у Вас в шаблоне много ошибок, в секции head.

      Вот для примера:
      goo.gl/MDHcIw

      goo.gl/x3KPp4

      Откуда эти коды в стилях CSS и в head. Если и на основном блоге такой же HTML код шаблона, корректно ничего не будет работать.

      Посмотрите мой шаблон "венецианское окно" goo.gl/4jXQIm

      У Вас на русском написано Тестовый блог.

      На первых двух картинках, это что Вы вставляли?

      Проверила код меню на других своих демо блогах, все работает, конечно надо настраивать.

      Удалить
  4. P.S. в тестовом блоге результат вашей кнопки "закрыть открыть комментарии". Спасибо большое, что даете возможность креативить вместе с вами!

    ОтветитьУдалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *