Логотип блога MY

 ВЕБ-ТЕХНОЛОГИИ

 Домен itworldmy.ru - блог MY

начинающим

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

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

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

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


Демонстрация иконки гамбургер css

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

Практическое использование иконки гамбургер меню 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, но эта обширная тема отдельного обсуждения и будет рассмотрена несколько позднее. Тем более, что данная тема пока еще не исчерпана.



Комментарии
Опубликовано: 0
Ждущих публикации: 0


Ваше имя:
(не более 20 символов)

Ваше сообщение:
(не более 1000 символов)



Новое в разделах

Делать сайт / MYsiteD

Разное

Архив Новостей


Данные

Время  - 05:47:04
Дата - 05.10.2022

Страница:
 - обновлена - 15.07.2022
 - посещений - 227

Сейчас:
 - на сайте - 2
 - переходов - 1


↑ ВВЕРХ