Jump to content

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

А где ?

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

[РЕШЕНО]

 

Вот готовый каркас под адаптивное меню на 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

Share this post


Link to post
Share on other sites

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

 

А где id="menu" ?

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Edited by Marianna

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By grifferok
      Здравствуйте!) как обычно я и как обычно css. На сей раз меня не устраивает кнопки) при наводе делится на два цвета и поменять я это не могу(точнее могу, но могу поменять только цвет нижней части) излазил всё(даже ненавистные мной однострочные стили bootstrap) Помогите пожалуйста решить эту проблему
      Сайт: https://sandyscandies.ru
       
      Скрин:


    • By alex39
      В медиа-запросах 2.3.0.2.3 используются значения ширины:  478px - 767px - 768px - 980px - 991px - 992px - 1199px - 1200px
      во всех своих вариантах и логических комбинациях.
       
      Поскольку максимальный размер контейнера задан 1170px, до размера ~1300 всё более или менее нормально.
      Однако затем ширина контента фиксируется, и при увеличении экрана происходит лишь увеличение полей.
      В результате на 1900 имеем уже 730px в полях, т.е. считай треть экрана.  Но ведь 1900 далеко не предел...
       
      И что же теперь делать с большими экранами?
      Есть ли какие-то дополнительные сборки Bootstrap 3, может ещё какие решения для дополнительных точек, например 1400 или 1600 или те же 1900?
       
      Попутно, риторический вопрос; - вроде как везде написано что должно работать ещё и значение 320, но у меня оно почему-то не работает.
      Это так задано в сборке или ещё что - может ли кто пояснить?
       
    • By shyn
      Описание
      Basecart - базовый, бесплатный шаблон для OpenCart 2.x и OpenCart 3.x со встроенными цветовыми схемами Bootswatch.
      Простота и лёгкость шаблона позволяют использовать его для разных типов интернет магазинов.
      Быстрая скорость загрузки страниц сделает магазин приятным в использовании для покупателей.
       
      Друзья, чтобы у Вас не возникло никаких проблем при использовании шаблона, внимательно читаем раздел Установка.
       
      Демо магазин
       
       
      Основные возможности
      - Простая установка
      - Адаптивный дизайн
      - 17 цветовых схем
      - 2 типа цвета шапки для каждой цветовой схемы
      - Шаблон построен с использованием Bootstrap 3
      - Удобное переключение цветовых схем
      - Хорошая отзывчивость и высокая скорость работы
       
       
      Совместимость
      - OpenCart 3.0.2.0
      - OpenCart 3.0.1.2
      - OpenCart 3.0.0.0
      - 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 "Русская сборка"
       
       
      Изменения
      14.12.2018
      - Незначительные исправление и улучшения
       
      14.11.2018
      - Исправлено отображение списка подкатегорий (OpenCart 3)
       
      09.04.2018
      - Исправлено отображение опций товара в корзине (OpenCart 3)
      - Исправлен счетчик количества товаров (OpenCart 3)
       
      04.03.2018
      - Добавлена поддержка OpenCart 3.x
       
      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
       
       
      Установка
      OpenCart 2
      1. Скачать zip архив.
      2. В архиве находятся файлы установщики, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Перед началом установки убедитесь, что в установленном OpenCart настроен доступ по FTP.
      Система -> Настройка -> [Редактировать] -> FTP
      Если OpenCart установлен локально или по каким-то причинам необходимо произвести установку шаблона без настройки FTP, скачайте и установите модуль QuickFix, который позволяет устанавливать дополнения без настроенного FTP доступа.
      4. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Дополнения -> Установка дополнений -> [Загрузить]
      5. Обновить кеш модификаторов.
      Дополнения -> Менеджер дополнений -> [Сброс]/[Обновить]
      6. Выбрать установленную тему basecart из списка.
      Дополнения -> Дополнения -> Шаблоны -> [Редактировать] -> Папка шаблона -> basecart
      7. Сохранить
       
      OpenCart 3
      1. Скачать zip архив.
      2. В архиве находятся файлы установщики, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Модули/Расширения -> Установка расширений -> [Загрузить]
      4. Обновить кеш модификаторов.
      Модули/Расширения -> Модификаторы -> [Очистить]/[Обновить]
      5. Выбрать установленную тему basecart из списка.
      Модули/Расширения -> Модули/Расширения -> Темы -> [Редактировать] -> Директория темы -> basecart
      6. Сохранить
       
      Если, по каким-то причинам, шаблон был установлен путем простого копирования файлов, без использования установщика дополнений, нужно дополнительно установить модификатор шаблона (файл install.xml), найти его можно при распаковке архива, название которого оканчивается на *.ocmod.zip. Установка модификатора производится через: Дополнения -> Установка дополнений. Перед установкой install.xml необходимо переименовать в install.ocmod.xml. После установки - обновить кеш модификаторов.
       
      Переключение цветовых схем:
      OpenCart 2
      Дополнения -> Дополнения -> Модули -> Basecart -> [Установить] / [Редактировать]
       
      OpenCart 3
      Модули / Расширения -> Модули / Расширения -> Модули -> Basecart -> [Активировать] / [Редактировать]
    • By shyn
      Скачать/Купить дополнение


      Basecart шаблон для OpenСart
      Описание
      Basecart - базовый, бесплатный шаблон для OpenCart 2.x и OpenCart 3.x со встроенными цветовыми схемами Bootswatch.
      Простота и лёгкость шаблона позволяют использовать его для разных типов интернет магазинов.
      Быстрая скорость загрузки страниц сделает магазин приятным в использовании для покупателей.
       
      Друзья, чтобы у Вас не возникло никаких проблем при использовании шаблона, внимательно читаем раздел Установка.
       
      Демо магазин
       
       
      Основные возможности
      - Простая установка
      - Адаптивный дизайн
      - 17 цветовых схем
      - 2 типа цвета шапки для каждой цветовой схемы
      - Шаблон построен с использованием Bootstrap 3
      - Удобное переключение цветовых схем
      - Хорошая отзывчивость и высокая скорость работы
       
       
      Совместимость
      - OpenCart 3.0.2.0
      - OpenCart 3.0.1.2
      - OpenCart 3.0.0.0
      - 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 "Русская сборка"
       
       
      Изменения
      14.12.2018
      - Незначительные исправление и улучшения
       
      14.11.2018
      - Исправлено отображение списка подкатегорий (OpenCart 3)
       
      09.04.2018
      - Исправлено отображение опций товара в корзине (OpenCart 3)
      - Исправлен счетчик количества товаров (OpenCart 3)
       
      04.03.2018
      - Добавлена поддержка OpenCart 3.x
       
      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
       
       
      Установка
      OpenCart 2
      1. Скачать zip архив.
      2. В архиве находятся файлы установщики, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Перед началом установки убедитесь, что в установленном OpenCart настроен доступ по FTP.
      Система -> Настройка -> [Редактировать] -> FTP
      Если OpenCart установлен локально или по каким-то причинам необходимо произвести установку шаблона без настройки FTP, скачайте и установите модуль QuickFix, который позволяет устанавливать дополнения без настроенного FTP доступа.
      4. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Дополнения -> Установка дополнений -> [Загрузить]
      5. Обновить кеш модификаторов.
      Дополнения -> Менеджер дополнений -> [Сброс]/[Обновить]
      6. Выбрать установленную тему basecart из списка.
      Дополнения -> Дополнения -> Шаблоны -> [Редактировать] -> Папка шаблона -> basecart
      7. Сохранить
       
      OpenCart 3
      1. Скачать zip архив.
      2. В архиве находятся файлы установщики, названия которых оканчиваются на *.ocmod.zip (Распаковка не требуется).
      3. Выбрать и установить файл темы для соответствующей версии OpenCart.
      Модули/Расширения -> Установка расширений -> [Загрузить]
      4. Обновить кеш модификаторов.
      Модули/Расширения -> Модификаторы -> [Очистить]/[Обновить]
      5. Выбрать установленную тему basecart из списка.
      Модули/Расширения -> Модули/Расширения -> Темы -> [Редактировать] -> Директория темы -> basecart
      6. Сохранить
       
      Если, по каким-то причинам, шаблон был установлен путем простого копирования файлов, без использования установщика дополнений, нужно дополнительно установить модификатор шаблона (файл install.xml), найти его можно при распаковке архива, название которого оканчивается на *.ocmod.zip. Установка модификатора производится через: Дополнения -> Установка дополнений. Перед установкой install.xml необходимо переименовать в install.ocmod.xml. После установки - обновить кеш модификаторов.
       
      Переключение цветовых схем:
      OpenCart 2
      Дополнения -> Дополнения -> Модули -> Basecart -> [Установить] / [Редактировать]
       
      OpenCart 3
      Модули / Расширения -> Модули / Расширения -> Модули -> Basecart -> [Активировать] / [Редактировать]
      Добавил shyn Добавлено 21.07.2015 Категория Бесплатные шаблоны Системные требования Сайт разработчика http://themefiber.com Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1  
    • By 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
       
      Готовые магазины на шаблоне 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.6+
      - 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 звёздочек
      В шаблоне есть также модуль новостей, подписка на новости магазина,
      возможность очистить кэш из админ панели управления сайтом.
      Вы можете загрузить настройки шаблона, сохранить настройки шаблона.
      Список модулей будет увеличиваться.
       
      100% гарантии интеграции к сторонним модулям нет
      Рекомендуем модули
      1. Живая цена - Динамическое обновление цены
      2. FilterPro Патч для модуля в архиве july_for_filterpro.zip
      3. SEO CMS TOP 2: Блог | Новости | Отзывы | Галерея | Формы
      4. Дополнительные вкладки на странице товара Патч для шаблона, купившим модуль
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.