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

Большое меню с эффектом CSS при наведении

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

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

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

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

HEAD

Код

HTML

Код

<div class="mainDiv" style="background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1438&q=80);">
  <div class="bgColor">
  <div class="container">
  <div class="row">
  <div class="col-sm-12 col-md-12 text-center BordName">
  welcome
  </div>
  <div class="col-sm-12 col-md-12 mt100">
  <ul class="brk-page-intro__sorting d-flex flex-wrap justify-content-center font__family-montserrat">
  <li class="bordertr brk-page-intro__sorting-item checked rendered" data-filter="*" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">All</div>
  <div class="brk-page-intro__sorting-before"></div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-portfolio" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Portfolio</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">15</div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-shop" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Shop</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">19</div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-business" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Business</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">33</div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-gallery" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Gallery</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">9</div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-shortcodes" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Shortcodes</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">51</div>
  </li>
  <li class="brk-page-intro__sorting-item rendered" data-filter=".filter-header" style="opacity: 1;">
  <div class="brk-page-intro__sorting-title">Headers</div>
  <div class="brk-page-intro__sorting-before"></div>
  <div class="brk-page-intro__sorting-count font__weight-semibold">15</div>
  </li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  </div>

CSS

Код

.mainDiv{
  position: relative;
  background: no-repeat center center;
  background-size: cover;
  min-height: 150vh;
}
.bgColor{
  background: linear-gradient(70deg, rgba(0, 0, 255, 0.7), rgba(181, 95, 174, 0.9));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.flex-wrap {
  flex-wrap: wrap!important;
}

.d-flex {
  display: flex!important;
}

ol, ul {
  list-style: none;
}

.brk-page-intro__sorting-item {
  display: inline-block;
  position: relative;
  width: 90px;
  height: 152px;
  border-top: 2px solid rgba(255,255,255,.4);
  border-bottom: 2px solid rgba(255,255,255,.4);
  transition: .5s border-color;
  cursor: pointer;
  margin: 3px 28px;
  opacity: 0;

}

.brk-page-intro__sorting-item:hover
{

}

.brk-page-intro__sorting-item:before {
  transform: rotate(60deg);
}
.brk-page-intro__sorting-item:after, .brk-page-intro__sorting-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(100% + 4px);
  border-bottom: inherit;
  border-top: inherit;
  bottom: -2px;
}
.brk-page-intro__sorting-item:after {
  transform: rotate(-60deg);
}

.brk-page-intro__sorting-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: auto;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  z-index: 2;
}

.brk-page-intro__sorting-before {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  transition: all .3s ease-in-out;
  z-index: 1;
  -webkit-clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition: all .8s ease-in-out;
  background: linear-gradient(70deg, rgba(0, 0, 255, 0.25), rgba(181, 95, 174, 0.56));
  transition: all .8s ease-in-out;
  border-top: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 0px solid rgba(255, 255, 255, 0);
}

.brk-page-intro__sorting-item:nth-child(even) {
  margin-top: 80px;
}

.brk-page-intro__sorting-count {
  position: absolute;
  top: 18px;
  right: -28px;
  width: 23px;
  height: 23px;
  text-align: center;
  font-size: .8125rem;
  line-height: 23px;
  color: #2675ff;
  background-color: #fff;
  border-radius: 50%;
  z-index: 3;
}

.brk-page-intro__sorting-item.checked .brk-page-intro__sorting-before, .brk-page-intro__sorting-item:hover .brk-page-intro__sorting-before {
  background: linear-gradient(70deg, rgba(0, 0, 255), rgba(181, 95, 174));
  transition: all .8s ease-in-out;
  border-top: 112px solid rgba(255, 255, 255, 0);
  border-bottom: 0px solid rgba(255, 255, 255, 0);

}

.brk-page-intro__sorting-item.checked .brk-page-intro__sorting-before, .brk-page-intro__sorting-item:hover
{
border-color:transparent;

}
.bordertr
{
  border-color:transparent;
}
.BordName
{
  color: white;
  font-size: 6.2em;
  padding-top: 30px;
  padding-bottom: 30px;
  text-transform: uppercase;
  font-family: auto;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.47);
  position: relative;
  z-index: 3;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}

.mt100{
  margin-top:100px;
}

@media (max-width: 320px), (max-height: 220px){
  .BordName
  {
  font-size: 50px;
  }

  .mainDiv
  {
  min-height: 900vh;
  }
}

@media (max-width: 768px), (max-height: 321px){
  .BordName
  {
  font-size: 50px;
  }

  .mainDiv
  {
  min-height: 500vh;
  }
}

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

Идея состоит в том, чтобы иметь простую композицию элементов, значок, главный заголовок и вторичный заголовок, которые будут анимироваться при наведении курсора, используя только CSS-переходы и анимацию.

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

05 Июля 2020 Загрузок: 3 Просмотров: 1334 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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