Привет Кодер! Добро пожаловать в блог Codewithrandom. В этом блоге мы узнаем, как создать Выпадающее меню с помощью HTML и CSS. Когда вы наводите курсор на ссылку в навигационной панели, она показывает выпадающее меню при наведении ссылки.
Мы используем HTML для создания структуры Dropdown Menu путем создания панели навигации и используем Css для стилизации раскрывающегося меню.
«Выпадающее» меню напоминает список вариантов, но скрыто внутри кнопки или другого элемента. Когда пользователь нажимает на кнопку, открывается выпадающее меню. В этом сообщении блога мы обсудим, как создать выпадающее меню на боковой панели с помощью HTML и JavaScript.
Html-код выпадающего меню: -
<body> <div id="container"> <nav> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Web Design</a> <ul> <li><a href="#">Project</a></li> <li><a href="#">Videos</a></li> <li> <a href="#">Tutorials</a> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Javascript</a></li> <li> <a href="#">UI Trend</a> <ul> <li><a href="#">Neumorphism</a></li> <li><a href="#">Glassmorphism</a></li> <li><a href="#">Other UI</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Web development</a></li> <li><a href="#">CWR</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <h1> Go to google search codewithrandom and visit my website for source. code and 40+ frontend project available with complete code </h1> </body>
Контейнер для нашего выпадающего меню будет создан с помощью элемента div с контейнером id, а внутри него с помощью тега nav будет создана секция navbar. Это добавит структуру для нашего выпадающего меню. Выпадающее меню будет создано с использованием ненумерованного списка, элемента списка и тегов привязки внутри него. Неупорядоченный список будет использоваться для создания ссылок для панели навигации.
Есть весь HTML-код для выпадающего меню. Теперь вы можете увидеть вывод без Css, затем мы пишем код CSS для нашего выпадающего меню.
Только вывод HTML-кода:-
Код CSS для выпадающего меню: -
@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Bree+Serif); body { background: #ebf0f5; font-size: 22px; line-height: 32px; color: #ffffff; word-wrap: break-word !important; font-family: "Open Sans", sans-serif; } a { color: #fff; } #container { margin: 0 auto; } nav { margin: 50px 0; background-color: #0f131f; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { display: inline-block; background-color: #0f131f; } nav a { display: block; padding: 0 10px; color: #fff; font-size: 20px; line-height: 60px; text-decoration: none; } nav a:hover { background-color: #5f5c5c; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; } nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul ul li { position: relative; top: -60px; left: 170px; } h1 { width: 670px; color: black; font-size: 1.4rem; } li > a:after { content: " +"; } li > a:only-child:after { content: ""; }
Шаг 1.Используя ссылку для импорта Google, мы сначала добавим несколько новых стилей шрифта в наше раскрывающееся меню. К нашим усилиям будут добавлены два новых семейства шрифтов Open Sans и Bree Brif.
Фон теперь будет установлен на светло-синий с помощью селектора тега body, а свойство размера шрифта будет использоваться для установки высоты шрифта на «22 пикселя». Мы добавим высоту строки 32 пикселя, используя атрибут высоты строки, а цвет шрифта установим белым.
@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Bree+Serif); body { background: #ebf0f5; font-size: 22px; line-height: 32px; color: #ffffff; word-wrap: break-word !important; font-family: "Open Sans", sans-serif; }
Шаг 2.Используя идентификатор тега (a,nav), мы установим для свойства фона значение «черный», для поля — 5 opx, а для цвета — «белый». Мы также установим поле с помощью селектора тегов на панели навигации.
Используя селектор тега «a», мы также установим отображение как «блок» и высоту шрифта 20 пикселей для нашего раскрывающегося меню, поскольку мы устанавливаем для него положение встроенного блока.
Также с помощью свойства hover мы добавим при наведении курсора мыши на ссылку на панель навигации изменение цвета фона значка sd «Серый цвет».
{ color: #fff; } #container { margin: 0 auto; } nav { margin: 50px 0; background-color: #0f131f; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { display: inline-block; background-color: #0f131f; } nav a { display: block; padding: 0 10px; color: #fff; font-size: 20px; line-height: 60px; text-decoration: none; } nav a:hover { background-color: #5f5c5c; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; } nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul ul li { position: relative; top: -60px; left: 170px; } h1 { width: 670px; color: black; font-size: 1.4rem; } li > a:after { content: " +"; } li > a:only-child:after { content: ""; }
Теперь мы завершили наш код Html и Css.
Вот наш обновленный вывод с Html и Css. Надеюсь, вам нравится проект выпадающего меню. вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки.
Спасибо!
В этом посте мы узнаем, как создать Выпадающее меню с помощью HTML и CSS. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.
Автор — Code With Random/Anki
Какой редактор кода вы используете для кодирования выпадающего меню?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Что такое выпадающее меню?
«Выпадающее» меню выглядит как набор опций, но на самом деле оно скрыто внутри кнопки или другого элемента. Выпадающее меню отображается после того, как пользователь нажмет кнопку. В этой статье блога мы поговорим о создании выпадающего меню боковой панели с помощью HTML и JavaScript.
Какова цель выпадающего меню?
Основная функция выпадающего меню — сжать большое количество данных и ссылок в небольшом пространстве. Это помогает в администрировании веб-сайта и облегчает пользователям доступ к ключевым ссылкам, что улучшает взаимодействие с пользователем.