Как сделать меню адаптивным за 2 шага

Опубликовано: 01.09.2018

видео Как сделать меню адаптивным за 2 шага

Build Industy для DLE адаптивный строительный шаблон

Добрый день. На дворе 2015 год, а понятие адаптивность все плотнее входит в нашу жизнь.



Традиционно начинаю с демо.

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


Настройка меню в теме Divi для Wordpress

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

Шаг 1  Как найти html код меню

Сейчас не важно на каком движке у Вас работает сайт. Откройте свой сайт и откройте инструмент для веб-мастера . Найдите код вида:


Адаптивный дизайн сайта – как адаптировать шаблон WordPress

<ul class="some_name"> <li><a href="http://link.ru">Имя пункта в меню </a></li> </ul>

или

<div class="some_class" id="someID"> <ul class="some_name"> <li><a href="http://link.ru">Имя пункта в меню </a></li> </ul> </div>

или

<div class="some_class" id="someID"> <ul> <li><a href="http://link.ru">Имя пункта в меню </a></li> </ul> </div>

Если не получается найти, пишите ссылку на сайт в комментариях Я помогу.

Нас интересует

<ul> <li><a href="http://link.ru">Имя пункта в меню </a></li> </ul>

Если у Вас последний вариант то необходимо задать класс. Для этого надо

<ul>

заменить на

<ul class="some_class">

И если у Вас предпоследний вариант то:

<ul class="some_name">

заменить на

<ul class="some_name some_class">

Шаг 2. Колдуем и применяем стили

Теперь Важно на каком движке работает Ваш сайт. Я буду пояснять на примере DLE и WordPress, а так же дам универсальную инструкцию для любого движка о том как найти код меню на сайте.

Подключаем стили для DLE.

Вставьте этот код в файл стилей

/*Начало магии. Если ширина видимой области меньше 600px то применить эти стили*/ @media screen and (max-width: 600px) { ul.some_class { position: fixed; min-height: 35px; display:block !important; background: url(../images/menu_ad.png) no-repeat center center; height:35px; margin:0; padding-right:0; cursor:pointer; width:35px; top: 10px; left: 20px; box-shadow: 0 0px 2px rgba(0,0,0,.3); } ul.some_class:hover { width:180px; height:auto; background: #fff; border: solid 1px #949494; } ul.some_class li { display: none; margin: 0; float:none; height:auto; } ul.some_class li a { display: block; padding: 9px; text-decoration: none; text-align: left; color:#6d6d6d; float:none; height:auto; line-height:normal; text-decorection: } ul.some_class:hover li { display: block; } ul.some_class li a:hover { display: block; background:#cecece; } }

Подключаемся к сайту с помощью FTP  и загружаем иконку в папку images в вашем шаблоне.

Даем ей имя menu_ad.png

Подключаем стили для WordPress

Вставляем этот код в самый конец файла стилей

/*Начало магии. Если ширина видимой области меньше 600px то применить эти стили*/ @media screen and (max-width: 600px) { ul.some_class { position: fixed; min-height: 35px; display:block !important; background: url(images/menu_ad.png) no-repeat center center; height:35px; margin:0; padding-right:0; cursor:pointer; width:35px; top: 10px; left: 20px; box-shadow: 0 0px 2px rgba(0,0,0,.3); } ul.some_class:hover { width:180px; height:auto; background: #fff; border: solid 1px #949494; } ul.some_class li { display: none; margin: 0; float:none; height:auto; } ul.some_class li a { display: block; padding: 9px; text-decoration: none; text-align: left; color:#6d6d6d; float:none; height:auto; line-height:normal; text-decorection: } ul.some_class:hover li { display: block; } ul.some_class li a:hover { display: block; background:#cecece; } }

Подключаемся к сайту с помощью FTP  и загружаем иконку в папку images в вашем шаблоне.

 

Даем ей имя menu_ad.png

С ув. Михаил

rss