Лабиринт: Красивое выпадающее 3D меню для Blogger.

среда, 16 сентября 2015 г.

Красивое выпадающее 3D меню для Blogger.

- Если вам такое выпадающее 3D меню понравилось, давайте тогда установим его на ваш блог, для этого вам придется проделать пару шагов и внести изменения в HTML шаблон блога. Не забудьте перед этим сохранить шаблон в файл, на тот случай если Вы сделаете что то не так и захотите все вернуть обратно.

- 1) Заходим Панель управления => Шаблон => Изменить HTML

- 2) Нажмите CTRL+F и в строку поиска вставьте код ]]></b:skin> затем нажмите Enter чтобы его найти.

- 3) Чуть Выше вставляем код CSS стиля для меню:

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;} .menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menu3Dflip ul.nav li {display:inline-block; display:inline;} .menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;} .menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;} .menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }

- После того как вставили в шаблон код CSS стиля выпадающего 3D меню и сохранили, надо вставить код самого меню в шаблон блога.

- 1) Нажмите CTRL+F и в строку поиска вставьте код </head> или <body> затем нажмите Enter чтобы его найти.

Небольшое отступление: Почему я указал два куска кода </head> или <body>, потому что сразу за кодом </head> находится <body>, которое в разных шаблонах бывает разным, на другом моем блоге оно например такое: <body expr:class='"loading" + data:blog.mobileClass'>.

- 2) Чуть Ниже <body> вставляем этот код 3D меню:

- Вместо # вставляете свои ссылки, а вместо Menu и Sub Menu пишите название вкладок, неважно на русском или любом другом языке.

Страницы

среда, 16 сентября 2015 г.

Красивое выпадающее 3D меню для Blogger.

Комментариев нет:

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

Вверх

Страницы

среда, 16 сентября 2015 г.

Красивое выпадающее 3D меню для Blogger.

Комментариев нет:

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

Вверх

среда, 16 сентября 2015 г.