Создание иконки гамбургер меню css для адаптивной навигации
Эта статья для тех, кто предпочитает видеть в своих проектах собственные уникальные графические элементы, создаваемые, в том числе, с применением стандартных средств. Одним из таких примеров является создание популярной иконки гамбургер меню css и отображаемой благодаря javascript с html ( демо | скачать ).
Общие понятия
Подобные графические элементы, создаваемые на базе css3, физически представляют собой лишь видимые эффекты имитации, не являющиеся объектами файловой системы, но визуально их заменяющие.
Такая методика позволяет улучшить качество создаваемых веб-приложений благодаря:
- ускорению загрузки страниц;
- минимизации требований к вычислительным средствам и повышению стабильности их работы;
- уменьшению или исключению полностью зависимости от контента сторонних ресурсов, в любых формах использования и проявления;
- способствованию развитию стандартных средств.
Практическое применение иконки гамбургер меню css
1) Скачать взятый за основу и ниже подлежащий преобразованию исходный код шаблона, который уже использовался в предыдущей статье про адаптивное бургер меню css js с пользованием символов шрифта Font Awesome.
2) В разделе для малых мобильных экранов файла каскадных стилей general-styles/style.css блок кода .iconmy-in заменить на блок .menu-burger-css, непосредственно отвечающий за воспроизведение ожидаемого визуального эффекта данного значка гамбургер, представлен ниже:
В комментариях выше описаны назначения строк, варьируя которыми, можно настраивать внешний вид иконки гамбургер по своему усмотрению.
3) Часть контента файла general-includes/header.shtml находящееся между строками с содержимым a href= и /a заменяется на:
4) Необходимо удалить все внешние или внутренние ссылки ведущие на стороннюю графику. А также саму графику, размещенную на создаваемом или редактируемом ресурсе. В данном случае удаляются строка #3 файла general-includes/header.shtml с содержимым link href="/general-styles/fonts/style...." rel="stylesheet" и папка general-styles/fonts/.
Проверка результата
В достоверности конечного результата можно удостовериться посмотрев и (или) скачав ресурс с данной методикой.
В случае использования десктопа или ноутбука, важно не забыть активизировать режим эмуляции мобильного устройства.
Посмотрев исходный код, открывшейся страницы, можно убедиться в отсутствии в коде каких-либо ссылок (внешних, внутренних) на сторонние графические элементы. Также невозможно найти подобные элементы в имеющейся файловой системе.
Эти факты подтверждают изложенное ранее утверждение о существовании, в данном случае, лишь визуального эффекта и ничего более.
Если вышеизложенное вызывает вопросы, к примеру представление о структуре шаблона, его использование, подключение скрипта js с функцией "navfunction()", ... , то рекомендуется познакомиться со статьями о создании адаптивного бургер меню на базе css js и о подключении Font Awesome. В крайнем случае перейти в начало темы адаптивного меню, а именно превращение вертикального в горизонтальное.
⚬ ⚬ ⚬
Таким образом, рассмотрено описание самостоятельного воспроизведения имитации иконки гамбургер меню css и размещение в своем проекте благодаря javascript и html, предварительно настроив ее внешний вид. Также описаны достоинства подхода в создании подобных изображений исключительно стандартными средствами.
Существуют и другие технологии разработки графических элементов. Например, все большую популярность приобретают изображения векторного формата svg, но это другая обширная тема отдельного обсуждения и будет рассмотрена позднее. Тем более, что и настоящая тематика пока еще не исчерпана одной гамбургер иконкой.
