» »

Выезжающее горизонтальное меню CSS3 для uCoz


Выезжающее горизонтальное меню 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/;}


05.02.2016 Просмотров: 502 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
csretven
csretven 05.02.2016 00:281
0
Что то на сайте нового стало больше появляться. Так что появление его, это нормально, но просто может кто то вообще не принять кго за меню а за дизайн, какую то стрелку нужно было вывести, что смотри и нажимай.
ucozmental
ucozmental 05.02.2016 00:312
0
Мне вот интересно, куда стрелку ставить будете, все нормально, на светлом сайте все заметно будет.
Tergran
Tergran 05.02.2016 00:413
+2
Давайте разберем это меню, чтоб не было если прямо говорить очень тупых вопросов. Оно создано на чистом CSS3, кто то видит ссылку в стилях, ее там нет и не должно быть. Если стрелку устанавливать, то вам нужен будет файл, и интересно с какой стороны вы подойдете, чтоб его там прописать. Оно делалась изначально по такому формату и ваши стрелки тут будут явно лишними.

Говорите, что не увидят.

Здесь соглашусь, но его ставят и люди понимают, что нет сразу горизонтального меню, но видят, что идет темная полоса, но если ты новичок, ты не обратишь внимание и тебе нужно немного подучиться в этом случай, а так все сделано технично.
Сопрано
Сопрано 05.02.2016 00:464
0
Tergran, не нужно всех полировать, сам видать недавно научился писать грамотно и без ошибок, все понятно по этому скрипту, и что оно появятся будет, нужен дизайн под него еще оригинальный.
Сафрон
Сафрон 05.02.2016 00:565
0
Всегда кто то не доволен и ему больше нужно, а не понимает, что здесь просто пользователи делятся, и этому хоть рад будь. Но без противоречивых комментариев не обойтись, но глупые писать, тоже не к чему, как про стрелку, но посмотрите на код и потом говорите, может купола во всю спину.
AnTron
AnTron 05.02.2016 04:236
0
Это понятно, просто можно больше сделать. чтоб его видно было. А то только нужно на его навести и тогда только появиться а не просто курсором провести и все.
flyn
flyn 05.02.2016 14:547
-1
В принципе можно добавит типа стрелку и будет более понятно

.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;

Гдето так:



avatar