Разработка

Делаем красивое мобильное меню на сайте на OpenCart 2.3

Краткое руководство

Сделать нормальное красивое мобильное меню для сайта на базе OpenCart 2.3 не так уж и сложно

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

1. Я использую для создания мобильного меню скрипт Mmenu.js. Сайт разработчика скрипта, с которого его можно скачать и посомтреть документацию

2. Открываем в кодовом редакторе файлы catalog/view/theme/[ваша тема]/common/header.tpl и catalog/view/theme/[ваша тема]/common/footer.tpl.

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


<a id="button-mobile-menu" href="#mobile-menu" class="col-xs-12"><div style="float:left" class="col-xs-6">Меню</div><div style="float:left;padding-top: 5px;" class="col-xs-6"><span></span><span></span><span></span></div></a>

далее вставляем код мобильного меню, его создаем из существующего, только оборачиваем в div или nav с нужным нам id:

<nav id="mobile-menu">
<ul class="nav navbar-nav">
   <?php foreach ($categories as $category) { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
    <?php } ?>
</ul>
</nav>

Скрываем кнопку вызова мобильного меню для ширины окна браузера более 767px:

@media (min-width: 767px) {
#button-mobile-menu {display: none;}
}

ну и надо стилизовать саму кнопку, например так:
#button-mobile-menu span {background: #89B1D9;display: block;height: 2px;margin: 1px auto;width: 50%;text-align: center;}

3. Копируем скрипт мобильного меню в папку catalog/view/javascript/ и стили мобильного меню в папку со стилями вашей темы.

Активируем наше мобильное меню склиптом:


<script type="text/javascript">
      $(function() {
        $('nav#mobile-menu').mmenu();
      });
</script>

И наконец, подключаем стили мобильного меню в шапку сайта в перделах тега head и скрипт в подвал сайта в footer.tpl перед тегом body.

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

Итак, мы сделали красивое мобильное меню для сайта на базе opencart 2.3.

Посмотреть пример работы мобильного меню можно на сайте


Поделиться

А теперь поговорим о вашем проекте!