Не требуется знаний в области программирования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WP Sticky Menu

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

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

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

Автор: Крис Расикот

Крис является менеджером службы поддержки GreenGeeks и работает в компании с 2010 года.Он страстно увлекается играми, написанием сценариев и WordPress. Когда он не спит, он тренирует свои навыки игры на гитаре и возится с 3D-печатью.

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

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

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

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

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

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

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

1.Адаптивный Nav

Эта адаптивная система меню навигации имеет небольшой вес — менее 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.

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

Более гибкие меню навигации

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

Исправление вашего адаптивного навигационного меню в Divi

Создание адаптивного навигационного меню, которое отлично выглядело бы на экранах любого размера, может быть трудным.Хотелось бы, чтобы это было не так важно, но поскольку навигация обычно находится в верхней части каждой страницы вашего сайта, это то, что отображается в первую очередь на каждой странице. Поэтому важно сделать это правильно. К счастью, настройщик тем Divi позволяет настраивать главное меню с помощью некоторых довольно интересных параметров заголовка. Но для стиля меню по умолчанию с логотипом слева и ссылками меню справа все может легко перетасоваться на экранах меньшего размера, особенно когда у вас слишком много ссылок, заполняющих заголовок.Я знаю, что со мной такое случается часто. Я получаю меню, которое идеально подходит для рабочего стола, а затем вы проверяете его на планшете (особенно iPad Pro), и логотип перекрывает меню, а некоторые ссылки переходят на одну строку вниз.

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

Приступим.

Исправление вашего отзывчивого меню навигации в Divi

Подпишитесь на наш канал Youtube

Четыре решения для переполненного меню навигации

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

Проблема

Наиболее частая проблема, с которой я сталкиваюсь при использовании меню навигации по умолчанию Divi, — это когда клиенту нужно много пунктов меню верхнего уровня. Наличие более 5 пунктов меню (или наличие пунктов меню с большим размером шрифта) в главном меню навигации часто приводит к разрыву строки и увеличению логотипа, когда размер экрана достигает ширины между 980-1100 пикселей (размер небольших ноутбуков и большие планшеты). Я уверен, что у вас уже была эта проблема, даже если вы никогда этого не замечали.Выглядит это примерно так:

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

Решение №1: Сделайте панель меню полной шириной

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

Перейдите в «Настройка темы »> «Заголовок и навигация»> «Основная строка меню » и выберите « Сделать полной шириной ».

Решение №2: Настройте логотип и шрифт.

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

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

Решение №3: Отображение мобильного меню в новой точке останова.

Вот общие диапазоны для каждой точки останова в Divi:

Большой рабочий стол: 1405 пикселей и выше
Стандартный рабочий стол: от 1100 до 1405 пикселей
Ноутбуки и большие планшеты: от 980 до 1100 пикселей
Планшеты: от 768 до 980 пикселей
Смартфоны и маленькие планшеты: от 320 до 768 пикселей;
Смартфоны: от 320 до 480 пикселей;

Точка останова, в которой меню навигации по умолчанию превращается в мобильное меню (с навигацией гамбургера), составляет 980 пикселей.На любом экране размером менее 980 пикселей будет отображаться мобильное меню.

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

Перейдите в Theme Customizer > Additional CSS и введите следующее:

@media (max-width: 1024 пикселя) {
 #et_mobile_nav_menu {
 дисплей: блок;
 }

#верхнее меню {
 дисплей: нет;
 }
 }

 

Этот медиа-запрос выполняет две функции.Он скрывает обычное меню и отображает мобильное меню с точкой останова 1024 пикселей.

Решение №4: Настройка стиля меню в определенной точке останова

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

Вот CSS по умолчанию Divi для ваших пунктов меню:

 # top-menu li {
    дисплей: встроенный блок;
    padding-right: 22px;
    размер шрифта: 14 пикселей;
}
 

Допустим, вы хотите, чтобы размер шрифта вашего меню был 18 пикселей по умолчанию, но вы хотите, чтобы он изменился на 14 пикселей в определенной точке останова.А чтобы сэкономить еще больше места, вы можете уменьшить отступ до 15 пикселей вместо 22 пикселей. Вы можете сделать это, выбрав класс css для всех пунктов меню и создав медиа-запрос

Перейдите в «Настройка темы »> «Дополнительный CSS » и введите следующее:

@media (max-width: 1200 пикселей) {
 # top-menu li, # top-menu li a {
 размер шрифта: 14 пикселей;
 отступ справа: 15 пикселей;
 }
 }

 

Этот CSS изменяет размер шрифта на 14 пикселей и правый отступ на 15 пикселей на любом экране размером 1200 пикселей или меньше.Это создает плавный переход при настройке размера экрана на рабочем столе и позволяет сохранить навигацию по умолчанию на больших планшетах и ​​маленьких ноутбуках.

Настройка других стилей заголовков

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

Стили для вставки и полноэкранного режима

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

Стиль по центру

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

Центрированный встроенный логотип, стиль

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

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

Обратите внимание на то, что логотип немного смещен по центру в меню по сравнению с центрированным логотипом в разделе заголовка.

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

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

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

На панели инструментов WordPress перейдите в Внешний вид> Меню и убедитесь, что у вас отмечены CSS-классы в области «Параметры экрана».

Затем выберите пункт меню, на который вы хотите настроить таргетинг. Затем введите класс CSS в поле ввода «Классы CSS». Я называю свое «подталкивание».

После этого перейдите в Divi> Theme Customizer> Additional CSS и добавьте следующий настраиваемый CSS:

 # top-menu li.nudge {
отступ справа: 32 пикселя;
}
 

В этом CSS только элемент с классом nudge получает правый отступ 32px; Это подталкивает логотип настолько, чтобы он располагался по центру.

Вот и все!

Заключительные мысли

Divi делает создание веб-сайтов увлекательным и простым. Но иногда требования работы (и наших клиентов) требуют, чтобы мы приложили все усилия, чтобы убедиться, что наши сайты великолепны. И то, что отличает хорошие сайты от хороших, — это мелкие детали. То, как работает ваше адаптивное навигационное меню, — одна из тех важных деталей, которые вы хотите уточнить. В большинстве случаев это первое, что ваши пользователи увидят и с чем будут взаимодействовать на каждой странице вашего сайта.Неудачно выглядящее меню может оставить плохое первое впечатление. Я надеюсь, что этот пост поможет «подтолкнуть» вас в правильном направлении (извините, ничего не смог с собой поделать :)).

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

Ура!

Создание абсолютного базового мобильного адаптивного навигационного меню CSS

В этом руководстве мы рассмотрим процесс кодирования очень простого адаптивного навигационного меню CSS.Мы преобразуем базовую навигацию без списков в раскрывающееся меню, используя медиа-запросы в нашей таблице стилей. В этом руководстве нет необходимости в JavaScript. Мы рассмотрим сборку в следующем порядке: HTML> CSS> Media Queries.

HTML-код

Что касается HTML, мы будем использовать тип документа HTML5, поскольку мы будем использовать теги HTML5. Также мы хотим убедиться, что у нас есть теги порта просмотра. Вот как будет выглядеть код:

 

















  





<заголовок>

 





<раздел>



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

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

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

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





 

Код CSS

Для CSS я собираюсь выполнить сжатый сброс вверху. Ниже мы настроим заголовок так, чтобы он был зафиксирован вверху. Логотип внутри заголовка будет плавать: влево, а навигация — вправо.Остальное — это базовые стили контента для примера.

 / * СБРОС * /
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 пикселей;

} 

Добавление наших медиа-запросов

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

 / * МЕДИА-ЗАПРОС * /
@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 {

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

} 

Заключение

Этот пример очень простой и позволяет понять процесс создания адаптивной навигации.Если вы хотите иметь более надежное меню навигации, вы можете пойти другим путем. То, что вы можете делать с помощью CSS Media Queries, поистине удивительно. Поиграйте с кодом и посмотрите, что вы можете придумать.

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

Как создать адаптивное навигационное меню гамбургера — ReactJS и стилизованные компоненты | автор: Awa Dieudonne

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

В этой статье я проведу вас через создание адаптивного меню навигации гамбургера с нуля, используя Reactjs и Styled-Components .Чтобы сделать это, нужно обработать несколько вещей.

Приложение Setup React

В терминале запустите следующие сценарии. Затем откройте http: // localhost: 3000, чтобы увидеть ваше приложение.

 npx create-react-app responseive-nabar 
 cd response-nabar 
 npm start 

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

 npm install styled-components 

Перейдите в корневой каталог и удалите ненужные нам файлы приложения create response.Ваша структура каталогов должна выглядеть точно так же, как это

Откройте свой index.html и добавьте следующий код непосредственно под тегом