Привет Кодер! Добро пожаловать в блог 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.

Какова цель выпадающего меню?

Основная функция выпадающего меню — сжать большое количество данных и ссылок в небольшом пространстве. Это помогает в администрировании веб-сайта и облегчает пользователям доступ к ключевым ссылкам, что улучшает взаимодействие с пользователем.