Адаптивное меню для сайта. Адаптивное меню в Opencart

Для сайта заказчика — требовалось сделать адаптивное меню. Интернет-магазин создан студией дизайна «Движок» на CMS Opencart. Меню делаем выпадающее при расширении экрана меньше 800px. Все делаем через css стиль. Без скриптов.

Адаптивное меню для сайта

Css стиль меню:

<style>
nav a, nav:before, nav div:before {
display: inline-block;
padding: 10px 0;
color: #fff;
text-align: center;
cursor: pointer; /* курсор в виде руки*/
background: rgb(6,55,82); /* цвет фона кнопки "меню" */
}
nav a {
width: 25%; /* 4 пункта меню, то есть 100%/4 */
background: rgb(46,95,122); /* фон пунктов меню */
text-decoration: none;
}
nav a:hover {
background: rgb(96,145,172); /* фон пунктов при наведении */
}
@media (max-width: 800px) { /* для экранов, меньше 800px, см про адаптивную вёрстку */
nav a, nav:before, nav div:before {
width: 100%; /* пункты меню растягиваются на всю ширину блока */
}
nav:before {
content: "меню";
}
nav:focus:before {
content: none;
}
nav:focus div:before {
content: "свернуть меню";
}
nav:not(:focus) div:not(:active) { /* магия кнопки "меню", благодаря чему навигация скрывается/появляется по щелчку */
display: none;
}
}
</style>

Html код:

<nav tabindex="0">
<div tabindex="0">
<a href="#">Первый пункт</a>
<a href="#">Второй пункт</a>
<a href="#">Третий пункт</a>
<a href="#">Четвёртый пункт</a>
</div>
</nav>

Адаптивное меню внедряем в интернет магазин на Opencart

1) Вносим стиль в css нашего шаблона:

пример пути: /catalog/view/theme/default/stylesheet/stylesheet.css
— внизу добавляем стиль указанный выше. Перед этим «переобразовываем файл в UTF-8 без BOM» — для того, что бы правильно отображался текст «МЕНЮ» сохраняем файл через редактор Notepad++

После чего Сохраняем файл стиля и копируем на хостинг.

2) Открываем файл: /catalog/view/theme/default/template/module/category.tpl
После тега:

<div class="box-category">
Добавляем:
<nav tabindex="0">
<div tabindex="0">

Находим строку закрытие списка:
</ul>
И вписываем:
</div>
</nav>

В итоге у нас получилось:

<div class="box_category">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<div class="box-category">
<nav tabindex="0">
<div tabindex="0">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</nav>
</div>
</div>
</div>

Сохраняем изменения в файле и копируем с заменой файл на хостинг.
Проверяем адаптивность сайта, например сервисом: www.responsinator.com

Все получилось — меню при небольшых экранах становится выпадающее — срабатывающее на кулик по нему:

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