ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню с эффектом наведения CSS

Вертикальное меню с эффектом наведения CSS

Отличное меню вертикальном положение, где имеет оригинальный эффект приятного наведения, что также используется стильные шрифтовые кнопки. Все эффекты исполнены благодаря CSS3, так как все сделано на чистой стилистике. Такой великолепный трюк эффекта создает меню с аккуратными полосками по своему дизайну и с присутствием анимации. В стилях выставлен плавный переход, который идет на сами кнопки, что проворачиваются на 360% и появление гаммы цвета, что также по скорости поставлено.

Так как если один элемент немного ускорить, то будет совершенно по другому смотреться, а точнее просто некорректно. На современном стиле портала, это навигация отлично впишется под любой дизайн. Так как по умолчанию она шла намного шире, что пришлось немного убрать, где вероятно создавали как раз под современный стиль. Но сейчас можно поставить на стандартный шаблон, где сам уже веб мастер выставляет значение, как вы высоте так и по ширине, чтоб отлично вписаться в основу.

Так идет в реальности, где проверено и размещено на Demo странице.

Навигация сайта с интересным эффектом

Как видим, что можно придать любой оттенок, что безусловно легче выставить под основной стиль портала.

Меню для светлого сайта

Приступаем к установке:

HTML

Код

<nav>
  <UL>
  <li class="prosatukib-essionals">
  <div class="remelsen-usefulos"></div>
  <div class="alculats-doneature">
  <div class=dalculason>
  <i class="icon-mobile-phone icon-2x"></i>
  </div>
  <a href="#"><span>ZorNet - портал</span></a>
  </div>
  </li>
  <li class="prosatukib-essionals">
  <div class="remelsen-usefulos"></div>
  <div class="alculats-doneature">
  <div class=dalculason>
  <i class="icon-lightbulb icon-2x"></i>
  </div>
  <a href="#"><span>Окна Ajax</span></a>
  </div>
  </li>
  <li class="prosatukib-essionals">
  <div class="remelsen-usefulos"></div>
  <div class="alculats-doneature">
  <div class=dalculason>
  <i class="icon-wrench icon-2x"></i>
  </div>
  <a href="#"><span>Скрипты</span></a>
  </div>
  </li>
  <li class="prosatukib-essionals">
  <div class="remelsen-usefulos"></div>
  <div class="alculats-doneature">
  <div class=dalculason>
  <i class="icon-briefcase icon-2x"></i>
  </div>
  <a href="#"><span>Шаблоны</span></a>
  </div>
  </li>
  </UL>
</nav>

CSS

Код

ul{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.prosatukib-essionals {
  position: relative;
  background: #545050;
  width: 315px;
  height: 63px;
  margin-bottom: 3px;
}

.remelsen-usefulos
{
  width:68px;
  height:63px;
  position:absolute;
  background:#1078a0;
  color:#f4f4f5;
  z-index:3;
}

.remelsen-usefulos i{
  position:relative;
}

.alculats-doneature{
position:absolute;
width:100%;
z-index:3;
color:#f1f1f1;
}

.alculats-doneature:hover .dalculason{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.prosatukib-essionals:hover .remelsen-usefulos{
width:100%;
background:#1078a0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.prosatukib-essionals:hover a{
font-weight:bold;
-webkit-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-ms-transition:all .7s ease-in-out;
  transition:all .7s ease-in-out;
}

.dalculason {
position:relative;
width:67px;
height:67px;
text-align:center;
color:#f7fafb;
-webkit-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-ms-transition:all .7s ease-in-out;
float:left;
transition:all .7s ease-in-out;
float:left;
}

.dalculason i{top:19px;position:relative;}

a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#f2f7fb;
text-decoration:none;
width:100%;
height:65px;
text-align:center;
}

span{
margin-top:24px;
display:block;
}

Если не подключены шрифтовые иконки, то обязательно сделайте, то фигур не будет видно. И также не нужно знать, что навигация на ресурсе несет очень важную часть, где будет распределять по ключевым словам, что как можно быстрей найти информацию.

Демонстрация

15 Сентября 2018 Просмотров: 1650 Комментариев: (0)

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

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

Kosten

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