Выезжающее горизонтальное меню CSS3 для uCoz
 | |
Это оригинальное навигация, выполнена в горизонтальном виде. Которое по своему формату при наведение клика, будет появляться, выполнена в темном тоне на CSS3 стилях. Тематика у него обширная, так и дизайн самого сайта, просто оно немного видна вверх сайта и если вам нужно перейти на другую категорию или просто на материал, то вы наводите и оно выезжает, все очень красиво исполнено. Установка: В верхнюю часть сайта в панели управления, в самый верх сохраняем код: Код <ul class="wmtop"> <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> <li><a href="#">Главная</a></li> <li><a href="#">Главная</a></li> </ul> в css: Код .wmtop {position:fixed;top:0;box-sizing:border-box;-moz-box-sizing:border-box;width:100%;padding:0 20px;background:rgba(0,0,0,.7);background:#333\0/;list-style:none;margin-top:-5px;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:-webkit-transform .5s cubic-bezier(.7,-0.2,.3,1.5);-moz-transition:-webkit-transform .3s ease;-ms-transition:-webkit-transform .3s ease;transition:transform .5s cubic-bezier(.7,-0.2,.3,1.5);} .wmtop:hover {-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);} .wmtop li {display:table-cell;width:1%;-webkit-transform:skewX(160deg);-moz-transform:skewX(160deg);-ms-transform:skewX(160deg);transform:skewX(160deg);} .wmtop a {color:#fff;text-decoration:none;display:block;text-align:center;-webkit-transform:skewX(-160deg);-moz-transform:skewX(-160deg);-ms-transform:skewX(-160deg);transform:skewX(-160deg);padding:18px;} .wmtop li:hover {background:rgba(0,0,0,.3);background:#222\0/;}  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
В принципе можно добавит типа стрелку и будет более понятно
.wmtop:after left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: rgba(0,0,0,.7); border-width: 40px; margin-left: -40px; top: 54px; Гдето так:   | |
