Vluvre.ru

Сегодня сделаем мобильное меню для сайта WordPress на чистом CSS, где роль иллюстрации будет делать шрифт-иконка. Данный урок может понадобиться тем блогерам и веб-мастерам, кто собрался сделать мобильную версию сайта без помощи других. И тем, у которых определены старые темы WordPress и кто отказывается, либо не может сменить их на адаптационные шаблоны. На сайте https://up-sait.ru/mobilnoe-menyu-dlya-sajta-html-css-js-6-variantov можно узнать подробнее про мобильное меню для сайта.

Разумеется, можно присоединить особые плагины для этих задач и не загружать собственный головной мозг «ковырянием» в коде CSS. Но в случае если для вас принципиальна не только лишь адаптивность, но также и скорость загрузки сайта — полагаю с плагинами вам не по пути. Вследствие этого накопите упорства, сконцентрируйтесь и внимательным образом выполняйте действия изображенные в этой публикации.

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

После хранения записанных перемен, пройдите на веб-сайт через Firebug (для Firefox) либо DevTools (для Chrome) в режиме мобильного просмотра, и воспримете сделанное меню. Оно достаточно хорошо выглядит. Однако и это еще не все и нам предстоит его улучшить.

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

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

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