Как сделать гамбургер меню в css

Bootstrap Hamburger Menu

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product — Material Design for Bootstrap 5.
Go to docs v.5

By clicking on this control, you activate some information or navigation that is hidden by default for UX purposes.

This usually means activating a SideNav, but might also roll down a Navbar menu.

Examples of Bootstrap hamburger menu use include:

  • SideNav activation
  • Navbar menu

This is illustrated by the following Bootstrap hamburger menu examples:

Basic example

Info notification

MDB has hundreds of colors to use within a hamburger menu. Take a look here to know all the possibilities.

Various hamburger menu icons

Hamburger menu icon animations

Click on the icon to see the animation.

Hamburger icon within an accordion

Info notification

Copy the code above ("hamburger menu icon animations") if you want to have them within an accordion.

Hello, my friends, I am the nicest accordion!

How awesome accordion I am?

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

You’re the greatest accordion!

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Thank you my dear!

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Hamburger icon with background

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework — free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package — a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Map of dependencies of SCSS files in MDBootstrap:

Map of dependencies of JavaScript modules in MDBootstrap:

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you’ll gain free access to other useful tools & resources including:

Анимируем «иконки-гамбургеры» для меню на чистом CSS

Анимируем иконки-гамбургеры для меню на чистом CSS

«Иконка-гамбургер» для меню стала одним из ключевых элементов на многих веб-сайтах и приложениях, и, нравится она вам или нет, но такая иконка стала узнаваемой и используемой кнопкой пользовательского интерфейса. Пользователи ассоциируют данную иконку с показом/скрытием меню. Она является компактной и очень практичной, т.к. экономит место, особенно на небольших экранах. Раньше вы могли вы создать или скачать подобную иконку и вставить ее в ваш документ. Это все хорошо и здорово, и если вы используете спрайты изображений, то вы стремитесь к легкой реализации.

Сегодня же я, наоборот, собираюсь показать вам, как создать популярную «иконку-гамбургер» на чистом CSS. С ростом числа мобильных устройств, с приходом анимации в CSS и появлением таких спецификаций по дизайну, как «Material Design» от компании Google, пользователи уже начинают ждать более интерактивного опыта взаимодействия. В демо-примерах мы создадим несколько классных анимаций для наших иконок, чтобы показать, что иконка является «активной» или, точнее, что меню открыто. Для реализации этого я буду использовать совсем чуть-чуть JavaScript. Хорошо, давайте приступать!

Общая разметка

Я буду создавать 4 разных демо-примера. Разметка для каждой из кнопок будет почти одинаковой. Для каждой кнопки будет задан один общий и один уникальный класс. Каждая кнопка состоит из родительского тега button и тега span внутри. Родительский тег будет выполнять роль контейнера для иконки. Это позволит нам добавлять внутренние отступы и фоновые цвета для иконки. Тег span будет местом для размещения «полосок гамбургера». Вот разметка:

Гамбургер иконки с анимированными переходами

Гамбургер иконки с анимированными переходами

«Гамбургер» — название иконки, состоящей из трёх параллельных горизонтальных линий, символизирующих список меню.

В данной заметке для такой иконки представлено 7 разных анимированных переходов в крестик по клику. Классы для гамбургера и крестика переключаются на jQuery

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *