alinalessioYandex

[Решено] Адаптивное меню Bootstrap на 1.5.5.1.2

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

Помогите пожалуйста настроить адаптивное меню, используя 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>

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

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


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

А где ?

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

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

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


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

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

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


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

Я бы советовал взять за основу стандартную сетку меню 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 } ?>

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


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

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

 

А где id="menu" ?

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

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

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


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

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

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

 

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

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


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

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

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


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

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

 

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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

    • От shyn

      Скачать/Купить дополнение


      Basecart шаблон для OpenСart 2.x
      Описание
      Basecart - базовый, бесплатный шаблон для OpenCart 2.x со встроенными цветовыми схемами Bootswatch.
      Простота и лёгкость шаблона позволяют использовать его для разных типов интернет магазинов.
      Демо магазин
       
       
      Основные возможности
      - Простая установка
      - Адаптивный дизайн
      - 17 цветовых схем
      - Шаблон построен с использованием Bootstrap 3
      - Удобное переключение цветовых схем через админку
       
       
      Совместимость
      - OpenCart 2.3.0.2
      - OpenCart 2.3.0.1
      - OpenCart 2.3.0.0
      - OpenCart 2.2.0.0
      - OpenCart 2.1.0.2
      - OpenCart 2.1.0.1
      - OpenCart 2.0.3.1
       
      Поддерживаются также соответствующие версии ocStore и OpenCart "Русская сборка"
       
       
      Изменения
      10.01.2017
      - Незначительные улучшения
       
      02.01.2017
      - Изменен формат установки
       
      03.12.2016
      - Исправлен модуль управления темой (OpenCart 2.3.0.x)
       
      04.09.2016
      - Добавлена поддержка OpenCart 2.3.0.x
       
      16.06.2016
      - Добавлена поддержка OpenCart 2.2.0.0 и ocStore 2.1.0.2.1
       
      16.02.2016
      - Незначительные исправления
       
      10.01.2016
      - Исправлена ошибка с капчей на странице возврата товара (OpenCart 2.1.0.1)
       
      12.10.2015
      - Добавлена поддержка OpenCart 2.1.0.1
       
       
      Установка
      1. Скачать zip архив.
      2. В архиве находятся файлы, установщики темы, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Перед началом установки убедитесь, что в установленном OpenCart настроен доступ по FTP.
      System -> Settings -> [Edit] -> FTP Если OpenCart установлен локально или по каким-то причинам необходимо произвести установку темы без настройки FTP, скачайте и установите модуль QuickFix, который позволяет устанавливать дополнения без настроенного FTP доступа.
      3. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Extensions -> Extension Installer -> Upload 4. Выбрать установленную тему basecart из списка.
      Extensions -> Extensions -> Themes -> [Edit] -> Theme Directory -> basecart 5. Сохранить
       
      Если, по каки-то причинам, шаблон был установлен путем простого копирования файлов, без использования установщика дополнений, нужно дополнительно установить модификатор шаблона (файл install.xml), найти его можно при распаковке архива, название которого оканчивается на *.ocmod.zip. Установка модификатора производится через: Дополнения -> Установка дополнений. Перед установкой install.xml необходимо переименовать в install.ocmod.xml
       
      Переключение цветовых схем:
      Зайти в админку магазина.
      Extensions -> Extensions -> Modules -> Basecart -> Install / Edit  
      Добавил shyn Добавлено 21.07.2015 Категория Бесплатные шаблоны Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.2
      2.1 OpenCart.Pro, ocShop  
    • От shyn
      Описание
      Basecart - базовый, бесплатный шаблон для OpenCart 2.x со встроенными цветовыми схемами Bootswatch.
      Простота и лёгкость шаблона позволяют использовать его для разных типов интернет магазинов.
      Демо магазин
       
       
      Основные возможности
      - Простая установка
      - Адаптивный дизайн
      - 17 цветовых схем
      - Шаблон построен с использованием Bootstrap 3
      - Удобное переключение цветовых схем через админку
       
       
      Совместимость
      - OpenCart 2.3.0.2
      - OpenCart 2.3.0.1
      - OpenCart 2.3.0.0
      - OpenCart 2.2.0.0
      - OpenCart 2.1.0.2
      - OpenCart 2.1.0.1
      - OpenCart 2.0.3.1
       
      Поддерживаются также соответствующие версии ocStore и OpenCart "Русская сборка"
       
       
      Изменения
      10.01.2017
      - Незначительные улучшения
       
      02.01.2017
      - Изменен формат установки
       
      03.12.2016
      - Исправлен модуль управления темой (OpenCart 2.3.0.x)
       
      04.09.2016
      - Добавлена поддержка OpenCart 2.3.0.x
       
      16.06.2016
      - Добавлена поддержка OpenCart 2.2.0.0 и ocStore 2.1.0.2.1
       
      16.02.2016
      - Незначительные исправления
       
      10.01.2016
      - Исправлена ошибка с капчей на странице возврата товара (OpenCart 2.1.0.1)
       
      12.10.2015
      - Добавлена поддержка OpenCart 2.1.0.1
       
       
      Установка
      1. Скачать zip архив.
      2. В архиве находятся файлы, установщики темы, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Перед началом установки убедитесь, что в установленном OpenCart настроен доступ по FTP.
      System -> Settings -> [Edit] -> FTP Если OpenCart установлен локально или по каким-то причинам необходимо произвести установку темы без настройки FTP, скачайте и установите модуль QuickFix, который позволяет устанавливать дополнения без настроенного FTP доступа.
      3. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Extensions -> Extension Installer -> Upload 4. Выбрать установленную тему basecart из списка.
      Extensions -> Extensions -> Themes -> [Edit] -> Theme Directory -> basecart 5. Сохранить
       
      Если, по каки-то причинам, шаблон был установлен путем простого копирования файлов, без использования установщика дополнений, нужно дополнительно установить модификатор шаблона (файл install.xml), найти его можно при распаковке архива, название которого оканчивается на *.ocmod.zip. Установка модификатора производится через: Дополнения -> Установка дополнений. Перед установкой install.xml необходимо переименовать в install.ocmod.xml
       
      Переключение цветовых схем:
      Зайти в админку магазина.
      Extensions -> Extensions -> Modules -> Basecart -> Install / Edit  
    • От 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
       
      Демо для версии 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  
    • От katilina
      Адаптивный шаблон 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
       
      Демо для версии 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. Дополнительные вкладки на странице товара Патч для шаблона, купившим модуль
    • От ruscosmonavt
      Всем привет, шаблон дефолт, col-sm-6 используется и на странице категорий и на странице товара
      при изменении в bootstrap получилось так, что на странице товара необходимо content сделать col-sm-6 50% так как при значении 60% начинает съезжать блок (с ценой, кнопками купить, сравнить и.т.д.) вниз под описание и характеристики. тогда при значении 50%, на странице категории, где есть левый макет 20%, правый макет 20%, остается 10% пустого места, блок по центру выглядит плохо. подскажите пожалуйста, как сделать в категории 60%, а в товаре 50%, в чем проблема может быть?
      Страница категории: https://progres.store/index.php?route=product/category&path=339_340
      Страница товара: https://progres.store/index.php?route=product/product&path=339_340&product_id=15596
      Благодарю за внимание
  • Последние посетители   0 пользователей онлайн

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