Ответ кроется в следующем коде. Каждую полоску нужно перемещать по отдельности, чтобы меню гамбургера превратилось в крестик (x). Верхняя и нижняя части будут вращаться на 45 градусов, но в противоположных направлениях, перемещая некоторые пиксели.
CSS анимация иконки гамбургер меню
В сегодняшнем семинаре мы рассмотрим некоторые варианты движения CSS для иконок меню гамбургера.
Меню гамбургера стало привычной функцией на большинстве сайтов. Низкий профиль значка и его отличная читаемость на небольших экранах способствуют его широкому использованию. Вы также могли заметить, что главное меню теперь скрыто под меню гамбургера, даже в полноэкранной версии.
Помимо упрощения интерфейса, на странице используются все более светлые мультфильмы для обозначения изменений. Например, состояние значка меню меняется, когда меню открыто и когда оно закрыто.
В этом примере вы создаете четыре различных стиля значков меню. Позже вы сможете сами создавать подобные значки.
HTML разметка
Планировка очень проста. Поскольку есть четыре разных примера, код используется для четырех кнопок в рамке. Для каждой кнопки почти все будет идентично, за исключением одного класса.
Сначала определите внешний стиль кнопки. Скройте текст и тень. Давайте определим углубление и размер кнопки, а также параметры перехода, которые будут использоваться позже для перемещения кнопки.
Далее определим первоначальный вид значка меню гамбургера. Поскольку мы не используем спрайты или изображения, мы оформили гамбургер с помощью метки span и двух лож:::before и::after. Все размеры и углубления соответствуют оригинальному размеру, установленному для кнопки. Если у вас есть кнопки разных размеров, вам нужно будет настроить эти значения вручную.
CSS анимация иконок
Далее настало время повернуть и изменить кнопку в анимации.
Поворот на 90 градусов
Первый пример — поворот значка на 90 градусов при нажатии.
Превращаем гамбургер в крестик «X»
В этом примере верхняя и нижняя панели значков гамбургера расположены как X. Как только вы нажимаете кнопку мыши, перемещение немного задерживается, чтобы сделать этот процесс более плавным и эстетичным.
CSS стрелка влево и CSS стрелка вправо
В последних двух примерах гамбургер превращается в стрелу.
И на самом деле, в том же самом куске кода просто поверните стрелку вправо.
Вы можете отправить свое сообщение сейчас, а зарегистрироваться позже. Если у вас есть учетная запись, войдите в систему и напишите от своего имени. Примечание: Ваша публикация должна быть одобрена координатором, прежде чем она станет доступной.
HTML код
Первоначально вы создаете общий контейнер, в котором размещаете события OnClick. Внутри есть три блока Div с разными классами. Контейнер используется для отображения символа сигнала, когда пользователь проходит над блоком Div с помощью мыши. Первый блок представляет собой верхнюю линию, второй — среднюю линию, а третий — блок. Когда пользователь нажимает на этот значок, запускается функция burgermenu (this). Что делает эта функция, объясняется ниже.
Иконка Burgermenu не является ссылкой, поэтому, когда вы переходите по ней, сам бегунок не виден, добавляет.
Оформите темную линию одинаково для всех трех классов. Предвосхитите вопрос: «Зачем создавать отдельные классы, если линии все одинаковые?».
.b1, .b2, .b3 Ширина: 36px; Высота: 5px; Цвет фона: #000; Отступ: 5px 0; Переход: 0.3s; >
Ответ кроется в следующем коде. Каждую полоску нужно перемещать по отдельности, чтобы меню гамбургера превратилось в крестик (x). Верхняя и нижняя части будут вращаться на 45 градусов, но в противоположных направлениях, перемещая некоторые пиксели.
.change .b1 трансформация: rotate (-45 градусов) трансформация (-9px, 6px); > .change .b3 трансформация: rotate (45 градусов) трансформация (-8px, -8px); >>
Центральная полоса исчезает и становится прозрачной.
Также был добавлен новый класс изменений. Это означает, что все эти перемещения будут происходить при выполнении функции класса изменения.
В этот момент иконка гамбургера готова, но при нажатии на нее ничего не происходит, потому что функция еще не написана.
JS код
При нажатии на контейнер по событию onclick выполняется функция JavaScript burgerMenu () и добавляется новое имя класса (change) с помощью метода classList.toggle. Это изменяет стиль каждой горизонтальной полосы. Верхняя и нижняя части преобразуются в крест (X). Средняя полоса исчезает и становится невидимой.
function burgerMenu(icon)icon.classList.toggle («change»); >>
Попробуйте анимацию сами.
Итоги
Действительно, читатель задается важным вопросом. Почему вы выполняете это преобразование изображения? Где вы его используете? И вы правы, само меню отсутствует во всем этом дизайне. Нажмите на значок гамбургера, и вы увидите текстовое меню и крестик. Нажмите на крестик, и текстовое меню закроется, а гамбургер появится снова.
Копирование материалов разрешено только при наличии ссылки на автора (Михаил Русаков) и прямой индексируемой ссылки на сайт http://myrusakov.ru.
Пожалуйста, добавляйтесь ко мне в друзья ВКонтакте: http: //vk.com/myrusakov. Если вы хотите оценить меня и мою работу, пожалуйста, напишите в мою группу: http://vk.com/rusakovmy.
Если вы хотите получать уведомления о новых материалах, вы можете подписаться на обновления. Подписаться на обновления
Если у вас есть вопросы или вы хотите прокомментировать эту статью, вы можете оставить комментарий внизу страницы.
Порекомендуйте статью своим друзьям:.
Если вам понравился сайт, опубликуйте ссылку на него (сайт, форум, контакт):.
Вы можете отправить свое сообщение сейчас, а зарегистрироваться позже. Если у вас есть учетная запись, войдите в систему и напишите от своего имени. Примечание: Ваша публикация должна быть одобрена координатором, прежде чем она станет доступной.
MagentaWAVE
Примеры и решения для разработки блогов и веб-сайтов «под ключ». Дизайн и разработка шаблонов для Blogger.
В этой статье описано очень простое и полезное решение, как добавить символ «закрыть» к элементу на вашем сайте или кнопку «крестик», которая позволяет посетителям закрывать ненужные элементы или определенные блоки, просто нажав на них. Создать такую функциональность на сайте или в блоге с помощью CSS или jQuery настолько просто, что для реализации требуется всего несколько строк кода. В зависимости от выбранной опции, кнопки для каждого выбранного блока могут быть добавлены вручную, либо путем редактирования кода страницы самостоятельно, либо программно с помощью скрипта. Пример изображения креста был использован для того, чтобы показать кнопки, идеально расположенные для основного блока. Общая HTML-структура этого примера выглядит следующим образом
.pop-block< display: inline-block; position: relative; /* указывать обязательно */ width: 30%; height: 300px; /* высота всего блока */ margin: 1%; > .close-block< display: block; position: absolute; top: 8px; right: -8px; width: 16px; height: 16px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH/AAD/ra3/vr7///91+I/7AAAAQklEQVR42oXPwQoAIAgD0JXu/385FfTQgnYweKAp9pUXmE+swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd/X/tAVqqAopyUfkOAAAAAElFTkSuQmCC); cursor: pointer; > .pop-block p< width: 100%; height: auto; >
Вариант 1. Кнопка «Закрыть» только на CSS
Теги формы можно использовать для скрытия элементов при нажатии на них с помощью CSS. Для этого в код основного блока необходимо добавить несколько новых тегов.
#pop-checkbox.< display: none; > #pop-checkbox: checked + .pop-block< visibility: hidden; /*чтобы освободить занимаемое место - display: none;*/ >
Если на странице есть более одного блока, который нужно скрыть, вам нужно будет использовать эту опцию, чтобы указать уникальный ID для каждого дополнительного тега и добавить к нему код CSS.
Вариант 2. Автоматическое добавление кнопки-крестика на jQuery
Использование JavaScript (jQuery) позволяет избежать необходимости вставки дополнительного HTML-кода в документ для каждого скрываемого блока, если блоков несколько. Это требуется следующим образом.
В этом примере кнопка закрытия вручную установлена только для первого элемента, а в двух других кнопки добавляются автоматически с помощью сценария.
Алгоритм написания сценария следующий. Во всех указанных блоках проверьте, присутствует ли кнопка на каждом элементе. Если его нет, он добавляется; если он есть, ничего не делается. Нажмите кнопку , чтобы скрыть ближайший блок с указанным циферблатом.
Примечание: Если вы используете автоматическое изменение размера для создания текстовых областей, вы должны использовать JavaScript. Однако в статье это не обсуждается.
Выплывающий блок по клику и кнопка закрытия
1) Как переместить блок вправо, когда я его открываю, и влево, когда я его закрываю?
2) Какое преобразование можно сделать, чтобы создать расходящееся перекрестие с четырьмя полосами по диагонали?
Ссылка на комментарий
Поделиться на других сайтах
10 ответов на этот вопрос
Вы можете отправить свое сообщение сейчас, а зарегистрироваться позже. Если у вас есть учетная запись, войдите в систему и напишите от своего имени. Примечание: Ваша публикация должна быть одобрена координатором, прежде чем она станет доступной.
Похожие публикации
Привет всем, я хотел бы бросить вам всем вызов. Задача состоит в следующем. Имеется восемь пунктов (IMG). Это означает, что все изображение должно быть разрезано на восемь частей (кадров) для создания гибкого макета. Эти восемь частей образуют единое целое (рамку), внутри которой может быть размещен текст. Высота рамки равна всей ширине текста, ширина окна. Он сгибается и поворачивается, но не работает. Пожалуйста, посоветуйте, в каком направлении двигаться. Каждый Img находится в отдельном div, а все div в общем контейнере?
（В классе (.sub-menu__list) есть выпадающее меню. Он появляется при наведении на него курсора, но перекрывает блок .page__main. Для наглядности мы прилагаем скриншот и код. Конечно, я хочу разместить выпадающее меню в верхней части содержимого следующего блока, есть советы, как это применить?
Как создать пользовательский список стран с помощью API? Код восстановления выглядит следующим образом.
const countryList = document.querySelector(‘.form-list.country’); fetch(‘https://restcountries.com/v3.1/all’).then(res => < return res.json(); >).then(data => < let output = ''; data.forEach(country =>< output += `">$ `; countryList.innerHTML = output; >); >).catch(err => < console.log(err); >); полный html, css, js код второй список ‘country’ создаст список, но в следующем случае название страны указывается не в форме, а в атрибуте ‘data-value=»»‘. Первый список ‘VisitorAmount’ в порядке, поскольку данные указаны в html. Мне нужно то же самое, но для стран. Должен сказать, что с тегами select все работает, но мне нужен стилизованный выпадающий список. Заранее спасибо, я попробую заставить список стран работать.
Здравствуйте! Есть ли у вас сайт http://unbrokenteam.ru/入力フィールドと同じ垂直線でボタンを移動するにはどうすればよいですか? Вот как это выглядит сейчас: style.css.noTableBorder-button Как использовать этот класс для кнопки в style.css.< left: 0; margin-left: 0; transform: none; display: block; >index.html style.css
Bootstrap 4-5 Header, Footer, LeftMenu, Content и RightMenu помогают создать минимальный макет. Ширина LeftMenu + Content + RightMenu равна ширине основного блока текущего сайта (htmlforum.io). Другими словами, они не центрируются по всей ширине браузера. Возможно, существует какая-то практика для ширины этих элементов? LeftMenu — размещается у левого края контейнера. RightMenu — прикрепляется к правому краю контейнера. Например. Попробуйте, все прыгает. https://jsfiddle.net/User65659/0jxt7qLg/45/
Обсуждения
Планировка очень проста. Поскольку есть четыре разных примера, код используется для четырех кнопок в рамке. Для каждой кнопки почти все будет идентично, за исключением одного класса.
Как сделать крестик в css
Я давно хотел создать «дрель», используя только HTML и CSS без каких-либо скриптов, и вот я сделал это.
 |
Он играет на уровне мастера. Другими словами, он пытается выиграть или сыграть вничью. Позиции рассчитаны с применением «крестов и траншей» Стивена Остермиллера. Итак, на JavaScript я написал ссылку на перечисление и запустил его в ‘V8’. Я хотел придать игре налет винтажности, поэтому добавил яркий фон конца 90-х, курсив и тени. Как в старые добрые 90-е, возможно, отсутствуют только некоторые анимированные GIF-файлы.
Кстати, несмотря на урожай, браузеры должны поддерживать CSS3, включая преобразования.
Я еще не пробовал, сейчас время сна. Пожалуйста, сообщите мне об ошибке, и я постараюсь ее исправить, если только она не связана с недостатками алгоритма Остермиллера. В конце концов, это скорее идея, чем полноценная игра.
Как работает иконка крестик справа в поисковой строке для удаления строки?
Выделите пример поисковой строки: https://codepen.io/MarcoGuglielmelli/pen/rfpEm何らかの理由で, макет отображается неправильно в Mozilla, но не в Chrome и Opera. Я не понимаю, как значок X появляется справа от текстового поля поиска. При нажатии на нее строка удаляется из строки поиска. Чтобы удалить строку, мне пришлось выполнить X в поле поиска.
Я сохранил этот пример локально на своем компьютере. Все работает одинаково, но я не смог найти в html и css код, который вызывает иконки крестика и предыдущей строки поиска.
Крестик закрыть на чистом CSS
Здравствуйте. Сегодня мы рассмотрим, как закрыть X с помощью чистого CSS, т.е. как оформить иконку закрытия/удаления без изображения.
Если вы не хотите самостоятельно разрабатывать свой сайт, обратитесь к специалисту. Специалисты помогут вам быстро и качественно разработать дизайн вашего сайта без написания кода.
Теперь, для тех, кто все еще хочет рисовать иконки для закрытия без изображений, дальнейшее приветствуется.
Крестик закрыть на чистом CSS
Во-первых, поймите, что крест должен быть написан в HTML-коде. То есть, это должен быть div или span какого-то типа. Так что давайте попробуем:.
Конец. Этот код должен быть введен там, где вы назначаете крест.
Далее перейдем к рендерингу самого креста. Как ясно из названия статьи, для этого используется чистый CSS, без изображений и иконочных шрифтов.
По умолчанию крест будет полупрозрачным и светлеть по мере прохождения через него. Вы можете создавать альтернативные эффекты свинга по своему усмотрению.
Теперь давайте посмотрим на CSS.
Как видите, все очень просто. Для представления перекрестия используются две прямые линии: один псевдоэлемент: сзади, другой псевдоэлемент: спереди. Один из них вращается на 45°, а другой — на -45°. Очень просто.
Что касается совместимости браузеров, это можно легко проверить с помощью caniuse. Согласно ему, после: до все современные браузеры поддерживают конвертацию — за исключением Opera mini, что на самом деле является неплохим показателем.
При необходимости в этот крест могут быть добавлены различные добавки для удовлетворения потребности.
В этом примере мы верхнюю и нижнюю полоски нашей иконки гамбургера размещаем в виде крестика «Х». После нажатия вы видите небольшую задержку анимации, чтоб этот процесс был более плавным и красивым.
Заключение
Теперь вы должны понимать, как строятся простые элементы формы и как использовать пользовательские элементы управления для настройки остальных. Конечно, это лишь основы для создания стилей, которые диктует ваше воображение.
В качестве последнего совета, не забудьте сделать так, чтобы все ваши формы подходили друг другу.
Как видите, все очень просто. Для представления перекрестия используются две прямые линии: один псевдоэлемент: сзади, другой псевдоэлемент: спереди. Один из них вращается на 45°, а другой — на -45°. Очень просто.
Мне нравится этот вопрос! Вы могли бы легко адаптировать мой код ниже, чтобы был белый × на оранжевом квадрате:
SCSS (который можно легко преобразовать в CSS) выглядит следующим образом.
Вы можете сделать это с помощью стиля ‘x’
Это простой div и динамический размер версии без псевдоэлементов.
Это можно сделать на сайте このページの他の場所で@Gildas.Tamboによって提供されるすばらしいソリューションのカスタマイズされたバージョンです. Вы можете изменить размер элемента ‘x’, просто изменив значение переменной в верхней части.
Заслуга в решении этой проблемы принадлежит Гильдасу. Все, чем я занимался до сих пор, — это преподавание адаптивной математики.
Похожие вопросы:
Я не хочу создавать крест на диалоге, чтобы закрыть его. Как это происходит? И что делать, если я хочу испортить перекрестный щелчок на диалоговом окне, чтобы оно не закрывалось?
Я создал DataGridView и добавил колонку DataGridViewImageColumn (используя конструктор). DataGridView имеет AllowUserToAddRows=true, что отображает пустую строку для ввода пользователем новой строки.
Есть CSS-файл темы WordPress, в котором значок перекрывает красный X. Ошибок в файле не обнаружено. CSS на сайте функционирует правильно, и вы пытались отключить валидатор CSS в разделе
IE10 с помощью следующей строки кода в CSS убирает крестики. Однако кресты по-прежнему появляются. Как я могу решить эту проблему? inputtype = text :: —ms-clear< display:none;.
Поэтому я попытался создать x. e.Graphics.SmoothingMode= System.Drawing.Drawing2D.SmoothingMode.HighQuality; e.Graphics.DrawLine (new pen (Colour.Black , 1), this.Width + 20-50, 20, this.Width+25-.
Я хотел бы напечатать крестик () или правильную букву () на TCL с помощью echo или put. Есть ли вообще способ сделать это?
Однако я хотел бы изменить курсор мыши на крестик в excel, так как в VBA Application.Cursor = нет опции крестика. Я не понимаю.
Привет ion — Я хочу сделать пользовательскую настройку в fab, но я не смог найти ничего, чтобы убрать крестовую ноту, когда я нажимаю кнопку fab и открывается список fab. Мне не нужна икона креста.
Возможно ли отключить крестик удаления в поле ввода текста с помощью CSS? С правой стороны находится символ валюты, и я хотел бы предотвратить перекрытие фокуса. .
