Вы узнаете, как создать расширяемое и сворачиваемое боковое меню с выпадающими подменю с использованием HTML, CSS и jQuery. На эту боковую панель вы можете добавить столько подменю, сколько захотите. Если высоты боковой панели недостаточно для отображения всех меню и подменю, боковая панель автоматически отрегулирует высоту и автоматически отобразит полосу прокрутки на боковой панели из-за свойства "overflow-y: auto;". Таким образом, вы можете прокручивать боковую панель вверх вниз. Фон боковой панели выполнен в стиле glass. Это стиль прозрачности blur. боковая панель будет более привлекательной в стиле glass. Давайте посмотрим, как создать эту боковую панель.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения
- Исходные файлы HTML
- Исходные файлы CSS
- Исходные файлы jаvascript
- Иконки шрифтов
- Файлы библиотеки и плагинов
Сначала создайте файл index.html и файл style.css. После создания этих файлов запустите HTML-часть боковой панели в файле index.html как вы можете видеть на видео.
После завершения HTML-части, чтобы начать стилизацию боковой панели, свяжите файл style.css с файлом index.html между тегами <head></head>. Потом перейдите к стилю.CSS-файл и выполните укладку часть с боковой панели, как вы можете видеть в видео.
После укладки частью полного перейти к файлу index.html для jQuery или части. Чтобы запустить часть jQuery, привяжите скрипт jQuery libraries к файлу index.html между тегами <head></head>. Затем перед закрытием тега body откройте теги <script></script> и заполните часть боковой панели jQuery внутри этих тегов, как вы можете видеть на видео.
Вот и все. Надеюсь, это видео будет полезно для простого создания расширяемого и сворачиваемого бокового меню с выпадающими подменю.
