Адаптивный шаблон FastFood для OcStore и OpenCart 1.5.*. Адаптивное меню для opencart


Адаптивный шаблон FastFood для OcStore и OpenCart 1.5.*

Описание:Лёгкий и быстрый шаблон, созданный отлично подходящий для создания магазина по заказу еды на дом, в офис. Так-же отлично подойдёт для кафе и пиццерий, продуктовых магазинов и бутиков.

Плюсы:

Скорость:Для тех, кто заботится о скорости открытия, оптимизации и удобстве пользователя — с данным шаблоном можно без проблем получить от Google отличные оценки!

Даже на демо, без особой оптимизации картинок товара, Google даёт такие оценки:Для компьютеров:

Для мобильных устройств:

Ссылка на PageSpeed — https://developers.g….ru/&tab=mobile

Совместимость:Шаблон тестировался во всех современных браузерах, успешно проходит проверку валидатора кода.Ссылка на валидатор — https://validator.w3…food.oc-dev.ru/

Шаблон тестировался на ocStore c 1.5.4 по 1.5.5.1.2 и Opencart c 1.5.5 по 1.5.6.4 , для полноценной работы требуется vQmod версии не ниже 2.4.1

Начиная с версии шаблона 1.5.6 требуется установленный на сервере Ioncube Loader v4.4+

Как узнать, установлен ли он?Скачайте архив, распакуйте, загрузите к себе на сайт и откройте http://ваш-сайт.ru/s_test.php

Демо:

Главная страница: http://fastfood.oc-dev.ru/Страница категории: http://fastfood.oc-dev.ru/japan/Страницы товара: http://fastfood.oc-d…aly/traditional и htt

vseprosto.top

мобильное меню для Вашего сайта OpenCart (ОпенКарт) и ocStore

Совместимость OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3, MaxyStore 2.1.0.2, MaxyStore 2.3.0.2
Удобное адаптивное мобильное меню для Вашего магазина. Прекрасно сочетается с любым дизайном и значительно упрощает Вашим посетителям взаимодействие с Вашим сайтом.   Возможности:  DEMO: http://gameshara.ru/module/   Инструкция в архиве.   Лицензия:  Тип распространения:
Основное
Способ распространения Платно
Совместимость OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3, MaxyStore 2.1.0.2, MaxyStore 2.3.0.2
VQmod Нет
Ocmod Да
Статистика
В первый раз файл добавлен 17.09.2018
Последнее изменение 17.09.2018
Просмотров 16

Файлы будут доступны после покупки

liveopencart.ru

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

Лого www.SiteHere.ru Адаптивная навигация для меню

Всем привет!

Сегодня хочу поделиться интересным решением для основного меню.Такой подход может стать альтернативой стандартному выпадающему меню.Кроме того оно уже адаптивно.

Смотреть примерСкачать

Похожие статьи на эту тему:

Добавляем HTML

HTML КОД

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <header> <nav> <ul> <li><a href="#0">О нас</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0"><span>Категории</span></a> <ul> <li><a href="#0">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0">Menu<span></span></a> </header>

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

HTML КОД

1 <a href="#0">Menu<span></span></a>

Последняя строка отвечает за навигацию при маленьком разрешении экрана.

Добавляем CSS

Архив с примером содержит файл style.css.В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.

1 <link rel="stylesheet" href="css/style.css">

Добавляем JQuery

Из архива копируем папку js. И подключаем скрипты в наш html документ.

1 2 3 <script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script>

Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!

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

Всем удачи!

Источник: Оригинал

С Уважением, Михалев Валентин

Адаптивная навигация для меню 5.00/5 (100.00%) 8 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Универсальное адаптивное меню для сайта

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

Ранее, я уже публиковал статью, в которой поделился двумя способами создания адаптивного меню. А сегодня рассмотрим ещё один способ.

Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так:

Вид меню на компьютере

Вид меню на компьютере

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

Вид меню на смартфоне

Вид меню на смартфоне

Принцип построения универсального адаптивного меню.

Итак, для того чтобы создать такое меню вам потребуется:

  1. Создать html каркас.
  2. Применить стили css.
  3. Подключить скрипт обработчик.

Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.

На большинстве сайтов, которые сделаны на CMS, проще создать новое меню, чем переделать старое. Так как само построение меню реализовано через php и запросы к базе данных, а стили css разбросаны среди многих других стилей. В общем, весь этот процесс переделки меню довольно трудоёмкое и кропотливое занятие.

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

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

А для того чтобы создать новое адаптивное меню вам потребуется совсем немного времени. Изначально создаётся меню на основе тегов ul и li, затем добавляются стили css и подключается скрипт. Такое меню загружается и отзывается быстрей, так как работает без запросов к базе данных.

Стили css, для удобства, подключаются в отдельных файлах. Хотя их можно включить и в основные стили сайта. Я покажу пример подключения стилей через отдельные файлы.

Процесс создания адаптивного меню.

Шаг 1. Создание html структуры меню.

Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс.

После того как вы определитесь с местом вставки нового меню, необходимо в это место поместить вот этот html каркас и изменить пункты меню и ссылки на свои.

<nav role="navigation"> <div> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span></span> <span></span> <span></span> </button> <a href="https://1zaicev.ru/">Бизнес в Сети</a> </div> <div> <ul> <li> <a href="#"> Главная </a> </li> <li> <a href="#" data-toggle="dropdown"> Рубрики <span></span> </a> <ul role="menu"> <li> <a href="#" target="_self"> Рубрика1 </a> </li> <li> <a href="#" target="_self"> Рубрика2 </a> </li> <li> <a href="#" target="_self"> Рубрика3 </a> </li> </ul> </li> <li> <a href="#"> Автор </a> </li> <li> <a href="#"> Блог </a> </li> <li> <a href="#"> Статьи </a> </li> <li> <a href="#"> Вход </a> </li> <li> <a href="#"> Регистрация </a> </li> </ul> </div> </div> </div> </nav>

Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт. Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код: <span></span>. Если раскрывающихся пунктов меню у вас несколько используйте этот код.

Шаг 2. Подключение стилей css.

Для того чтобы упростить процесс и не путаться с медиазапросами, подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами <head> … </head>. По крайней мере, это так в большинстве современных шаблонах.

Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню.

Подключение стилей css

Подключение стилей css

Но, для начала вы должны скачать файлы со стилями и скриптом здесь. После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php, между тегами ХЕД добавить вот эти строки подключения:

<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.css" /><link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/menu.css" />

Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

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

И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве.

В том же файле header.php, перед закрытием тега </head> вставляете вот эти строки кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.min.js"></script>

Примечание: файл bootstrap.min.js, вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу.

Итак, всё готово, можно проверять результат. Медиазапросы построены на точке 768 px, как только экран браузера станет меньше этой величины, меню адаптируется. Точку медиазапроса вы можете поменять в файлах стилей.

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

На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru


Prostoy-Site | Все права защищены © 2018 | Карта сайта