Меню в стиле Google.




Меню для сайта от GoogleВертикальное выезжающие меню для блога в стиле Google .Простое и функциональное меню на CSS не тормозящее загрузку,но тем не менее стильное и оригинальное.Блоги на Blogspot уникальны в том плане,что дают неограниченный простор для фантазии и редактирования оригинального дизайна шаблона.






Установка кода CSS для меню в сайдбаре блога.


Установка кода выезжающего меню навигации проста и как в исполнении,так и в доступности
понимания процесса.Для начала копируем код  CSS и устанавливаем или в шаблон или же в гаджет НТМЛ и JavaScript,который следует добавить в сайдбаре на странице дизайн блога.

<style type="text/css">/* menu for @v-gol.ru*/
label#sidemenutoggler {
z-index:100;
display:block;
position:relative;
width:5.5em;
height:1.5em;
top:0;
left:0;
background:#FFF;
text-indent:-1000px;
border:.7em solid grey;
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:#fff;
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:#044;
text-transform:inherit
}

#leftsidemenu ul {
list-style:none;
position:relative;
display:block;
font-size:.5em;
-webkit-transform:translate3d(0,-20%,0);
transform:translate3d(0,-20%,0);
opacity:0;
margin:0;
padding:0
}

#leftsidemenu ul li a {
display:block;
padding:3px 20px
}

#leftsidemenu ul li a:hover {
background:#ccc;
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:#A3D;
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
}/* menu for @v-gol.ru and*/
</style>

Смотреть ещё

Как добавить форум на блогСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Оформление блоков для кода


вертикальное меню типа google
Следующий шаг это НТМЛ куда следует внести все ссылки на требуемые Вам разделы блога в соответствующие поля отмеченные в коде. Всё это хозяйство так же добавляем в гаджет HTML и сохраняем.В результате на блоге,как показано в демо,должна появиться кнопка вызова скрытой панели с внесёнными туда ссылками меню навигации.

Код НТМЛ


<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="ссылка">blogspot</a></li>
<li><a href="ссылка">эффекты CSS</a></li>
<li><a href="ссылка">jquery</a></li>
<li><a href="ссылка">JavaScript</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>


Настройки меню.


Настройки цветовой гаммы меню внесены в код  CSS и подписаны. Воспользовавшись онлайн-редактором НТМЛ  можно подобрать необходимую цветовую гамму выскальзывающей панели меню.При установке кода CSS в блог советую воспользоваться  конвертором  сжатия кода  для оптимизации.  Так же стоит обратить внимание на меню для рубрик для боковой панели блога.

Отправить комментарий