Css добавить иконку меню

Как сделать — Значок меню

Если вы не используете библиотеку иконок, вы можете создать значок основного меню с помощью CSS:

Анимированный значок меню (нажмите на него):

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

Объяснение примера

Свойство width и height определяет ширину и высоту каждой полосы.

Мы добавили черный цвет background-color , и сверху и снизу margin используется для создания некоторого расстояния между каждым баром.

Анимированный значок

Используйте CSS и JavaScript, чтобы изменить значок меню на значок «отмена/удаление» при нажатии на него:

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Поверните первый бар */
.change .bar1 -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
>

/* Затухает второй бар */
.change .bar2 opacity: 0;
>

/* Поворот последнего бара */
.change .bar3 -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
>

Шаг 3) Добавить JavaScript:

Пример

Объяснение примера

HTML и CSS: мы используем те же стили, что и раньше, только на этот раз мы обертываем элемент контейнера вокруг каждого элемента и указываем имя класса для каждого.

Элемент — контейнер используется для отображения символа курсора, когда пользователь перемещает указатель мыши на паркете Дворца игровых видов спорта (деятельность баров). При нажатии на нее будет выполнена функция JavaScript, которая добавит к ней новое имя класса, которое изменит стили каждой горизонтальной полосы: первая и последняя полоса преобразуются и поворачиваются на букву «x». Полоса посередине исчезает и становится невидимой.

Источник

Как сделать — Меню бургер

Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя CSS.

Как сделать меню иконку

Если вы не используете библиотеку иконок, вы можете создать иконку основного меню с помощью CSS:

Анимированная иконка (кликните на ней):

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

Объяснение примера

Свойства width и height определяют ширину и высоту каждой полосы.

Мы добавили черный фон с помощью background-color , верхний и нижний отступы с помощью margin , которые используются для создания некоторого расстояния между каждой полосой.

Анимированная иконка

Используйте CSS и JavaScript, чтобы изменить иконку меню на иконку «отменить / удалить» при нажатии на неё:

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Поворот первой полосы */
.change .bar1 -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
>

/* Исчезание второй полосы */
.change .bar2 opacity: 0;
>

/* Поворот последней полосы */
.change .bar3 -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
>

Шаг 3) Добавить JavaScript:

Пример

Объяснение примера

HTML & CSS: Мы используем те же стили, что и раньше, только на этот раз мы оборачиваем элемент контейнера вокруг каждого элемента и мы указываем имя класса для каждого из них.

Элемент контейнера используется для отображения символа указателя, когда пользователь наводит указатель мыши на блоки div (полосы). Когда на нем кликают, он выполняет функцию JavaScript, которая добавляет к нему новое имя класса, что изменяет стили каждой горизонтальной полосы: первая и последняя полоса трансформируются и поворачиваются, преобразуясь в букву «x». Полоса посередине исчезает и становится невидимой.

Как сделать на сайте меню бургер с помощью HTML / CSS? Видео

Видеоинструкция, как сделать на сайте меню-бургер.

Источник

Css добавить иконку меню

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Какая тема Вас интересует больше?

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

Как создать профессиональный Интернет-магазин

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Источник

How TO — Menu Icon

If you are not using an icon library, you can create a basic menu icon with CSS:

Animated Menu Icon (click on it):

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Example Explained

The width and the height property specifies the width and height of each bar.

We have added a black background-color , and the top and bottom margin is used to create some distance between each bar.

Animated Icon

Use CSS and JavaScript to change the menu icon to a «cancel/remove» icon when it is clicked on:

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Rotate first bar */
.change .bar1 transform: translate(0, 11px) rotate(-45deg);
>

/* Fade out the second bar */
.change .bar2

/* Rotate last bar */
.change .bar3 transform: translate(0, -11px) rotate(45deg);
>

Step 3) Add JavaScript:

Example

Example Explained

HTML & CSS: We use the same styles as before, only this time, we wrap a container element around each element and we specify a class name for each.

The container element is used to show a pointer symbol when the user moves the mouse over the divs (bars). When it is clicked on, it will execute a JavaScript function that adds a new class name to it, which will change the styles of each horizontal bar: the first and the last bar is transformed and rotated to the letter «x». The bar in the middle fades out and becomes invisible.

Источник

Menu Icon CSS

The web pages we access have evolved at a skyrocketing pace and are continuing to do so. However, the basic structure of the pages continues to be similar to the earlier ones, with more dynamics added. There are certain things that a web page must mandatorily have. One such checkpoint for validating a web page is the triple bar menu icon, which upon clicking, opens like an accordion to give a visitor an overview of what they can explore on the website.

Web development, programming languages, Software testing & others

Examples of Menu Icon in CSS

In this article, we will explore various methods of creating a menu icon with the help of CSS and HTML. Let’s have a look at the example:

Example #1 – Creating a basic menu icon through CSS

We will write a simple CSS code to create a specific height and width bar and call for the tag on the HTML page three times to get the resultant triple bar icon.

a. Create a style sheet (namely MenuIcon.css), and write the definition for the tag as specified below:

b. Now, create an HTML page, TestIcon.html. We will call the stylesheet and use it to create a menu.

c. Save the page and open the HTML file through IE/Chrome/Firefox to see the result. A menu icon will be on the page’s top left corner.

In this example, each horizontal bar’s height and width are specified. The margin adds some distance between each bar, and the background color of black highlights each bar to look like a menu bar together.

Example #2 – Animating the Menu Icon using CSS

a. In this example, the bars created a CSS class menu within which we created specifications for div and its pseudo-elements of CSS, i.e., After and Before. The size of the menu is defined, which will encapsulate the bars of the menu icon; the size and margins for div are defined, which will be the middle bar, and the pseudo-elements after and before will be the upper and lower bar of the menu icon.

.menu < margin: 1em; width: 40px; >.menu:after, .menu:before, .menu div

b. Now, we will be working on the icon’s animation using the first and third bars, pseudo-elements of Before and After.

.menu:hover:before < transform: translateY(12px) rotate(135deg); >.menu:hover:after < transform: translateY(-12px) rotate(-135deg); >.menu:hover div

c. The logic for animation is that the upper bar (before) and the lower bar (after) rotate to the specified angle and direction when hovered upon. The middle bar (div) transforms to 0, i.e., vanishes upon hovering.

d. Here is the complete CSS code for this animation:(menuIcon.css)

.menu < margin: 1em; width: 40px; >.menu:after, .menu:before, .menu div < background-color:black; border-radius: 3px; content: ''; display: block; height: 5px; margin: 7px 0; transition: all .2s ease-in-out; >/* Move the upper bar */ .menu:hover:before < transform: translateY(12px) rotate(135deg); >/* Move the lower bar */ .menu:hover:after < transform: translateY(-12px) rotate(-135deg); >/* Make the mid bar fade out */ .menu:hover div

e. Now, we will use this CSS code through an HTML file to see the final output.

   
Hover over the Menu Icon to change it to X:
  

The output for the same is:

Example #3 – Writing CSS and JavaScript functions to animate the menu icon

a. Another method is to create a CSS icon with the transformation of each bar and call it on click-through a JavaScript function.

b. For writing the CSS code, we will define a menu class similar to the previous example. Instead of pseudo-elements, we will create three classes for each bar (before, mid, and after). We will apply to transform logic on each icon accordingly and make our CSS code ready (menuIcon2.css)

.menu < margin: 1em; width: 40px; >.before, .mid, .after < background-color: #333; width: 40px; height: 5px; margin: 6px 0; transition: all .2s ease-in-out; >/* Animate bar#1 */ .change .before < transform: rotate(-45deg) translate(-9px, 6px) ; >/* make bar#2 vanish post tranformation */ .change .mid < transform: scale(0); >/* Animate bar#3 */ .change .after

c. Once this CSS code is ready, we will write a small function to trigger the transformation of the menu icon into a cross icon. We will call this function in the HTML file such that the icon transformation to X happens at the click of the mouse.

d. We will call this function in an in our HTML file and the CSS classes created. The final HTML file should look like this:

    function menuIcon(x) 
Click on the Menu Icon to change it to X:
  

e. When we check the HTML file, the output should look like this:

On clicking the menu icon, it will transform to X:

Conclusion

So, these were some examples of how we can create and animate menu icons using simple CSS and HTML. More options can be tried by modifying the transform logic. There are many other types of transformation on the menu icon we come across daily on different web pages. Some of them are very interesting to look at. But now that we know the basic logic to create the iconic menu icon, trying different transform logic will be fun.

Recommended Articles

We hope that this EDUCBA information on “Menu Icon CSS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник