Иконка гамбургер меню css для адаптивной навигации

Эта статья может заинтересовать тех, кто предпочитает видеть в своих проектах только собственные уникальные графические элементы, в том числе, создаваемые с применением только стандартных средств. Одним из таких примеров, может являться популярная иконка гамбургер меню, отображаемая благодаря css и html ( демо / скачать ).

Общие понятия

Подобные графические элементы, создаваемые исключительно с помощью базовых средств, физически представляют собой лишь видимые эффекты, не являющиеся объектами файловой системы, но визуально их заменяющие.

Такая методика позволяет улучшить качество создаваемых веб-приложений:

ускорение загрузки страниц;
минимизация объемов ресурсов и повышение стабильности их работы, в том числе с устаревшими браузерами;
уменьшение или даже полное исключение зависимости от контента сторонних ресурсов, в любых формах использования и проявления;
способствование развитию стандартных средств.

Практическое использование иконки гамбургер меню css

1) Скачать задействованный ниже начальный текст.

2) В блоке для малых мобильных экранов соответствующего файла каскадных стилей (типа style.css) необходимо разместить код, непосредственно отвечающий за создание ожидаемого визуального эффекта данного значка:

  .menu-burger-css {
    /* Индивидуальные настройки линий */
    border-top: 3px solid #ccc; /* толщина и цвет верхней */
    height: 3px; /* расположение верхней относительно нижних */
    border-bottom: 9px double #ccc; /* отображение и цвет двух нижних */
    width: 20px; /* длина */
    /* Общие настройки */
    box-sizing: unset;
    display: inline-block;
  }

В комментариях выше описаны назначения строк, варьируя которыми, можно настраивать внешний вид иконки по своему усмотрению.

3) Если в блоке <head> кода html имеется строка с внешней или внутренней ссылкой на Font Awesome или иной шрифт, то эта ссылка удаляется, как и хранящаяся папка (при ее наличии) со скаченными ранее со стороны вариантов шрифта.

4) Соответствующий код html, размещается в том месте, где этот эффект должен быть отображен. В данном случае, строчка файла header.shtml, находящаяся между <a href="javascript:void(0);" class="icon" onclick="navfunction()"> и </a> заменяется на <span class="menu-burger-css"></span>.

Подводим итоги

В достоверности конечного результа можно удостовериться посмотрев его и (или) скачав. В случае использования десктопа / ноутбука, важно не забыть активизировать режим эмуляции мобильного устройства.

Посмотрев исходный код, открывшейся страницы, можно убедиться в отсутствии каких-либо ссылок (внешних или внутренних) в блоке <head> и линии #70, с целью демонстрации рассматриваемого графического элемента. Этот факт подтверждает изложенное ранее утверждение о наличии, в данном случае, лишь визуального эффекта, а не объекта файловой системы. Иначе, эта строчка выглядела бы примерно следующим образом:

 <img src="/images/menu-burger-picture.png" alt="...">

Примечание. Если вышеизложенное вызывает вопросы, к примеру подключение скрипта js с фукцией "navfunction()", то рекомендуется познакомиться со статьями о создании адаптивного бургер меню на базе css / js, о подключении Font Awesome и, в случае крайней необходимости, про превращение вертикального меню в адаптивное горизонтальное с css + ssi.

Заключение

В статье описано, как самому создать иконку гамбургер меню благодаря css / html и разместить в своем проекте, предварительно настроив ее внешний вид. Также описаны достоинства такого подхода в создании собственных иконок исключительно стандартными средствами.

Конечно существуют и другие технологии разработки графических элементов. Например, все большую популярность приобретают изображения векторного формата svg, но эта обширная тема отдельного обсуждения и будет рассмотрена несколько позднее. Тем более, что данная тема пока еще не исчерпана.