Горизонтальные вкладки с эффектом на CSS
 | |
| Эти горизонтальные вкладки выполнены в оригинальным эффектом переключателя, где присутствует градиенты, где все построено на стилях CSS. Безусловно по своей стилистике удивительная вкладка, которая предназначена для навигации по интернет ресурсу. Она в отличие от других похожих материалов обладает упругим движением, которое производится при переключении между активных вкладок. Теперь есть тема установить красивую навигацию, что будет смотреться на современном сайте или на простом дизайн, как элемент, который при работе будет сильно отличатся своим эффектом. Так как если брать стандарт, то там все срабатывает при наведении, здесь же при клике наведение не произойдет трюк, но только стоит воспроизвести клик, как с красивой анимацией появится цветная палитра на запросе. Где идет 2 оттенка цвета, что можно выставить стильный градиент. Если брать главную страницу, то здесь нужно увеличен по ширине, так уже все построено, разве только дополнить больше запросов, но и не нужно забывать, что перед каждой вкладкой стоит шрифтовая кнопка. Что при видимости совершенно по другому изначально вся структура выглядит. При проверке на Demo, где ниже предоставлена ссылка, что можете посмотреть как все реально выглядит, где также по оформлению можно самостоятельно доработать, это добавить теней или создать обвод на один или несколько пикселей для красоты.  Приступаем к установке: 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, где заходим в нужный раздел, и там можно выбрать тематические фигуры под тематику сайта. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
Если сменить несколько элементов стилей, а также добавить тень, только для того, чтоб обозначить обвод каркаса.
 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%); 
| |
