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

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

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

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

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

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

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

<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

Даем ей имя 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

 

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

С ув. Михаил

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$