Создаем меню с подкатегориями в CSS
На чтение: 1 минРубрика: HTML, CSS
Обновлено: 23 декабря, 2021
Код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hover</title> <style> ul { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ } li ul { position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ } li a { display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc;/* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ } li a:hover { color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ } li:hover ul { display: block; /* При выделении пункта курсором мыши отображается подменю */ } .brd { border-bottom: 1px solid #ccc; /* Линия снизу */ } </style> </head> <body> <ul> <li><a href="/">Категория 1</a> <ul> <li><a href="/">Подкатегория 11</a></li> <li><a href="/">Подкатегория 12</a></li> <li><a href="/">Подкатегория 13</a></li> <li><a href="/">Подкатегория 14</a></li> </ul> </li> <li><a href="/">Категория 2</a> <ul> <li><a href="/">Подкатегория 21</a></li> <li><a href="/">Подкатегория 22</a></li> <li><a href="/">Подкатегория 23</a></li> <li><a href="/">Подкатегория 24</a></li> </ul> </li> <li><a href="/">Категория 3</a> <ul> <li><a href="/">Подкатегория 31</a></li> <li><a href="/">Подкатегория 32</a></li> <li><a href="/">Подкатегория 33</a></li> <li><a href="/">Подкатегория 34</a></li> </ul> </li> <li><a href="/">Категория 4</a></li> </ul> </body> </html>
Демо данного примера можно посмотреть и скачать здесь.
Рейтинг автора
Написано статей
(8 оценок, среднее: 4,88 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка…
822 просмотров
Понравилась статья? Поделиться с друзьями:
Выпадающее МЕНЮ на чистом CSS / HTML
5em black} </style> <a href=//www.youtube.com/embed/K3C4NdzFHg0?autoplay=1> <img src=//img.youtube.com/vi/K3C4NdzFHg0/hqdefault.jpg alt=’Выпадающее МЕНЮ на чистом CSS / HTML’> ▶ </a>» allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»» frameborder=»0″>Дата добавления: 2022-04-21 08:45:00 | Просмотров: 148
(2 часть) Адаптация под мобильные устройства — https://youtu.be/tRoszGUp5Sg
Исходный код — http://bit.ly/2oVnIzd
Создание сайтов:- Сайт «Визитка»
- Сайт «Интернет магазин»
- Сайт «Эксклюзив»
- Установка, настройка форумов и отдельных скриптов;
- Поддержка сайтов;
- Перенос сайта на другой хостинг;
- Верстка сайтов;
- Написание скриптов любой сложности;
- Продвижение сайтов;
г. Москва, улица Челюскинская, дом 11
+7 (915) 0-444-383
© 2007-2022, Capitan Studio — Разработка и создание сайтов. Все права защищены.
Использование материалов разрешено только при наличии активной ссылки на источник.
Политика в отношении обработки персональных данных
На портале могут быть использованы материалы интернет-ресурсов Facebook и Instagram, владельцем которых является компания Meta Platforms Inc., запрещенная на территории Российской Федерации.
Разработка сайта CapitanStudio
CAPITANSTUDIO.RU использует cookie (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства пользователей. CAPITANSTUDIO.RU серьезно относится к защите персональных данных — ознакомьтесь с условиями и принципами их обработки. Вы можете запретить сохранение cookie в настройках своего браузера.
меню HTML в плагинах кода
Подробная информация о содержании
Socke- Кодовые плагины- 26 января 2018
4,55 из 5 звезд (20 рейтингов)
- 900%
- 15%
- 5%
- 0%
- 15%
- 5%
- 0%
- 15%
- 5%
- 0%
- 5%
См. 8 письменных отзывов
8 написанных отзывов
Ответы на 76 из 76 вопросов
Поддерживаемые платформы
Поддерживаемые версии двигателя
4.17 — 4.27, 5.0 — 5.1
Скачать тип
ГОД код, который интегрируется с Unreal Engine, который можно установить на выбранную вами версию движка, а затем включить для каждого проекта отдельно.
Описание
Отзывы
Вопросы
Вы можете использовать этот плагин для создания меню (главное меню, система инвентаризации и т. д.) в HTML (javascript, css, Jquery и т. д.). Меню в HTML предлагают гораздо больше возможностей, чем в UMG. В Интернете есть невероятное количество HTML-документации, примеров и поддержки. Например, вы хотите создать стильную кнопку? Вы можете просто создать кнопку на этом сайте, и у вас будет отдельная кнопка для вашей игры. Необходимую библиотеку JavaScript можно найти в документации или в каталоге плагинов. Engine\Plugins\Marketplace\HTMLMenuMain\HTMLMenu_basic
Никаких специальных предложений. Купите плагин, если он вам нужен. Мои цены низкие круглый год.
Протестируйте сторонние веб-сайты со встроенным браузером UE4 перед покупкой.
Поддержка Android и IOS, начиная с UE 4.21 и плагина версии 1.5. WebGL начиная с UE 4.24.
Версия 1.5 протестирована на: Windows 10, Android 7.1.2 . iOS 12.1.2, macOS Мохаве 10.14.2
Ограничения: IME (редактор методов ввода для азиатских символов) не работает. Доступ к жесткому диску через Javascript/html невозможен. Доступ к камере/микрофону невозможен. Виджет веб-браузера всегда находится на переднем плане в Android/IOS. Ошибка в движке вызывает черное изображение в 3D-виджете на мобильных устройствах в некоторых версиях UE4. Нативизация может вызвать проблемы и должна быть отключена в BP, которые используют этот плагин.
Документация, бесплатная демонстрация Windows, пример проекта с функциональным меню и системой инвентаризации
Демонстрационное видео.
Installations video
Changelog (4.22, 4.23, 4.24)
- (04/07/2020) Version 1.11: Added an PDF viewer
Changelog (4.24, 4.25, 4.26)
- (30.07.2021): Добавлен просмотрщик PDF для Android и IOS. См. документацию.
- (05.08.2021) Версия 1.12: Новая функция «getSytemType». Эта функция возвращает ОС (Windows, Android….).
ChangeLog (4,25, 4,26, 4,27)
- (19. 01.2021).
- (12.07.2022) Версия 1.15: теперь можно открыть окно с инструментами разработки браузера для отладки javascript и т. д. Также возможно открывать новые окна с помощью Javascript.
Технические детали
Epic разрешает обновления только для трех новейших версий движка. В старых версиях движка могут отсутствовать функции. Свяжитесь со мной, если вы не уверены.
Этот плагин использует внутренний браузер UE4 и расширяет его основными функциями.
- Чтение автономных файлов. (Онлайн-страницы также могут быть загружены. Но, пожалуйста, только свои собственные или попробуйте тестовую демонстрацию Windows HTML.)
- Объедините HTML, Javascript, CSS и изображения в один файл HTML. Этот файл также работает в файлах .pak.
- Функции Javascript запускают события Blueprint (неограниченное количество параметров).
- Библиотека Javascript с множеством полезных функций (геймпад, отладка).
- Некоторые функции C++ могут выполняться непосредственно с помощью Javascript (Консольные команды, графические настройки (разрешение, сглаживание, тень, масштаб разрешения), изменение уровня или подключение к серверу. Скажите, что еще вам нужно)
- Браузер работает со скоростью до 60 кадров в секунду (Браузер UE4 по умолчанию — 24).
- Средство просмотра PDF
- Предназначен для чистого кода Javascript и Blueprint.
- Образцы проектов доступны бесплатно. (Графическое меню, Diablo как пример инвентаря RPG).
- Виджет 3D Видео 9
В этом уроке мы создадим многоуровневое меню навигации . Есть несколько способов реализовать это. В этом руководстве мы собираемся создать этот , используя HTML и CSS .
Если вы действительно хотите проявить фантазию и применить несколько крутых эффектов, вам нужно применить некоторые приемы JavaScript (или еще лучше jQuery ).
Чтобы построить наше многоуровневое навигационное меню , мы просто будем использовать неупорядоченный список с подсписками . Затем мы просто применим некоторые свойства стилей CSS, чтобы показать и скрыть элементы второго уровня.
<ул>
- Главная
- Товары <ул>
- Компьютеры
- Аудио
- Видео
Вы можете добавить новые подэлементы второго уровня просто , добавив новых тегов
, прежде чем вы закончите основной элемент тегом
.
Обратите внимание на в приведенном выше примере, как мы начали новый неупорядоченный список до закрытия основного элемента Продукты
.
Без CSS у нас есть простой многоуровневый неупорядоченный список. Нам нужно применить некоторые творческие стили, чтобы преобразовать это в меню навигации.
ul#navMenu { отступ: 0px; поле: 0px; ширина: 420 пикселей; стиль списка: нет; должность: родственник } ul#navMenu ул { положение: абсолютное; слева:0; верх: 100%; дисплей:нет; отступ: 0px; поле: 0px } ul#navMenu li { дисплей: встроенный; плыть налево; должность: родственник } ul#navMenu { текстовое оформление: нет; отступ: 10 пикселей 0 пикселей; ширина: 100 пикселей; фон:#666666; цвет:#ffffff; плыть налево; выравнивание текста: по центру; граница: 1px сплошная #ffffff; } ul#navMenu a:наведите { фон:#cccccc; цвет:#333333 }
Вот раздел кода CSS, в котором подэлементов отображаются при наведении
на основные элементы первого уровня.
ul#navMenu li:hover ul { дисплей:блок; } ul#navMenu ul a { ширина: 150 пикселей; } ul#navMenu ul li { дисплей:блок; поле: 0px }
Вы сначала скрываете список подэлементов второго уровня, задав стиль display:none
. Затем, чтобы отображались подэлементы, вы устанавливаете стиль display:block 9.0200 на псевдоклассе
наведите курсор на
на элементе родительского списка.
В этом примере мы собираемся добавить третий уровень пунктов меню. Третий уровень будет размещен под подпунктом Video
.
<ул>
Для третьего уровня нам нужно добавить следующих стилей CSS .