Адаптивное меню на CSS3

Приветствую вас на своем блоге!

Решил вам сделать небольшой сюрприз — написать еще одну и на мой взгляд очень полезную татью об адаптивном меню! Но меньше слов — больше дела. Погнали!

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

И так, начнем….

1. Разметка HTML

Разметка самая обычная, можно даже сказать — стандартная, которая состоит из неупорядоченного списка и который будет обернут в контейнер.

<div>
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Каталог</a></li>
        <li><a href="#">Клиенты</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">О компании</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

2. CSS

Над CSS я сильно загоняться не стану. Главная задача — это что бы понять как же сделать его адаптивным.

#nav {
    width: 90%;
    margin: 60px auto;
    background: #666;
}

#menu {
    width: 100%;
}

#menu li {
    list-style: none;
    float: left;
    display: block;
    width: 12.5%;/*100/8 (так как пунктов меню 8 то всю ширину делим на 8)*/
}

#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    text-decoration: none;
    background: #666;
    color: #ddd;
    font-size: 13px;
}

#menu li a:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
}

Теперь, в стилях меню с помощью медиа запросов мы будем проверять ширину окна браузера и в зависимости от нее, менять сами стили меню.

/*если окно браузера менее чем 950px чуть уменьшаем размер шрифта*/
@media screen and (max-width: 950px){
    #menu li a {
        font-size: 11px;
    }
}

/*если окно браузера менее чем 780px делаем меню в 2 строки*/
@media screen and (max-width: 780px){
    #menu li {
        width: 25%;
    }
    #menu li a{
        font-size: 13px;
    }
    #menu li:nth-child(even) {
        width: 25%;
        float:right;
    }
}

/*если окно браузера менее чем 440px делаем меню в 2 колонки*/
@media screen and (max-width: 400px){
    #menu li {
        width: 50%;
    }
    #menu li a{
        font-size: 13px;
    }
    #menu li:nth-child(even) {
        width: 50%;
        float:right;
    }
}

Таким образом с помощью медиа запросов можно создавать не только меню, но и полноценные сайты, которые будут подстраиваться под любое разрешение экрана.

Но если бы все было так просто… Наивные). Как всегда всеми нами любимые IE (ослик он и в Африке ослик) ниже 9 версии этого не поддерживают. И для них нам придется подключить javascript (желательно перед </body>).

<script src=»respond.min.js» type=»text/javascript»></script>

А еще для более лучшей работы скрипта необходимо в стилях прописать, после каждого медиа запроса, специальный комментарий (/*/mediaquery*/).

Пример:

@media screen and (max-width: 400px){
    #menu li {
        width: 50%;
    }
    #menu li a{
        font-size: 13px;
    }
    #menu li:nth-child(even) {
        width: 50%;
        float:right;
    }
}/*/mediaquery*/

Таким образом меню будет также хорошо отображаться в IE8 и ниже.

Тут можно посмотреть демонстрацию урока!

На этом все… Надеюсь Вам это было полезным!

Ах да…. Советую еще посмотреть, на мой взгляд, одни из самых лучших курсов на эту тему:

• HTML5 и CSS3 с Нуля до Профи
• Фреймворк Bootstrap

Навигация по записям

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Не забудьте подписаться на обновления:

Похожие записи

Оставить свой комментарий

Как сделать адаптивное меню в ВК для группы (паблика, сообщества)

Кроме создания сайта, часто заказывают комплексное оформление аккаунтов соцсетей в едином стиле. Самое популярное – это создание меню в вк (для группы в контакте), оформление канала на ютубе и инстаграмма.

В этой статье я расскажу как сделать адаптивное меню для сообщества вк.

Для создания красивого меню – нужны мало мальские знания графических программ (фотошоп, гимп, корел, илюстратор).

Я делаю в фотошопе.

Для начала я нашел подходящие картинки. Очень хорошие изображения можно найти на фотостоках, но они платные (стоимость можно включить в стоимость заказа, если вы делаете меню на заказ).

Из картинок собираем макеты для оформления группы:

1. аватарка
2. шапка группы
3. кнопка вызова меню
4. меню

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

Ава обычно это логотип компании. Если логотипа нет, то вы можете скачать подходящий по теме файл на том же фотостоке и изменить его под себя.

Я так и сделал – скачал подходящий логотип и немного его доработал.

Размер аватарки рекомендую делать 200 x 200 px  (учтите что картинка будет обрезаться окружностью)

Шапка для группы вк

Шапка (обложка) группы это место для полета фантазии. Именно по обложке пользователи определяют о чем эта группа. Следовательно шапка должна передать тематику группы.

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

Размер шапки вк для ПК

Основной размер шапки 1590 x 400 px 

Размер шапки вк в мобильном приложении

Видимая часть в приложении 1196 x 317 px (сюда должна поместится вся важная информация)

Но в приложениях по бокам располагаются дополнительные элементы. Они тоже перекроют часть изображения. Ещё по 140 px слева и справа.

Кстати! Вот тут можно посмотреть все размеры вк.

И так, у меня получилась вот такая шапка (обложка)

Теперь получившуюся картинку загружаем как обложку группы.
Делается это так:

Заходим в Управление

Обложка сообщества → Загрузить. И выбираем нашу картинку.

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

Меню в ВК делается с помощью wiki-разметки (это специальный язык программирования созданный для ВКонтакте).

Для меню нужно создать вики-страницу. Делается это так:

Скопируйте и вставьте в адресную строку такой код (с вашими данными)

http://vk.com/pages?oid=-123456789&p=МЕНЮ

Где 123456789 это порядковый номер (ID) вашей группы.

Взять его можно в адресной строке.

а МЕНЮ – это название страницы.

В результате у вас появится вот такая новая страница.

Нажимаем “Наполнить содержанием”. И мы попадаем в редактор страницы.

Редактор страницы имеет два режима:
– Визуальный режим
– Режим wiki-разметки

Если треугольные скобки обрамлены в синий квадрат, то значит включен режим вики-разметки.

Если скобки синие без рамки, то вы в визуальном редакторе.

Нам нужен редактор вики-разметки. Тут мы будем прописывать код для меню в вк.

Но перед написанием кода, посмотрите в адресную строку.
Скопируйте все символы до знака вопроса (?) – это адрес вашего меню.
Запишите его!

Меню для группы ВК

С начала его нужно сделать (в графическом редакторе).

Размер меню такой:

Я сделал такое меню:

Теперь в фотошопе (инструментом “Раскройка”) я разрезаю меню на равные части.

Там же в фотошопе нажимаем Файл → Сохранить для Web…

Выделяю все части и сохраняю в формате Png-24.

В итоге у меня получилось 12 частей.

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

Теперь все получившиеся куски надо загрузить в альбом группы.

Я для этого создаю отдельный альбом с названием “Технический”. Туда я переношу и аватарку и картинку шапки.

Возвращаемся на созданную страницу МЕНЮ. Если забыли она находится по этому адресу http://vk.com/pages?oid=-123456789&p=МЕНЮ
Не забываем 123456789 заменить на номер вашей группы.

Что-бы вновь перейти к режиму редактирования – нужно нажать значок Карандаша в верхнем углу.

Теперь нам нужно построить таблицу из нашей нарезки в которой картинки будут кнопками-ссылками, а те места где нет кнопки будут не кликабельны.

Таблица в ВК начинается так: {|
а заканчивается так:|}

Меню всегда делайте таблицей, что-бы кнопки не скакали когда смотришь группу через приложение

В общем пишем так (но со своими значениями):

{|noborder;nopadding
|-
| [[photo-176307581_456239020|300x100px;nopadding;nolink| ]]
| [[photo-176307581_456239021|300x100px;nopadding;nolink| ]]
|-
| [[photo-176307581_456239022|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239023|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239024|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239025|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239026|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
 | [[photo-176307581_456239027|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239028|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239029|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239030|300x100px;nopadding;nolink| ]]
| [[photo-176307581_456239031|300x100px;nopadding;nolink| ]]
|} 

Вместо photo-176307581_456239020 и подобных – заменяем на номера своих картинок.

Узнать их можно так:

1. Переходим в альбом группы “Технический”
2. Открываем первое фото куска меню
3. В адресной строке копируем часть с номером этой картинки (там много цифр, перед нужной нам написано photo-)

И так проделываем с каждой картинкой нашего меню для группы ВКонтакте.

А вместо https://vk.com/topic-176307581_39164350 пишем ссылку на нужную нам страницу.
Эти страницы я обычно создаю как Обсуждения (для этого их нужно активировать через настройки Управления)

Так проделываем с каждой кнопкой.

У тех картинок которые не являются кнопкой стоит значение [[photo-176307581_456239030|300x100px;nopadding;nolink| ]]. При нажатии на такую картинку – ничего не произойдет.

В любой момент редактирования вы можете посмотреть что у вас получается. Для этого кликните по вкладке Просмотр.

Кнопка меню вк

Подготавливаем картинку с надписью “Открыть меню” или просто “Меню”.

Это будет кнопка вызова меню группы.

Размер кнопки Меню:
– Ширина 600 px
– Высоту желательно делать меньше или такую же.

Теперь переходим в нашу группу и создаём Новую запись.

В качестве фотографии выбираем нашу картинку-кнопку.

А в названии вставляем адрес с нашим Меню (тот который надо было записать). Вы увидите, что после картинки (ниже) появится надпись МЕНЮ. Теперь просто стираете название-ссылку.

И нажмите на Шестеренку и добавьте галочки “От имени сообщества” (что-бы можно было закрепить запись) и галочку “Выключить комментарии”

Теперь нажимая на эту картинку – будет открываться наше меню в вк.

Не забудьте закрепить эту запись, что-бы Меню всегда было вверху ленты постов.

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

Обязательно добавьте статью в закладки. Я так сделал) Не раз ещё пригодится.

И подписывайтесь на новые и только полезные статьи!

Если вам понравилось как я оформляю группу вк, то заказывайте оформление у меня (стоимость услуг)

Шутка дня:
Экипаж прощается с вами и желает Вам приятного полета.

Как настроить мобильное адаптивное меню WordPress для вашего сайта

Опубликовано: 2021-09-20

Поскольку сегодня так много людей просматривают Интернет со смартфонов и планшетов, мобильный дизайн очень важен. Благодаря адаптивному макету сайт хорошо выглядит практически на любом устройстве, от типографики до изображений. Однако мобильное адаптивное меню WordPress также должно быть частью сайта.

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

Сегодня я собираюсь показать вам, как добавить меню навигации, которое будет привлекательно смотреться практически на любом устройстве. Более того, я покажу вам, как это сделать без единой строчки кода.

Использование тем для адаптивного меню

Один из самых простых способов реализовать стильное адаптивное меню — использовать правильную тему. Многие разработчики сегодня автоматически делают это частью общего дизайна темы. К сожалению, не всем из них потребуется время, чтобы включить адаптивные меню. Это особенно актуально, если вы хотите использовать старую тему, созданную до того, как мобильные технологии стали действительно популярными.

Чтобы проверить, поддерживает ли ваше меню адаптивный дизайн:

Перейдите в область внешнего вида админ-панели WordPress.

Найдите свою тему и нажмите кнопку «Настроить».

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

Щелкните значок «планшет» или «телефон», чтобы показать вам, как тема выглядит на аналогичных устройствах.

Обратите внимание на область меню вашего сайта. Сжимается ли он в серию из трех горизонтальных линий? Это универсальный значок для пунктов меню на мобильных устройствах. Если это так, то вам действительно не нужно много делать, поскольку ваша тема поддерживает мобильное адаптивное меню WordPress.

Если ваш макет не регулирует меню в мобильном представлении, вы можете подумать об изменении темы WordPress. Однако нет ничего плохого в том, чтобы сохранить внешний вид вашего веб-сайта таким, какой он есть. Через мгновение я покажу вам несколько альтернатив, которые можно использовать, если вам не нравится, как выглядит меню на вашем сайте.

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

Использование плагина адаптивного меню

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

Например, вы можете дать меню собственное фоновое изображение, чтобы добавить больше визуальной привлекательности.

Чтобы использовать Адаптивное меню:

Перейдите в область плагинов на панели инструментов WordPress.

Нажмите кнопку «Добавить» вверху.

Найдите «Адаптивное меню» в текстовом поле справа.

Установите и активируйте плагин.

В левую панель администратора WordPress будет добавлен новый элемент управления под названием «Адаптивное меню». Щелкните здесь, чтобы открыть настройки.

Плагин дает вам большой контроль, когда дело доходит до создания настраиваемого меню навигации.

Начальная настройка : в этой области вы можете изменить, когда меню станет мобильным с точки зрения ширины пикселей. Он также имеет возможность использовать настраиваемое меню, которое вы создаете в WordPress, если вы хотите, чтобы вместо него отображалось что-то еще.

Меню : в области «Меню» вы можете изменить порядок, значки, ширину и другие модификации текста. Именно в этот раздел вы можете добавить другое фоновое изображение, если хотите придать макету более визуальную привлекательность.

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

Подменю : если у вас есть подменю в макете, плагин также дает вам контроль над ними. Цвета, изображения и значки можно настроить. Однако некоторые из наиболее привлекательных функций ограничены версией плагина Pro.

Технические : в области «Технические» вы можете точно настроить место размещения CSS, а также минимизировать код для повышения эффективности. Вы также можете настроить WordPress на использование шорткода для адаптивного меню, если вы хотите добавить макет на страницы или сообщения.

Пользовательский CSS : для тех, кто разбирается в программировании на CSS, здесь вы можете разместить код.

Панель заголовка : хотя все эти параметры зарезервированы для версии Pro, вы можете изменить фактический макет заголовка. На этой вкладке плагина доступны такие вещи, как размещение логотипа, заголовки, текст, размер и многое другое.

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

Импорт / экспорт : в системе также есть возможность сохранять свои настройки. Вы можете импортировать, экспортировать или сбросить все свои параметры парой щелчков мыши.

После того, как вы сделали свой выбор, нажмите кнопку «Обновить параметры» внизу.

Обратите внимание, что этот плагин не отменяет возможность ваших тем создавать адаптивное меню. Если вы используете это с адаптивной темой, на мобильном устройстве будут отображаться два меню одновременно. Вам нужно будет устранить одну из них, если вы хотите не вводить пользователей в заблуждение.

Однако можно использовать оба одновременно, не вызывая слишком много проблем, если вы измените меню, которое плагин использует вместо основного элемента управления навигацией. Например, вы можете оставить в покое адаптивную навигацию темы, одновременно отображая меню категорий контента из навигации плагина.

Другие плагины для рассмотрения

Адаптивное меню WP

WP Responsive Menu — хорошее дополнение для настройки макета. Он полностью отзывчив и предлагает простую в использовании панель администратора для настроек. Как и тот, который я упоминал выше, WP Responsive предлагает настройку цветов, а также возможность включения вашего логотипа. Вы также можете настроить навигацию так, чтобы она открывалась вверху, слева или справа на веб-сайте.

WP липкое меню

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

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

Какие дополнения вы установили в WordPress для продвижения адаптивного дизайна? Вы нашли идеальную тему, которая хорошо работает на всех устройствах с доступом в Интернет?

Адаптивное меню — немного FlexBox, немного JavaScript

Всем привет!
Сегодня мы будем делать горизонтальное меню для сайта. Меню будет адаптивное, соответственно, будет подходить для отображения на всех устройствах. На маленьких экранах будет реализован эффект выезда сбоку при нажатии на иконку раскрытия меню. В общем, чего описывать, сейчас сами все сделаем, и увидим.

Для создания меню я немного использовала технологию flexbox. Это совсем необязательно, но очень удобно.
Для тех, кто не знаком с flexbox по этой ссылке находится отличное приложение, в котором можно узнать и попрактиковаться в ее основах.

Html-разметка

Начнем, как обычно, с того, что подготовим наш html-документ. Так как мы будем делать адаптивное меню, нам нужно будет добавить метатег Viewport для того, чтобы страница правильно масштабировалась на устройствах с разной шириной экрана.

Подключаем файл стилей.
Кроме того, для этого меню мне хотелось воспользоваться шрифтом Open Sans, который можно подключить через Google Fonts.

Мы создаем меню с помощью тэга nav.

В меню мы вначале вставили ссылку, которая будет иконкой для открытия нашего меню на мобильных устройствах (class=»menu-icon»). Все необходимые детали мы пропишем ей чуть позже. И остальные ссылки — это пункты меню.
Дальше мы прописываем блок, который будет служить в качестве меню на небольших экранах. Это он будет открываться по щелчку на иконке, и будем называть мы его «боковое меню». На широких экранах его видно не будет.

Как видно, мы вставили ссылку в виде крестика для закрытия этого бокового меню, и продублировали все пункты меню.

Добавляем действий

Теперь пришло время добавить немножечко JavaScript для того, чтобы наше меню спокойно открывалось и закрывалось.
Фокус будет состоять в том, что вначале боковое меню будет иметь ширину, равную 0, поэтому его видно не будет. А по щелчку на иконке меню оно будет становиться шириной 250px, т.е. будет видно во всей своей красе.
Поэтому, ссылке, которая будет иконкой, мы добавим событие — при нажатии вызвать функцию showSideMenu, а ссылке, которая будет закрывающим крестиком — при нажатии вызвать функцию hideSideMenu.

А сами эти функции пропишем в скрипте. Мы не будем выносить его в отдельный файл, а укажем прямо здесь, внизу, перед закрывающим тэгом body.

Все очень просто. Для открытия бокового меню, мы изменяем его ширину с 0 (изначальное значение) на 250px, а для закрытия — ровно наоборот.

Оформляем стили в CSS

С html мы покончили. Еще ничего не работает как надо, потому что необходимо прописать стили в CSS. Сделаем это.
Для начала оформляем основное меню.

.top-nav {
background: #F08080;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

Мы задаем ему цвет и размер. Кроме того, мы назначаем ему свойство display: flex для того, чтобы мы могли выравнивать в нем элементы с помощью модели flex. Свойство justify-content отвечает за то, как будут выровнены элементы в контейнере по горизонтали. Оно у нас принимает значение center, что значит, что мы выравниваем эти элементы по центру. Свойство align-items выравнивает элементы по вертикали, и ему мы тоже задаем значение center, чтобы они были выровнены по центру вертикально. И свойство overflow: hidden мы задаем для того, чтобы спрятать все ненужные выступы элементов за пределы меню, если они вдруг появятся.
Теперь займемся иконкой меню. Ее можно отобразить различными способами — через Font Awesome, нарисовать div-ами, нарисовать в svg. Но я решила просто вставить изображение в формате png. Вот оно.

.top-nav .menu-icon {
display: none;
width: 36px;
height: 24px;
padding: 0;
background: url(‘img/m-menu.png’) center;
}

Мы задаем иконке ширину и высоту, чтобы она корректно отображалась, и прописываем путь до изображения. А самое главное, прописываем display: none для того, чтобы оно не показывалось до поры до времени.
Некоторые свойства у нас будут общие для пунктов основного меню и выплывающего — шрифты, размеры, и пр. Укажем их вместе.

.top-nav a, .side-nav a {
display: block;
font-family: ‘Open Sans’, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
}

Потом пропишем поля и цвет для пунктов основного меню.

.top-nav a {
color: #fff;
padding: 12px 18px;
}

При наведении на пункты основного меню, они у нас будут подсвечиваться. Чтобы это происходило плавно, укажем свойство transition.

.nav-item:hover {
background-color: #E2C7C7;
transition: .3s;
}

Теперь переходим к основному меню.

.side-nav {
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background: #FFFFFF;
width: 0;
overflow-x: hidden;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.5s;
}

Задаем ему высоту в 100%, чтобы оно было во всю высоту экрана. position: fixed отвечает за то, чтобы оно всегда было на своем месте, а именно в верхнем левом углу экрана (top: 0; left: 0;). z-index указываем для того, чтобы оно всегда было поверх всего остального. Добавляем фоновый цвет и тень. Делаем изначальную ширину 0, как и договаривались. overflow-x: hidden; указываем для того, чтобы содержимое нашего меню не вылазило, и не отображалось, когда у нас ширина равна 0. transition: 0.5s здесь для того, чтобы оно плавно выезжало и убиралось обратно.
Добавляем цвета и подсветки при наведении пунктам меню.

.side-nav a {
color: #F08080;
padding: 20px;
}
.side-nav a:hover {
color: #CE3A3A;
transition: .3s;
}

Оформляем крестик для закрытия.

.side-nav .close {
font-size: 40px;
padding: 0 10px 0 0;
text-align: right;
}

Добавляем еще немного адаптивности

Теперь нужно немного поколдовать над адаптивностью при изменении размеров экрана с помощью медиа-запросов.

@media screen and (max-width: 768px) {
.top-nav {
justify-content: flex-start;
}
.top-nav .menu-icon {
display: block;
margin-left: 15px;
}
.top-nav .nav-item {
display: none;
}
}

Эта запись означает, что если ширина нашего экрана будет меньше 768px, мы кое-что должны поменять. Мы открываем нашу спрятанную до поры иконку, а все остальные пункты меню, наоборот, прячем. И, поскольку я не хочу, чтобы иконка была посередине меню (а изначально мы, если помните, все в меню выравнивали по центру), то указываю justify-content: flex-start для того, чтобы она была у нас слева.
И самый последний момент: когда у нас открыто боковое меню, то при расширении экрана оно не убирается, хотя должно. Исправим это.

@media screen and (min-width: 768px) {
#side-menu {
    display: none;
    }
}

Теперь самый при ширине экрана 768px минимум (т.е. на экранах больше 768px), это меню вообще не будет присутствовать display:none.
Готово! 🙂 Как обычно, файлы с кодом можете скачать по ссылке.

Responsive Menu — Create Mobile-Friendly Menu — WordPress plugin

Описание

Описание:

Полностью настраиваемый плагин адаптивного меню для WordPress. С более чем 150 настраиваемыми опциями вы получите комбинацию из 22 500 опций! Никакого опыта программирования или знаний не требуется, благодаря простому в использовании интерфейсу, вы можете добиться того, чтобы он выглядел именно так, как вы хотите, с минимальными усилиями.

Посмотреть в действии:

https: // отзывчивый.меню
https://demo.responsive.menu

Требования:

PHP 5.5+

Полная база знаний и специальный форум поддержки:

https://responsive.menu/knowledgebase/
https://responsive.menu/forums/forum/pro-support/

Полностью протестирован:

100% покрытие модульных тестов с тестами, включенными в плагин, так что вы можете запускать их самостоятельно для спокойствия

Базовая функциональность:

• Изменить каждый текст, цвет фона и границы
• Установите шрифты, размеры шрифтов и выравнивание текста, которые вы хотите использовать.
• Укажите, с какой стороны и где должна отображаться кнопка.
• Установите, с какой стороны будет отображаться меню (слева, справа, сверху или снизу).
• Использовать фоновое изображение для меню
• Выбор анимации меню (сдвигайте вверх или нажимайте содержимое)
• Выбор меню для использования
• Выбор размера экрана, при котором будет отображаться меню
• Выбор элементов CSS, которые нужно скрыть при отображении меню
• Выбор глубины подменю для отображения до
• Выбор типов и скорости анимации для меню и кнопок
• Встроенный поиск (полностью настраиваемый)
• Возможность отключения и повторного заказа различных компонентов
• Возможность закрепить кнопку вверху или позволить ей прокручиваться вместе со страницей
• Возможность загрузки логотипов, изображений под стрелок и т. Д.
• Возможность включения сценариев извне, в миниатюре и в нижнем колонтитуле
• Возможность импорта и экспорта параметров одним нажатием кнопки
• Возможность добавления пользовательских компонентов HTML
• Возможность выбора пользовательских триггеров меню
• Поддержка WPML / Polylang
• Поддержка RTL
• Плюс многое, многое другое!

Расширенные и профессиональные функции:

• Предварительный просмотр изменений перед внедрением
• Анимировать элементы меню при открытии меню
• FontIcon Поддержка отдельных пунктов меню
• 15 эффектов анимации кнопок
• Непрозрачность для всех цветов
• Пользовательский цвет и непрозрачность наложения
• Встроенная жатка
• Разрешить плагину предоставить и стилизовать ваше главное меню, а также гамбургер-меню

Чтобы узнать больше о причинах перехода на Pro, посетите эту страницу или ознакомьтесь с нашей дорожной картой

Установка

1. Загрузите response-menu в каталог / wp-content / plugins /
2. Активируйте плагин через меню Плагины в WordPress
3. Задайте параметры в админке отзывчивого меню

Альтернативно:

1. Войдите в админку WordPress
2. Поиск Адаптивное меню
3. Нажмите, чтобы установить Адаптивное меню
4. Активируйте через меню Плагины в WordPress или при запросе во время установки
5. Задайте параметры в админке отзывчивого меню

Авторы и разработчики

«Адаптивное меню — создание удобного для мобильных устройств меню» — программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

8 способов добавить адаптивное меню навигации на ваш сайт

Существует множество методов для реализации адаптивных меню навигации на вашем сайте.

Один из вариантов: Создайте свое меню с нуля. В Интернете есть множество руководств по этому поводу, если вам нужно узнать, как это сделать.

Но некоторые из нас могут просто быть заинтересованы в том, чтобы задача была выполнена как можно быстрее и безболезненно. В этом случае вы можете использовать открытый исходный код.

В этом посте я расскажу о нескольких отличных проектах с открытым исходным кодом для создания адаптивных меню навигации.

Есть много вариантов, поэтому для удобства я сузил их до 8.

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

1. Адаптивная навигация

Эта адаптивная система меню навигации имеет небольшой вес — менее 1 КБ при оптимизации.Отзывчивый Nav не имеет внешних зависимостей, а это означает, что вам не нужно включать библиотеку JS, такую ​​как jQuery, чтобы она работала.

2. Bootstrap Navs и Navbar

Bootstrap имеет два компонента для создания адаптивных меню. Они называются Navs и Navbar. Если вам просто нужно адаптивное меню, вы должны настроить свою сборку Bootstrap, чтобы она включала только файлы, связанные с Navs и / или Navbar.

3. Меню-цель

Этот плагин jQuery позволит вам создавать гибкие выпадающие меню по образцу Amazon.com быстрые и отзывчивые меню. Это отлично подходит для сайтов с большим количеством контента. О том, как появился этот плагин, читайте в этом сообщении в блоге.

4. Сидр

Sidr — это плагин jQuery для создания тех вертикальных выдвижных меню, которые вы часто видите на адаптивных веб-сайтах и ​​мобильных приложениях, таких как Facebook.

5. FlexNav

FlexNav была создана с использованием подхода «прежде всего мобильные». Имеет хорошую поддержку браузером: например, поддерживается IE7. FlexNav зависит от jQuery.

6. TinyNav.js

Если вы просто хотите быстро изменить неупорядоченные / упорядоченные списки HTML на раскрывающиеся меню HTML при просмотре на мобильных устройствах, ознакомьтесь с первой версией отзывчивой навигации (обсужденной выше) под названием TinyNav.js.

Существует также независимый от jQuery форк TinyNav.js под названием SelectNav.js.

7. Настойчивый

Pushy позволяет создавать гибкие и удобные для мобильных устройств выдвижные меню. Для поддержки старых браузеров, например от IE7 до IE9, необходимы jQuery и Modernizr.

8. SlickNav

SlickNav — надежная адаптивная система навигации по меню с множеством опций. Он подходит для сайтов и приложений со множеством ссылок и подкатегорий. Философия разработки также делает упор на веб-доступность: SlickNav совместим с ARIA.

Сводная таблица

Более отзывчивые меню навигации

Связанное содержимое

Лучший способ сделать веб-сайт адаптивным — 3 метода

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

Так как же сделать ваши веб-сайты удобными для мобильных устройств? Что ж, честно говоря, нет единого метода, который можно было бы назвать лучшим. Адаптивный веб-дизайн — это сочетание разных техник и методов.

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

Перейти к любому из 3 способов напрямую
# 1 Создайте адаптивный дизайн веб-сайта, написав код
# 2 Используйте адаптивную тему WordPress
# 3 Сделайте меню навигации WordPress адаптивным

# 1 Создайте адаптивный дизайн веб-сайта, написав код

Отзывчивый дизайн адаптируется к доступной ширине области просмотра и, соответственно, переупорядочивает элементы для обеспечения оптимального просмотра.

Адаптивный веб-дизайн был встроен в HTML5 и CSS3. Оптимизация для мобильных устройств по-прежнему является проблемой для многих компаний. Чтобы сделать текущий веб-сайт удобным для мобильных устройств, вы можете легко адаптировать макет, используя методы, описанные ниже.

• Первый шаг — добавить отзывчивые метатеги. Это новое дополнение к языку разметки HTML5, которое позволяет вашему веб-сайту распознавать устройства.
• Добавив некоторые правила CSS для медиа-запросов в заголовок документа, вы можете адаптировать не только свой макет, но и его элементы (типографику, изображения, встроенные видео) для различных устройств.

Изменение макета

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

Примечание. Не добавляйте коды непосредственно на действующий веб-сайт. Рекомендуется сделать резервную копию вашего веб-сайта и протестировать новые коды в контролируемой среде локально.

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

Вставьте этот код в файл .css . Первый блок кода имеет максимальную ширину 1060 пикселей, оптимизированную для горизонтального отображения на планшете. #Primary content занимает 67% ширины контейнера, а #secondary — 30% с 3% левого поля.

Прочтите: Как добавить меню в WordPress? 3 полезных метода, которые вы должны знать!

Второй блок кода предназначен для планшетов и устройств меньшего размера, где #primary и #seconday имеют ширину 100%.

  / * Медиа-запросы: альбомная ориентация планшета * /
@media screen и (max-width: 1060 пикселей) {
    #primary {width: 67%; }
    #secondary {ширина: 30%; маржа слева: 3%;}
}

/ * Медиа-запросы: табличный портрет * /
@media screen и (max-width: 768 пикселей) {
    #primary {ширина: 100%; }
    #secondary {ширина: 100%; маржа: 0; граница: нет; }
}  

Регулировка носителей

Чтобы веб-сайт назывался адаптивным, необходимо также оптимизировать такие носители, как изображения, видео и т. Д.

Используя приведенный ниже код, ваши изображения не будут превышать размер родительского контейнера. Добавьте код в свой файл CSS.

  img {max-width: 100%; высота: авто; }  

Чтобы узнать больше об оптимизации мультимедиа, обязательно ознакомьтесь с этой техникой.

Лучшая типографика

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

С введенными модулями CSS3, такими как rems и ems, rem относятся к элементу HTML, и вам необходимо сбросить размер шрифта HTML. Используйте приведенный ниже код

  html {размер шрифта: 100%; }  

, когда закончите, определите размеры адаптивного шрифта, как показано ниже:

  @media (min-width: 640px) {body {font-size: 1rem;}}
@media (минимальная ширина: 960 пикселей) {body {font-size: 1.2rem;}}
@media (min-width: 1100px) {body {font-size: 1.5rem;}}  

# 2 Используйте адаптивную тему WordPress

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

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

Что, если бы вы сами могли улучшать свой веб-сайт, не пачкая руки и не возясь с кодом, но как вы собираетесь сделать свой веб-сайт адаптивным, если он уже существует и имеет приличное количество постоянных посетителей?

Прочтите: 9 быстрых и простых взломов безопасности WordPress, которые вам нужно реализовать сегодня

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

Для этой цели мы будем использовать Oshine — Creative WordPress Theme.

Oshine — это наш выбор, потому что он имеет высококачественный дизайн и поставляется с мощным конструктором страниц с перетаскиванием для создания адаптивных веб-страниц. Кроме того, тема доступна по единовременной лицензии в размере 59 долларов США и с гарантированными будущими обновлениями, поэтому ее стоит иметь.

Тема предлагает более 52 готовых демонстраций в различных популярных нишах, которые можно импортировать на ваш сайт одним щелчком мыши.Ознакомьтесь со всеми функциями этой удивительной темы WordPress.

Один из самых простых способов решить проблему с неотзывчивым сайтом — это заменить не отвечающее меню веб-сайта мобильным адаптивным гамбургер-меню.

Используя бесплатный плагин WordPress Responsive Menu, вы можете создать потрясающе красивое навигационное меню WordPress за несколько минут. Да, это правда, вот как легко создать новое адаптивное меню с помощью бесплатного плагина меню.

Установите подключаемый модуль адаптивного меню

Итак, чтобы быстро создать его для вашего сайта.Загрузите плагин адаптивного меню из WordPress, установите его на свой веб-сайт WordPress и активируйте.

Создать новое меню

Перейдите к адаптивному меню и нажмите кнопку «Создать новое меню». Теперь вам будет предложено выбрать тему для вашего нового меню навигации, вы даже можете приобрести премиум-тему.

Прочтите: Как создать форму в WordPress и связать с PayPal или Stripe?

Для продолжения выберите любую из тем.Далее идут настройки меню, здесь вам нужно ввести несколько деталей, которые создадут для вас базовое меню, и вы сможете позже настроить его с помощью цветов и стиля.

• Назовите свое меню — дайте своему меню имя
• Ссылка на меню WordPress — выберите существующее меню WordPress для отображения
• Скрыть меню темы — войдите в селектор CSS исходного меню темы, чтобы скрыть
• Видимость устройства — Выберите между мобильным, Планшетное и настольное устройство для настройки видимости меню.
• Условия отображения — Выберите, на каких страницах отображать меню.

Нажмите «Создать меню», и сразу же будет создано адаптивное меню гамбургеров с заданными настройками.

Настройка мобильного меню

есть множество параметров настройки, с помощью которых вы можете создать классное меню, удобное для мобильных устройств. Самый первый вариант — это настройка мобильного меню.

Используя параметр «Настройка мобильного меню», вы можете настроить цвет фона контейнера меню, добавить заголовок, вставить дополнительный контент, добавить фоновое изображение и многое другое.

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

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

Вы также можете купить версию Responsive Menu Pro, чтобы раскрыть истинный потенциал плагина в создании рабочего стола и мегаменю.

Responsive Menu Pro также разблокирует все функции плагина, такие как доступ к более чем 600 значкам шрифтов, создание строки заголовка, сочетания клавиш и управление жестами, многоязычная поддержка и т. Д.

Заключение

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

Адаптивный веб-дизайн полностью изменил способ создания веб-сайтов. Методы, лежащие в основе адаптивного веб-дизайна, теперь широко известны, и многие из нас начали реконструировать существующие, широко используемые веб-сайты.

Надеюсь, вам понравилась эта статья. Вот краткое изложение методов, которые мы обсуждали ранее в этой статье:

• Создание адаптивного дизайна веб-сайта с помощью кода
• Установка адаптивной темы ’
• Использование бесплатного плагина меню для создания адаптивного меню навигации

Эта статья поможет вам украсить мобильное меню с помощью адаптивных тем меню премиум-класса.

3 шага Простое отзывчивое меню гамбургеров на чистом CSS

Добро пожаловать в руководство о том, как создать простое адаптивное гамбургер-меню на чистом CSS. Да, в Интернете есть множество других гамбургерных меню, но некоторые из них все еще требуют использования Javascript. Итак, вот оно, меню, основанное исключительно на CSS, а не на одной строчке Javascript. Читайте дальше, чтобы узнать, как его построить!

ⓘ Я включил zip-файл со всем исходным кодом в начале этого руководства, так что вам не нужно копировать и вставлять все … Или, если вы просто хотите погрузиться прямо сейчас.

СОДЕРЖАНИЕ

СКАЧАТЬ И ПРИМЕЧАНИЯ

Во-первых, вот ссылка для загрузки кода примера, как и было обещано.

ПРИМЕР КОДА СКАЧАТЬ

Щелкните здесь, чтобы загрузить исходный код, я выпустил его под лицензией MIT, так что не стесняйтесь создавать на его основе или использовать в своем собственном проекте.

БЫСТРЫЕ СООБЩЕНИЯ

Если вы заметили ошибку, пожалуйста, оставьте комментарий ниже.Я тоже стараюсь отвечать на вопросы, но это один человек против всего мира … Если вам срочно нужны ответы, просмотрите мой список веб-сайтов, чтобы получить помощь в программировании.

ГАМБУРГЕР МЕНЮ ДЕМО

Вперед. Измените размер окна и посмотрите, как работает гамбургер-меню.

КАК СОЗДАТЬ ГАМБУРГЕРНОЕ МЕНЮ

В наши дни создать гамбургер-меню с помощью современного CSS не так уж и сложно …

ШАГ 1) HTML

.html

Часть HTML должна быть довольно простой:

1. Сначала мы создаем оболочку для меню навигации
2. Далее следует использование и в качестве кнопки гамбургера. Для новичков: & # 9776; — это HTML-символ «трехстрочного значка гамбургера».
3. Наконец, мы помещаем пункты меню внутрь оболочки
   .

Вот и все, без использования JavaScript.

ШАГ 2) CSS ДЛЯ БОЛЬШИХ ЭКРАНОВ

ветчина-меню.css

  / * [НА БОЛЬШОМ ЭКРАНЕ] * /
/ * (A) ОБЕРТКА * /
#hamnav {
  ширина: 100%;
  фон: # 000;
}

/ * (B) ЭЛЕМЕНТЫ ГОРИЗОНТАЛЬНОГО МЕНЮ * /
#hamitems {display: flex; }
#hamitems a {
  flex-grow: 1;
  гибкая основа: 0;
  отступ: 10 пикселей;
  цвет белый;
  текстовое оформление: нет;
  выравнивание текста: центр;
}
#hamitems a: hover {background: # 401408; }

/ * (C) СКРЫТЬ ГАМБУРГЕР * /
#hamnav label, #hamburger {display: none; }
  

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

1. Полноразмерное меню навигации, которое не требует пояснений.
2. Затем мы устанавливаем #hamitems на display: flex . Добавление flex-grow: 1 и flex-base: 0 к пунктам меню автоматически распределяет их одинаково.
3. Поскольку нам не нужен значок гамбургера на большом экране, мы скрываем его, прикрепляя display: none к #hamnav label и #hamburger .

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

ШАГ 3) АКТИВНЫЙ CSS ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ

ham-menu.css

  / * [НА МАЛЕНЬКИХ ЭКРАНАХ] * /
@media screen и (max-width: 768px) {
  / * (A) ПЕРЕРЫВ В ВЕРТИКАЛЬНОЕ МЕНЮ * /
  #hamitems a {
    размер коробки: рамка-рамка;
    дисплей: блок;
    ширина: 100%;
    граница-верх: сплошной цвет 1px # 333;
  }
  / * (B) ПОКАЗАТЬ ЗНАЧОК ГАМБУРГЕРА * /
  #hamnav label {
    дисплей: встроенный блок;
    цвет белый;
    фон: # a02620;
    стиль шрифта: нормальный;
    размер шрифта: 1.2em;
    отступ: 10 пикселей;
  }

  / * (C) ПЕРЕКЛЮЧИТЬ ПОКАЗАТЬ / СКРЫТЬ МЕНЮ * /
  #hamitems {display: none; }
  #hamnav input: проверено ~ #hamitems {display: block; }
}  

Наконец, мы добавляем некоторые изменения стиля на маленьком экране, чтобы творить магию реагирования:

1. Преобразуйте горизонтальное меню в вертикальное, добавив #hamitems a {width: 100%}
2. Показать значок гамбургера с #hamnav label {display: inline-block} .
   • Обратите внимание — мы показываем только ярлык для гамбургера , флажок остается скрытым.
   • Флажок по-прежнему будет работать, когда пользователь нажимает на ярлык .
3. Немного сбивает с толку, но именно здесь происходит волшебство.
   • По умолчанию #hamitems {display: none; } скроет пункты меню.
   • #hamnav input: проверено ~ #hamitems {display: block; } на простом английском - отображать пункты меню, когда установлен скрытый флажок .

КЛЕЙКАЯ ПАНЕЛЬ МЕНЮ

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

theme.css

  #hamnav {
  положение: липкое;
  верх: 0;
}  

Но это, вероятно, вызовет больше проблем на маленьком экране, поэтому используйте его с умом.

ГАМБУРГЕР БОЛЬШЕ?

Значок гамбургера - это символ HTML. Да, изменить размер так же просто, как установить label [for = "hamburger"] {font-size: XX em} .

РУКОВОДСТВО ПО YOUTUBE

ИНФОГРАФИЧЕСКИЙ ЛИСТ

  

  

    

       
 Свернутое содержимое 
 
       Можно переключать с помощью бренда на панели навигации. 
    
  
  
  

 

















  





<заголовок>

 





<раздел>



 
 Отвечайте на свое окружение 
 

 ... Текст-заполнитель 

 ... Текст-заполнитель 

 Текст-заполнитель 

 

 

 / * СБРОС * /
html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, набор полей, форма, метка, легенда, таблица, заголовок, tbody, tfoot, thead, tr, th, td {margin: 0; отступ: 0; граница: 0; наброски: 0; размер шрифта: 100%; вертикальное выравнивание: базовая линия; background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote: before, blockquote: after, q: before, q: after { content: ''; content: none;}: focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0;}

/*ГЛАВНЫЙ*/
тело {
размер шрифта: 1.05em;
высота строки: 1,25em;
семейство шрифтов: Helvetica Neue, Helvetica, Arial;
фон: # f9f9f9;
цвет: # 555;
}

a {

цвет: # 4C9CF1;
текстовое оформление: нет;
font-weight: жирный;

}

a: hover {

цвет: # 444;

}

img {

ширина: 100%;

}

header {

фон: #fff;
ширина: 100%;
высота: 76 пикселей;
положение: фиксированное;
верх: 0;
слева: 0;
нижняя граница: твердое тело 4px # 4C9CF1;
z-индекс: 100;

}

#logo {

маржа: 20 пикселей;
плыть налево;
ширина: 200 пикселей;
высота: 40 пикселей;
фон: url (../img/logo.png) центр без повтора;
дисплей: блок;

}

nav {

float: right;
отступ: 20 пикселей;

}

# menu-icon {

отображение: скрыто;
ширина: 40 пикселей;
высота: 40 пикселей;
фон: # 4C8FEC url (../ img / menu-icon.png) center;

}

a: hover # menu-icon {

цвет фона: # 444;
радиус границы: 4px 4px 0 0;

}

ul {

стиль списка: нет;

}

li {

дисплей: встроенный блок;
плыть налево;
отступ: 10 пикселей

}

.Текущий {

цвет: # 2262AD;

}

раздел {

маржа: 80 пикселей автоматически 40 пикселей;
максимальная ширина: 980 пикселей;
положение: относительное;
отступ: 20 пикселей

}

h2 {

размер шрифта: 2em;
цвет: # 2262AD;
высота строки: 1.15em;
маржа: 20px 0;

}

п {

высота строки: 1,45 м;
нижнее поле: 20 пикселей;

} 

 / * МЕДИА-ЗАПРОС * /
@media only screen и (max-width: 640px) {

header {

позиция: абсолютная;

}

# menu-icon {

дисплей: встроенный блок;

}

nav ul, nav: active ul {

дисплей: нет;
позиция: абсолютная;
отступ: 20 пикселей;
фон: #fff;
граница: 5px solid # 444;
вправо: 20 пикселей;
верх: 60 пикселей;
ширина: 50%;
радиус границы: 4px 0 4px 4px;

}

nav li {

выравнивание текста: центр;
ширина: 100%;
отступ: 10 пикселей 0;
маржа: 0;

}

nav: hover ul {

дисплей: блок;

}