Перейти к содержанию

Рекомендуемые сообщения

Помогите пожалуйста настроить адаптивное меню, используя bootstrap.

 

У меня почти все получилось: При сужении экрана, меню прячется, появляется кнопка, которая разворачивает все пункты.

 

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

 

Вот пример: http://eleonora72.ru/demo/upload

 

С главной страницы ни один пункт меню не разворачивается. Если перейти на страницу "Компьютеры", то разворачивается пункт "Компьютеры", если войти на с траницу "Ноутбуки", то с нее можно развернуть только пункт "Ноутбуки", а компютеры уже не развернешь.

 

Помогитре пожалуйста донастроить адаптивное меню Bootstrap.

 

Вот код, который сейчас получился:

<?php if ($categories) { ?>
<div class="container">
    <div class="navbar navbar-default" id="menu" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
                data-toggle="collapse" type="button">
                <span class="sr-only">Развернуть меню</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <?php foreach ($categories as $category) { ?>
                <li class="dropdown"><?php if ($category['active']) { ?>
                    <a class="dropdown-toggle" data-toggle="dropdown"
                        href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?>
                        <b class="caret"></b>
                    </a>
                    <?php } else { ?>
                    <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
                    <?php } ?>

                    <?php if ($category['children']) { ?>
                    <div class="dropdown-menu">
                        <?php for ($i = 0; $i < count($category['children']);) { ?>
                        <ul>
                            <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
                            <?php for (; $i < $j; $i++) { ?>
                            <?php if (isset($category['children'][$i])) { ?>
                            <li>
                                <a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a>
                            </li>
                            <?php } ?>
                            <?php } ?>
                        </ul>
                        <?php } ?>
                    </div>
                    <?php } ?>
                </li>
                <?php } ?>
            </ul>
        </div>
    </div>
</div>
<?php } ?>

Подозреваю, что в этой строчке сидит ошибка:

<li class="dropdown"><?php if ($category['active']) { ?>
            <a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?><b class="caret"></b></a>

но как исправить не знаю. Прошу помощи.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А где ?

<nav id="menu" class="navbar">

Как то надо по стандартам разрабатывать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо за совет )) Поправил. А по проблеме, которую я описал можете подсказать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я бы советовал взять за основу стандартную сетку меню opencart 2 и полностью переделать под свои запросы.

Потому что разбираться в чужом коде вряд ли кто то будет, на это надо много времени, которого нет у разработчиков

Совет: надо делать по стандартам, унифицированные системы. Это основа стабильности ПО

Вам потом и перенести в opencart 2 будет очень легко свой код

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

[РЕШЕНО]

 

Вот готовый каркас под адаптивное меню на bootstrap

<?php if ($categories) { ?>
<div class="container">
    <nav class="navbar navbar-default " id="menu-top" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" data-target="#top-navbar-collapse"
                data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="top-navbar-collapse">
            <ul class="nav navbar-nav">
                <?php foreach ($categories as $category) { ?>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown"
                        href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?>
                        <?php if ($category['children']) { ?>
                        <b class="caret"></b>
                        <?php } ?>
                    </a>
                    <?php if ($category['children']) { ?>
                    <?php for ($i = 0; $i < count($category['children']);) { ?>
                    <ul class="dropdown-menu">
                        <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
                        <?php for (; $i < $j; $i++) { ?>
                        <?php if (isset($category['children'][$i])) { ?>
                        <li>
                            <a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a>
                        </li>
                        <?php } ?>
                        <?php } ?>
                    </ul>
                    <?php } ?>
                    <?php } ?>
                </li>
                <?php } ?>
            </ul>
        </div>
    </nav>
</div>
<?php } ?>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну приехали...

 

А где id="menu" ?

Вы замещаете же стандартное

<nav class="navbar navbar-default " id="menu-top" role="navigation">

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Точно! )) Вы правы!

Все. Исправил.

 

А кто может объяснить, что это с корзиной творится? Попробуйте по корзине нажать в хедере, чтобы ее развернуть.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

С корзиной все решилось. Оказалось, это у меня в браузере (Firefox) стояло дополнение "Google Selection Translate - For AltKey" оно при нажатии на корзину, подставляло <span id="transmark"></span> прямо между буквами, куда нажимаешь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а сами файлы бутстрапа? ведь если их взять из опенкарта второго, они не будут работать в связке с jquery для опенкарта 1.5.5.1.2 :(

 

https://opencartforum.com/topic/32891-bootstrap3/ взяла файлы из этого шаблона, спасибо автору :)

Изменено пользователем Marianna

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Ramhat89
      850.00 руб
      Скачать/Купить дополнение


      Универсальный адаптивный шаблон YourShop
      О шаблоне:
      Шаблон обладает всем необходимыми для быстрого старта магазина и его дальнейшего успешного развития. Лёгкий, быстрый, универсальный!
      Подходит для создания магазинов совершенно разных направлений - бытовой электроники, техники, одежды, обуви, книг, различных аксессуаров, бижутерии и многого другого.
       
      Демо:
      Главная страница: http://opencart.dzrp.ru/
      Страница разделов категории:  http://opencart.dzrp.ru/desktops/
      Страница категории:  http://opencart.dzrp.ru/component/monitor/
      Страница товара c опциями: http://opencart.dzrp.ru/index.php?route=product/product&path=20_64&product_id=82
      Страница товара: характеристик: http://opencart.dzrp.ru/index.php?route=product/product&path=18_46&product_id=79
       
      Плюсы:
      ·         Адаптивность (в том числе модули слайдшоу, каруселей товара и пр.), тестировался на различных устройствах с разрешением по горизонтали от 320px;
      ·         Встроенный модуль для создания настраиваемого бокового меню;
      ·         Встроенный модуль фильтрации товаров по цене;
      ·         Встроенный модуль заказа звонка;
      ·         Встроенный модуль быстрого просмотра товара
       
      Список поддерживаемых версий:
      ocStore 2.1.0.2.1
      ocStore 2.1.0.2
      ocStore 2.1.0.1.1
      ocStore 2.1.0.1
      OpenCart 2.0.0.0
      OpenCart 2.0.2.0
      OpenCart 2.0.3.1
      OpenCart 2.1.0.1
      OpenCart 2.1.0.2
      OpenCart 2.2.0.0
       
      Условия покупки: одна покупка - один рабочий домен.
      Шаблон поддерживает мультиязычность.
      Требования:
      PHP 5.3.* - 5.6.*, Ioncube Loader v5.0.* и выше
       

      Добавил Ramhat89 Добавлено 04.06.2018 Категория Платные шаблоны Системные требования Сайт разработчика dzrp.ru Старая цена Метод активации Автоматическая активация Ioncube Loader Требуется OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От Ramhat89
      О шаблоне:
      Шаблон обладает всем необходимыми для быстрого старта магазина и его дальнейшего успешного развития. Лёгкий, быстрый, универсальный!
      Подходит для создания магазинов совершенно разных направлений - бытовой электроники, техники, одежды, обуви, книг, различных аксессуаров, бижутерии и многого другого.
       
      Демо:
      Главная страница: http://opencart.dzrp.ru/
      Страница разделов категории:  http://opencart.dzrp.ru/desktops/
      Страница категории:  http://opencart.dzrp.ru/component/monitor/
      Страница товара c опциями: http://opencart.dzrp.ru/index.php?route=product/product&path=20_64&product_id=82
      Страница товара: характеристик: http://opencart.dzrp.ru/index.php?route=product/product&path=18_46&product_id=79
       
      Плюсы:
      ·         Адаптивность (в том числе модули слайдшоу, каруселей товара и пр.), тестировался на различных устройствах с разрешением по горизонтали от 320px;
      ·         Встроенный модуль для создания настраиваемого бокового меню;
      ·         Встроенный модуль фильтрации товаров по цене;
      ·         Встроенный модуль заказа звонка;
      ·         Встроенный модуль быстрого просмотра товара
       
      Список поддерживаемых версий:
      ocStore 2.1.0.2.1
      ocStore 2.1.0.2
      ocStore 2.1.0.1.1
      ocStore 2.1.0.1
      OpenCart 2.0.0.0
      OpenCart 2.0.2.0
      OpenCart 2.0.3.1
      OpenCart 2.1.0.1
      OpenCart 2.1.0.2
      OpenCart 2.2.0.0
       
      Условия покупки: одна покупка - один рабочий домен.
      Шаблон поддерживает мультиязычность.
      Требования:
      PHP 5.3.* - 5.6.*, Ioncube Loader v5.0.* и выше
       

    • От mrz
      1 400.00 руб
      Скачать/Купить дополнение


      Aridius Eclipse - адаптивный шаблон ocStore
      Универсальный шаблон Eclipse для ocStore v2.1.0.1/2.1.0.1.1/2.1.0.2/2.1.0.2.1 openCart v2.1.0.1/2.1.0.2

      Eclipse - универсальный, адаптивный шаблон для ocStore/openCart, который подойдет для продажи любых товаров благодаря шести цветовым схемам и множествам настроек, которые можно легко произвести из-под админ панели. Основной упор при разработке шаблона был сделан на простой и легкий дизайн, чтобы покупатель мог быстро получить информацию и купить товар. Вы можете создать магазин своей мечты за несколько минут!
      Шаблон имеет «чистый код», а также использует новейшие тенденции html5, css3, bootstrap 3.
       
      Другие наши шаблоны
       
      Aridius Modern
       
      Aridius Fractal
       
      Aridius Royal



      Особенности
      - Гибкая настройка шаблона из-под админ панели.
      - Модуль новостей с возможностью добавлять до каждой новости рекомендуемые товары и сопутствующие новости.
      - Модуль Стена категорий (с возможностью выбора категорий).
      - Настраиваемые стикеры для меню и товаров (Новинка, Акции, Лидеры продаж).
      - Мега-меню.
      - Два дополнительных модуля категорий с 3 уровнем вложенности (аккордеон и вертикальное меню с возможностью выбора категорий).
      - Добавленная прокрутка изображений и множество настроек для модулей Рекомендуемые, Акции, Хиты продаж, Новинки.
      - Добавленные новые позиции для слайдера и баннеров (3 баннера в ряд, слайдер на всю ширину, слайдер и два баннера в ряд).
      - Всплывающие окно при нажатии купить, в закладки, в сравнения.
      - Возможность создавать дополнительные вкладки в продукте для товаров.
      - Выбор одного из 5 Zoom эффекта в карточке товара.
      - Интерактивная карта в футере.
      - Возможность устанавливать свой маркер для карты.
      - 6 цветовых схем.
      - И многое другое.

      Настраиваемое меню с возможностью ставить стикеры для категорий.


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



      Новые позиции для слайдера (на всю ширину или два баннера справа).
      Стена категорий с возможностью выбора отображаемых категорий.



      Всплывающее окно при добавлении товара в корзину, закладки, сравнения.



      Настраиваемые стикеры для меню и товаров (Новинка, Акции, Лидеры продаж).



      Два дополнительных модуля категорий с 3 уровнем вложенности (аккордеон и вертикальное меню с возможностью выбора категорий).


      Выбор одного из 5 Zoom эффекта в карточке товара.



      Интерактивная карта в футере с возможностью выбора маркера.



      Настройки шаблона из под админ панели.




      Совместимость
      ocStore v2.1.0.1/2.1.0.1.1/2.1.0.2,
      openCart v2.1.0.1/2.1.0.2

      Лицензия
      Продажа, выкладывание в публичный доступ, присвоение и прочие действия данного программного обеспечения запрещены и являются нарушением авторских прав разработчика!

      Демо шаблона
      Добавил mrz Добавлено 20.12.2015 Категория Платные шаблоны Системные требования Сайт разработчика http://www.eclipse.aridius.ru Старая цена 1800 Метод активации Без активации Ioncube Loader Нет OpenCart 2.1 ocStore 2.1 OpenCart.Pro, ocShop  
    • От katilina
      1 900.00 руб
      Скачать/Купить дополнение


      July - адаптивный шаблон для ocStore/Opencart
      Адаптивный шаблон July.
      разработчики ShopUtils и Katilina
      Демо для версии ocstore - opencart 2.0.x - 2.1.x -2.2.x - 2.3
      Версия для 2.3.x - скачивайте архив july_ocstore_opencart_2.3_v2.16.07.14.zip

      april.mattimeo.ru
      mart.mattimeo.ru
      august.mattimeo.ru
      ДОКУМЕНТАЦИЯ april.mattimeo.ru/documentation
       
      Готовые магазины на шаблоне July ( публикация согласована с владельцами)
      http://akimov-moscow.ru
      https://ligabarshop.ru
      http://www.dveriantem.ru
      http://kollekcioner24.ru
      https://market-dvery.ru
      https://kngshop.ru
      https://tservice23.ru
      https://smenki.com.ua
      http://enargit.ru
      http://allpanels.ru
      http://trustsm.ru
      http://prodzdrav.ru
      http://krymmasla.ru
      http://mebelsmail.com
      http://www.nikaopt.ru
      https://profmix.ru
       
      Демо для версии ocstore 1.5.5.1.2

      july.mattimeo.ru
      may.mattimeo.ru
      june.mattimeo.ru
      Внимание! Версии шаблона под 1.5.х и под 2.х лицензируются отдельно даже для одного домена.
      Ключ на домен, у которого уже есть ключ для версии 15512, выдаётся за дополнительную плату 1500 руб.
      Поддержка движка другой версии в цену одного шаблона не входит
       

       
      Системные требования:
      - ocStore v1.5.4.x - 2.3.x / Opencart 1.5.4.x - 1.5.6.x, Opencart 2.0.x - 2.1.x - 2.2.x - 2.3.x
      Будьте внимательны при установке движка. Opencart.Pro с шаблоном не протестирован.
      - Ioncube Loader v4.5+ (для 2.x - 5.0+)
      - PHP v5.3+
      - vQmod v2.4.1 (только для 1.5.x)
      В версии шаблона для 2.0.x - 2.1.x - 2.2.x
      - Вы можете включить отображение опций в модулях и в выбранных категориях ( опции в блоке товара или в модальном окне на Ваш выбор)
      - Выбор количества товара в модулях и в категориях
      - Выбор сеток товара на странице категорий ( по 5, 4, 3 в ряд или 2 вида списка)
      - Новости с категориями
      - Дополнительные модули для новостей ( избранные, последние, тэги, разделы новостей)
      - Возможность прикреплять товары к новостям
       

       
      July тема - позитивный и чистый шаблон. Если Вы хотите иметь уникальный, привлекательный дизайн и пытаетесь сделать свой стиль среди многочисленных владельцев магазинов, July тема является прекрасной отправной точкой для Вас.
      Демо-данные высылаются по просьбе покупателя
      http://july.mattimeo.ru/docs/img/boots.png Шаблон использует технологию вёрстки bootstrap3
      http://july.mattimeo.ru/docs/img/user_part2.jpg
      Мы стараемся для Вас. Если Вам понравилась тема, не забудьте поставить 5 звёздочек
      В шаблоне есть также модуль новостей, подписка на новости магазина,
      возможность очистить кэш из админ панели управления сайтом.
      Вы можете загрузить настройки шаблона, сохранить настройки шаблона.
      Список модулей будет увеличиваться.
      Рекомендуем модули
      1. Живая цена - Динамическое обновление цены
      2. FilterPro Патч для модуля в архиве july_for_filterpro.zip
      3. SEO CMS TOP 2: Блог | Новости | Отзывы | Галерея | Формы
      4. Дополнительные вкладки на странице товара Патч для шаблона, купившим модуль
      Добавил katilina Добавлено 09.11.2015 Категория Платные шаблоны Системные требования ocStore v1.5.4.x - 2.x / Opencart 1.5.4.x - 1.5.6.x, Opencart 2.0.x - 2.1.x - 2.2.x - 2.3.xIoncube Loader v4.5+ (для 2.x - 5.0+)PHP v5.3+vQmod v2.4.1+ (только для 1.5.x) Сайт разработчика Старая цена Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 2.3
      2.2
      2.1
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1 OpenCart.Pro, ocShop  
    • От Sha
      300.00 руб
      Скачать/Купить дополнение


      Меню Step By Step
      Menu Step By Step:
      Пошаговое меню для OpenCart, хлебные крошки с выпадающими списками.
      модуль тестировался на ocStore 1.5.5.x.x
      для OpenCart 2.0 здесь >
      ВОЗМОЖНОСТИ:
      - Пошаговый подбор товара (категории товара).
      - Возможность использовать, как хлебные крошки breadcrumb с выпадающими списками (как в total commander).
      - Вертикальный вывод пунктов меню, Горизонтальный вывод пунктов меню. (Опция) NEW
      - Вывести только указанные начальные категории в меню по ID, с "запоминанием", не нужно повторно вводить. (Опция) NEW
      - Возможность указать количество видимых пунктов/шагов по умолчанию. (Опция)
      - Указать <h3> заголовок модуля. (Опция)
      - Скрыть или показать пункты категорий в которых находимся (с помощью стилей)(читаем ниже)
      - Скрыть или показать пункты пустых подкатегорий (с помощью стилей)(читаем ниже)
      ЛОКАЛИЗАЦИЯ:
      - English.
      - Русский.
      - Украинский.
      ПРОСТАЯ УСТАНОВКА:
      Скопировать содержимое папки [upload] в корень движка.
      (структура архива соответствуют структуре папок OpenCart)
      ОБНОВЛЕНИЕ:
      Скопировать содержимое папки [upload] в корень движка, с заменой, поверх старой версии.
      ВАЖНО:
      Дополнение предоставляется по принципу "Как есть", Разработчик НЕ ГАРАНТИРУЕТ отсутствия ошибок, которые могут нарушить работу компьютера и/или сайта и/или привести к потере данных.
      Также, если в код магазина было внесено много изменений, то работоспособность модуля может быть нарушена.
      Использует ajax,
      Модуль совместим с bootstrap, (т.е. классы прописаны, и если на вашем сайте установлен bootstrap, модуль подхватит стили автоматически.)
      Модуль не затирает, не заменяет ни каких файлов движка.
      Тем не менее, рекомендуем перед установкой делать бэкап файлов и базы данных!!!
      Демонстрация магазина
      Демонстрация админки
      имя пользователя: login
      пароль: login
      ЛИЦЕНЗИЯ:
      - скачать модуль можно только на форуме опенкартфорум ком
      - на сайте r.konotop.info представлено полное описание и обсуждение багов или доработок модуля (предлагайте).
      остальные способы распространения Menu Step By Step левые и ни какого отношения к данному модулю не имеют!!!
      - Модуль реализуется по принципу "1 покупка – 1 доменное имя" (для установки на второй свой сайт, необходимо оплатить второй раз, на третий - третий раз купить модуль...)
      - Запрещается передавать файлы модуля третьим лицам, как на платной, так и на безвозмездной основе.
      ТЕХНИЧЕСКАЯ ПОДДЕРЖКА:
      Техническая поддержка доступна только пользователям, из списка покупателей модуля. Если вы обращаетесь с просьбой разобраться в проблеме то, для экономии нашего времени, укажите: 1) адрес сайта, 2) доступ в админ-панель, 3) доступ на FTP-сервер.
      ПОДРОБНЕЕ ДЛЯ РАЗРАБОТЧИКОВ
      Возможность стилизовать:
      - ещё не выбранный пункт (неактивный): class="translucent",
      - пункт совпадающий с любым id из цепочки path=, или по другому breadcrumb: class="here",
      - горизонтальный/вертикальный: class="horizontal", (можно, впринципе, использовать для любой опциональной хотелки)
      - последний в цепочке иерархии категорий, class="last"
      - скрыть или показать пункты категорий в которых находимся
      (например: .ajax-category-container .list-group-1.here{display:none} скроет первый пункт когда мы находимся в категории, но не скроет на главной, и так далее)
      - скрыть или показать пункты пустых подкатегорий (например: .ajax-category-container .last ~ .translucent{display:none} если выбрав один из пунктов он окажется последним в иерархии, то скроет все следующие за ним)
      Изменения
      Добавил Sha Добавлено 17.09.2015 Категория Модули Системные требования Сайт разработчика r.konotop.info Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart ocStore OpenCart.Pro, ocShop  
  • Последние посетители   0 пользователей онлайн

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

×