Меню с прокруткой на всю страницу для Blogger.

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

Я собираюсь проиллюстрировать меню, которое также может быть использовано для этого, при этом следует понимать, что оно также может иметь другие применения по усмотрению веб-мастера. Данное меню активируется путем наведения мыши в правом верхнем углу на значок, который запоминает меню мобильных устройств. С эффектом прокрутки и прозрачности меню будет отображаться на полной странице с соответствующими ссылками, отображаемыми в центре в вертикальном списке. Чтобы закрыть меню, наведите курсор на верхний левый крестик.

Нет необходимости даже изменять шаблон для его установки . Перейдите в Дизайн> Добавить гаджет> HTML / Javascript и вставьте этот код

<style>/* Stuff I added */.menu-outer:hover ~ .menu-close {  margin-right:-100px;}.menu-outer:hover .bar { background:rgba(100,200,240,.9); }.menu-outer > nav ul { top:4%; }/* The rest I chnaged parts but not most of it */.menu-outer {  overflow: hidden;  position: fixed;  top: 0;  font-family: 'Montserrat', serif;  z-index: 998;    width: 100%;  left: 100%;  margin-left: -100px;  height: 200%;  background: rgba(100,200,240,.9);    -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;   -webkit-transform-origin: top left;  -moz-transform-origin: top left;  -ms-transform-origin: top left;  -o-transform-origin: top left;  transform-origin: top left;  -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);  -o-transform: rotate(-45deg);  transform: rotate(-45deg);}.menu-outer:hover {  background: rgba(100,200,240,.98);  left: 0;  margin-left: 0;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -ms-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);}.menu-icon {  z-index: 999;  position: absolute;  top: 58px;  left: 15px;  width: 30px;  pointer-events: none;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;}.menu-icon .bar {  background: rgba(250,250,250,1);  width: 100%;  height: 5px;  margin: 0 0 5px;  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;}.menu-outer:hover > .menu-icon {  opacity: 0;}nav ul {  position:absolute;  width:100%;  padding: 0;  left: 10%;; /*prevents possible click when not oppened*/  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;}.menu-outer:hover > nav ul {  left: 0;}nav li {  list-style:none;  text-align: center;  text-transform: uppercase;}nav li a {  font-size: 2em;  color: rgba(255,255,255,.8);  text-decoration: none;  margin: 0 auto;  padding: 20px;  display:block;  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;}nav li a:hover {  color: rgba(255,255,255,1);}@media screen and (max-width: 600px), screen and (max-height: 600px) {  nav ul {font-size:.75em;}  nav ul a {padding: 10px;}}.menu-close {  z-index: 9999;  position: fixed;  top: 0;  right: 100%;  width: 200px;  height: 200px;  background: rgba(250,130,70,1);  cursor: pointer;  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;  transition: all ease .5s;  -webkit-transform-origin: top right;  -moz-transform-origin: top right;  -ms-transform-origin: top right;  -o-transform-origin: top right;  transform-origin: top right;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}.menu-close .menu-icon {  right: 15px; left: auto;top: 68px;  -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);  -o-transform: rotate(-45deg);  transform: rotate(-45deg);}.menu-close .bar {  background: rgba(250,250,250,1);  width: 100%;  height: 5px;  position:absolute;  -webkit-transform-origin: center;  -moz-transform-origin: center;  -ms-transform-origin: center;  -o-transform-origin: center;  transform-origin: center;}.menu-close .bar:first-child {  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}.menu-close .bar:last-child {  -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);  -o-transform: rotate(-45deg);  transform: rotate(-45deg);}</style><div class="menu-outer">    <div class="menu-icon">        <div class="bar"></div>        <div class="bar"></div>        <div class="bar"></div>    </div>    <nav>        <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>           <li><a href="#">ваш текст</a></li>           <li><a href="#">ваш текст</a></li>          <li><a href="#">ваш текст</a></li>                   </ul>   </nav></div><a class="menu-close" onclick="return true">    <div class="menu-icon">        <div class="bar"></div>        <div class="bar"></div>    </div></a>

Сохраняете.

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

Любой желающий показать это меню только на определенной странице, как, например, на домашней странице, может использовать условные теги, примененные к виджету HTML . В цветовые коды вводятся через стандартный RGBA , и если вы хотите изменить может быть полезным конвертер HEX RGB . В заключение я напоминаю, что продолжительность перехода была установлена ​​в полсекунды.

Обновление. Возможно, вы захотите инвертировать положение значков открытия и закрытия меню, особенно если у вас есть сайт в Blogger с видимой навигационной панелью и относительными ссылками, расположенными справа, которые будут закрыты. Начиная с разговора с читателем, с которым можно ознакомиться в комментариях 3, 3.a, 3.b и 3.c, будет достаточно заменить все вхождения right на right и наоборот все вхождения right на right . Также необходимо будет инвертировать направление вращения на 45 градусов, а затем заменить rotate(45deg) на rotate(-45deg) и наоборот.