Вертикальное выезжающие меню для блога в стиле 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. Оформление блоков для кода |
Код НТМЛ<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 в блог советую воспользоваться конвертором сжатия кода для оптимизации. Так же стоит обратить внимание на меню для рубрик для боковой панели блога.
Отправить комментарий