• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Вкладки для адаптивной навигаций CSS (Создания адаптивных вкладок в виде кнопок для меню сайта)
Вкладки для адаптивной навигаций CSS
Kosten
Дата: Среда, 2020-03-18, 18:59 | Сообщение 1
Онлайн
Администраторы
Сообщений:26308
Награды: 61


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

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

Так реально смотрится на любом формате по ширине:



Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/responsive-nav.js/1.0.32/responsive-nav.min.js"></script>

HTML

Код
<nav class="nav-collapse" role="navigation">
    <ul class="tabs primary-nav">
        <li class="tabs__item">
            <a href="#" class="tabs__link">Главная</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Talks</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Schedule</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Location</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Contact</a>
        </li>
    </ul>
</nav>

CSS

Код
.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}

    .tabs__item {
        width: 100%;
        float: left;
    }

    @media screen and (min-width: 40em) {
        .tabs__item {
          display: table-cell; /* [4] */
          float: none;
          width: auto;
        }
    }

        .tabs__link {
            display: block; /* [5] */
        }

.primary-nav {
    text-align: center;
    border-radius: 0;
    overflow: hidden; /* [1] */
}

        .primary-nav a {
            padding: .75em 1em;
            color: white;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            text-decoration: none;
            border-right: 1px solid #000;
            font-family: Share, Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-size: 1.75em;
        }

        .primary-nav a:hover {
            color: black;
            background: #f8d800;
        }

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

.nav-collapse {
  list-style: none;
  width: 100%;
  float: left;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #f8d800; /* Edit this to change the icon color */
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  content:"x";
}

JS

Код
var navigation = responsiveNav(".nav-collapse", {
  animate: true,                    
  transition: 284,                 
  label: "Menu",                  
  insert: "before",                  
  customToggle: "",                
  closeOnNavClick: false,         
  openPos: "relative",             
  navClass: "nav-collapse",         
  navActiveClass: "js-nav-active",
  jsClass: "js",                    
  init: function(){},               
  open: function(){},               
  close: function(){}               
});

Что по тематике на многие сайты это яркое по цветовой гамме навигация подойдет.

Демонстрация
Прикрепления: 3715205.jpg(46.3 Kb) · pure-css-naviga.zip(6.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Вкладки для адаптивной навигаций CSS (Создания адаптивных вкладок в виде кнопок для меню сайта)
  • Страница 1 из 1
  • 1
Поиск: