» »

Горизонтальные вкладки с эффектом на CSS

Горизонтальные вкладки с эффектом на CSS

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

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

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

При проверке на Demo, где ниже предоставлена ссылка, что можете посмотреть как все реально выглядит, где также по оформлению можно самостоятельно доработать, это добавить теней или создать обвод на один или несколько пикселей для красоты.

Универсальные вкладки на jQuery

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

HTML

Код
<nav class="namovemenotes">
  <div class="gotasadegnen"></div>
  <a href="#" class="active"><i class="fas fa-at"></i>Главная</a>
  <a href="#"><i class="fab fa-angular"></i>Zornet.Ru</a>
  <a href="#"><i class="fab fa-apple"></i>Скриптыr</a>
  <a href="#"><i class="fab fa-algolia"></i>Шаблон для сайта</a>
  </nav>

CSS

Код
.namovemenotes {
  margin-top: 47px;
  font-size: 14px;
  padding: 0px;
  list-style: none;
  background: #f7f4f4;
  box-shadow: 0px 4px 18px rgba(27, 26, 26, 0.13);
  display: inline-block;
  border-radius: 81px;
  position: relative;
}

.namovemenotes a {
  text-decoration: none;
  color: #3a3737;
  text-transform: uppercase;
  padding: 9px 18px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition-duration: 0.7s;
}

.namovemenotes a.active {
  color: #f7f7f7;
}

.namovemenotes a i{
  margin-right:5px;
}

.namovemenotes .gotasadegnen {
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  border-radius: 95px;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.13, 1.4);
  background: #0c99c5;
  background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  background: -webkit-linear-gradient(45deg, #2eb5e0 0%,#7b0fda 100%);
  background: linear-gradient(45deg, #35b9e2 0%,#591990 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4',GradientType=1 );
}

JS

Код
var namovemenotes = $('.namovemenotes');
var items = $('.namovemenotes').find('a').length;
var gotasadegnen = $(".namovemenotes").find(".gotasadegnen");
var activeItem = namovemenotes.find('.active');
var activeWidth = activeItem.innerWidth();
$(".gotasadegnen").css({
  "left": activeItem.position.left + "px",  
  "width": activeWidth + "px"
});

$(".namovemenotes").on("click","a",function(){
  $('.namovemenotes a').removeClass("active");
  $(this).addClass('active');
  var activeWidth = $(this).innerWidth();
  var itemPos = $(this).position();
  $(".gotasadegnen").css({
  "left":itemPos.left + "px",  
  "width": activeWidth + "px"
  });
});

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

Важно: Шрифтовые иконки подключены с этого портала Fonts.com, где заходим в нужный раздел, и там можно выбрать тематические фигуры под тематику сайта.

Демонстрация
2018-09-22 Просмотров: 285 Комментарий: (3)

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

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

Комментарий: 3
Kosten
Kosten 2018-09-23 02:011
0
Если сменить несколько элементов стилей, а также добавить тень, только для того, чтоб обозначить обвод каркаса.



CSS

Отвечает за обвод как на изображение на втором варианте, самом нижним.

CSS

Код
box-shadow: 0px 0px 5px 1px rgba(29, 27, 27, 0.51), 0px 0px 2px 2px rgba(0, 0, 0, 0.23);


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

Код
background: linear-gradient(45deg, #e0056a 0%,#3100f4 100%);
CbIPoK2513
CbIPoK2513 2018-09-23 11:362
0
В данном коде не табы, а просто меню)
Kosten
Kosten 2018-09-23 15:063
0
Но в название и описание намеренно Табы не писал, хотя вкладки те же табы, но табы, они же информацию открывают, здесь упор идет на слово "горизонтальные" для этого и демонстрация пристегнута.
avatar