Несколько дней назад я смотрел видео с иностранным боссом, использующим HTML + CSS для реализации гамбургермену. Недавно я смотрел SASS, поэтому я использовал SASS для его реализации.
Финальный рендеринг заключается в следующем:
Структура файла в коде VS (простой SASS используется для компиляции файлов SCSS):
Структура страницы (index.html):
_config.scss:
/*Установите цвет и максимальную ширину*/$ Primary-Color: RGBA (13,110,139, 0,75); $ Overlay-Color: RGBA (24,39,51, 0,85); $ max-width: 980px;/*Установите цвет текста, если цвет фон является светом, установлен на черный, в противном случае установлен на белый цвет*@@@@@@@@@@@@@wet-stex-color). @if (легкость ($ color)> 70) {@return #333; } @else {@return #fff; }}/*Микшер, установите цвет фона и цвет текста*/@@mixin set-background ($ color) {founal-color: $ color; Цвет: Set-Text-Color ($ color);}style.scss:
@import '_config';*{margin: 0; Подкладка: 0;}. Контейнер {максимальная ширина: $ max-width; Покрас: 0 Auto;}/*Установите цвет фона для витрины, используйте псевдо-класс, чтобы добавить фоновое изображение, и установите Z-индекс фонового изображения на -1 (эта картина будет отображаться внутри); и затем, чтобы позволить тексту отображаться в середине, используйте гибкую макет*/. Showcase {положение: относительно; Высота: 100VH; фоновый цвет: $ первичный цвет; &: до {content: ''; позиция: абсолютно; слева: 0; Верх: 0; Ширина: 100%; высота: 100%; Предпосылки: URL ('../ IMG/PEXELS-PHOTO-533923.JPEG') Без повторного центра центра/Cover; z -index: -1; } & -Inner {display: flex; высота: 100%; Флекс направление: колонка; Justify-Content: Center; Align-Items: Center; Текст-альбом: Центр; Цвет: #fff; шрифт-вес: 100; H1 {Font-Size: 4Rem; Заполнение: 1.2Rem 0; } p {белое пространство: pre-wrap; Размер шрифта: 1,6Rem; Заполнение: 0,85Rem 0; } .btn {Padding: .65Rem 1Rem; /*Используйте микшер, чтобы установить цвет фона и цвет текста*/ @include set-background (Lighten ($ первичный цвет, 30%)); граница: нет; Граница: 1px твердый $ первичный цвет; граница радий: 5px; Текстовое декорация: нет; Схема: нет; Переход: все .2s легко .1s; /* Когда кнопка «Нагрязнение» используется для установки эффекта масштабирования с использованием шкалы CSS3*/ &: Hover {@include Set-Background (Lighten ($ Overlay-Color, 30%)); Пограничный цвет: осветить ($ Overtay-Color, 25%); Преобразование: масштаб (.98); }}}}}/*Принцип: изменить стиль, чтобы сделать флажок в или нет (установите прозрачность флажки на 0, а z-индекс установлен выше). При щелчке появится меню. Нажмите еще раз, и меню исчезнет *// *Установлен, исправленная для меню, так что витрина заполнит весь экран; В то же время установите непрозрачность флажки на 0; Также обратите внимание, что вам необходимо установить Z-индекс флажона 2, потому что Z-индекс гамбургера устанавливается на 1, в противном случае клик не будет работать*/. Menu-WRAP {позиция: исправлена; слева: 0; Верх: 0; z-index: 1; .toggle {позиция: абсолют; слева: 0; Верх: 0; Ширина: 50px; Высота: 50px; непрозрачность: 0; Z-Index: 2; курсор: указатель; /*Когда флажок проверяется, установите эффект вращения Div и псевдо-класса в гамбургере*/ &: проверено ~ .hamburger> div {transform: rotate (135Deg); /*Псевдо-класс фактически поворачивает 225 градусов, и вам нужно установить верхнюю часть на 0, в противном случае длина образованного ❌ является несовместимой*/ &: до, &: после {transform: rotate (90deg); Верх: 0; }} / * Когда выбран флажок, эффект вращения также будет установлен * / &: проверено: Hover ~ .hamburger> div {transform: rotate (235Deg); } &: проверено ~ .menu {видимость: visible; > div {transform: scale (1); > div {непрозрачность: 1; }}}}}} .hamburger {position: Absolute; слева: 0; Верх: 0; Ширина: 60px; Высота: 60px; Заполнение: 1Rem; фоновый цвет: $ первичный цвет; Распределение коробки: пограничная коробка; дисплей: Flex; Флекс направление: колонка; Justify-Content: Center; Align-Items: Center; Текст-альбом: Центр; z-index: 1; /*div генерирует среднюю горизонтальную линию, затем устанавливает позицию как относительную, а затем устанавливает его псевдо-класс на абсолютный и смещает ее относительно Div*/> div {position: относительно; слева: 0; Верх: 0; Ширина: 100%; Высота: 2px; фоновый цвет: #fff; Переход: все .7s легко; /*Используйте псевдо-класс для генерации первых и третьих горизонтальных строк*/ &: до, &: после {content: ''; позиция: абсолютно; слева: 0; Верх: -10px; Ширина: 100%; Высота: 2px; фоновый цвет: наследуя; } &: после {top: 10px; }}} /*Установите стиль выбранного меню* / /*Установить меню на фиксированное, с шириной и высотой 100%, а затем установите дисплей для изгиба, в противном случае меню не будет отображаться в середине* / .menu {position: fixer; слева: 0; Верх: 0; Ширина: 100%; высота: 100%; переполнение: скрыто; дисплей: Flex; Justify-Content: Center; Align-Items: Center; видимость: скрыта; /*Установите меню на невидимое, а затем установите его на видимый, когда выбран флажок*/ Переход: все .75s легко; > div {@include set-background ($ alplay-color); Ширина: 200 ВВт; Высота: 200 фунтов; переполнение: скрыто; граница радий: 50%; дисплей: Flex; Justify-Content: Center; Align-Items: Center; Текст-альбом: Центр; преобразование: масштаб (0); Переход: все .4s легко; > div {max-width: 90vw; Макс-высот: 90VH; непрозрачность: 0; Переход: все .4s легко; > ul> li {list-style: none; размер шрифта: 2Rem; Надо: .85Rem 0; Текст-трансформация: верхний регистр; Преобразование: перекосив (-5DEG, -5DEG) вращение (5DEG);/*Установить текст Tilt*/ a {Color: наследство; Текстовое декорация: нет; Переход: Цвет .4s легко; }}}}}}}}Это статья о HTML+SASS, внедряющем Hambergurmenu (меню в стиле гамбургера). Для получения дополнительной связи HTML+SASS -реализации Hambergurmenu, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!