Jump to content
покупайте без комиссии
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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>

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

Link to post
Share on other sites

А где ?

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

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

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
Link to post
Share on other sites

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

 

А где id="menu" ?

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

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

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

Link to post
Share on other sites

  • 1 year later...

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

 

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

Edited by Marianna
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By RGB
      Внимание! До конца недели на новый шаблон Moneymaker 2  действует скидка!
      Ознакомьтесь с отзывами покупателей о моем новом шаблоне
      и убедитесь, что он вобрал в себя все лучшее из первого Moneymaker
       
       
      http://1.mnmkr.com/image/data/presentation/of-01.jpg http://1.mnmkr.com/image/data/presentation/of-02-01.jpg http://1.mnmkr.com/image/data/presentation/of-03.jpg Спустя полтора года после выпуска самой первой версии шаблона, хочу поблагодарить всех тех, кто выбрал мою работу, ведь именно благодаря вам - сотням магазинов и их владельцев - мой шаблон стал здесь самым популярным платным шаблоном и самым продаваемым дополнением за 2014 год!
      Предисловие
      Последние 4 года, кроме веб-разработки, я работал совладельцем растущего интернет-магазина, мы занимались продажами аудио-техники и инструментов. К сожалению, политическая и экономическая ситуация в Украине не позволила нам реализовать все, что мы хотели, и нам пришлось продать магазин, здесь же вы можете видеть результат нашей работы. Уверен, что задача любого шаблона — это продажа товаров или услуг, и такова философия шаблона Moneymaker.
      Насчет того, что же такое "продающий" шаблон - важно понимать, что продающим его делаете вы сами, каким бы прекрасным ни был установленный вами шаблон, без понимания того, как работает интернет-магазин и что такое интернет-коммерция, вы не сможете построить прибыльный бизнес. Мои разработки лишь "фундамент" в этом деле, "стены" и "крышу" своего бизнеса вам предстоит возводить самостоятельно.
      Я хотел бы гарантировать вам увеличение продаж (вероятно, так оно и будет), но как вы понимаете, даже самый лучший шаблон не сможет заменить людей. Чтобы получить отличные результаты, вы сами должны хорошо трудиться над своим магазином, я же в свою очередь обещаю максимально помочь вам с этим.
      Описание
      Продающий интерактивный шаблон Moneymaker создан на основе фреймворка Bootstrap 3 и сочетает в себе множество полезных модулей, встроенных и отдельно поставляемых, большинство из которых были протестированы и успешно внедрены в нашем интернет-магазине:
      Модуль Преимущества, который является одним из наиболее важных (и недооцененных, увы) модулей в любом магазине Модуль Быстрый заказ, с которым ваши покупатели смогут быстрее делать покупки Модуль Перезвоните мне, позволяющий реализовать функцию обратного звонка Модуль Расширенных контактов, с которым вы предоставите покупателю больше способов связи Модуль Ajax-поиска с автоподстановкой Модуль Стикеры, созданный для облегчения процесса выбора покупок Отзывчивое Слайдшоу и Html модуль, адаптированные под шаблон Moneymaker Модули Вкладок товара, Header-меню и Footer-меню, Улучшенные категории Модули Микроразметки, Социальных кнопок, Способов оплаты и многое другое Кроме того, есть множество особенностей в шаблоне Moneymaker, которые я хотел бы выделить:
      Продающий дизайн, основанный на наших наблюдениях включая данные с вебвизора (интегрированного в наш магазин с 2011 г.) Удобный для покупателей интерфейс, переработанный в соответствии с подтвержденными правилами юзабилити и нашим опытом HTML5/CSS3 с механизмом поддержки устаревших браузеров (покупатели с IE8 будут вам благодарны) Отзывчивый дизайн, адаптированный под самые компактные устройства с экраном даже в 240px SEO-оптимизированный шаблон, с документацией и читабельным кодом, кросс-браузерностью и другими преимуществами Код шаблона успешно проходит валидацию по стандартам html5, в частности для страниц товара и страниц категорий
      Подробная документация по шаблону с описанием всех функций, модулей и нюансов работы доступна всем желающим, также как и демо-доступ в административную часть шаблона и модулей в комплекте (логин: demo / пароль: demo)
      На сегодня поддерживаются следующие версии OpenCart: ocStore 1.5.5.1.2, OpenCart 1.5.6.1, OpenCart 1.5.6.2, OpenCart 1.5.6.3, OpenCart 1.5.6.4.
      ВНИМАНИЕ: Для корректной работы части функциональности шаблона (пользовательские стикеры, расширенное меню категорий, поиск с автоподстановкой и т.п.) требуется vQmod, все инструкции по установке приведены в документации. Рекомендуется использовать vqmod 2.4.1 (скачать можно здесь)
      На покупку дополнительных лицензий действуют скидки:
      Совместимые модули:
      Для тех, кто сомневается в качестве шаблона:
      Полная история изменений доступна в документации
    • By RGB
      1699
      Скачать/Купить дополнение


      Продающий шаблон Moneymaker
      Внимание! До конца недели на новый шаблон Moneymaker 2  действует скидка!
      Ознакомьтесь с отзывами покупателей о моем новом шаблоне
      и убедитесь, что он вобрал в себя все лучшее из первого Moneymaker
       
       
      Спустя полтора года после выпуска самой первой версии шаблона, хочу поблагодарить всех тех, кто выбрал мою работу, ведь именно благодаря вам - сотням магазинов и их владельцев - мой шаблон стал здесь самым популярным платным шаблоном и самым продаваемым дополнением за 2014 год!
      Предисловие
      Последние 4 года, кроме веб-разработки, я работал совладельцем растущего интернет-магазина, мы занимались продажами аудио-техники и инструментов. К сожалению, политическая и экономическая ситуация в Украине не позволила нам реализовать все, что мы хотели, и нам пришлось продать магазин, здесь же вы можете видеть результат нашей работы. Уверен, что задача любого шаблона — это продажа товаров или услуг, и такова философия шаблона Moneymaker.
      Насчет того, что же такое "продающий" шаблон - важно понимать, что продающим его делаете вы сами, каким бы прекрасным ни был установленный вами шаблон, без понимания того, как работает интернет-магазин и что такое интернет-коммерция, вы не сможете построить прибыльный бизнес. Мои разработки лишь "фундамент" в этом деле, "стены" и "крышу" своего бизнеса вам предстоит возводить самостоятельно.
      Я хотел бы гарантировать вам увеличение продаж (вероятно, так оно и будет), но как вы понимаете, даже самый лучший шаблон не сможет заменить людей. Чтобы получить отличные результаты, вы сами должны хорошо трудиться над своим магазином, я же в свою очередь обещаю максимально помочь вам с этим.
      Описание
      Продающий интерактивный шаблон Moneymaker создан на основе фреймворка Bootstrap 3 и сочетает в себе множество полезных модулей, встроенных и отдельно поставляемых, большинство из которых были протестированы и успешно внедрены в нашем интернет-магазине:
      Модуль Преимущества, который является одним из наиболее важных (и недооцененных, увы) модулей в любом магазине Модуль Быстрый заказ, с которым ваши покупатели смогут быстрее делать покупки Модуль Перезвоните мне, позволяющий реализовать функцию обратного звонка Модуль Расширенных контактов, с которым вы предоставите покупателю больше способов связи Модуль Ajax-поиска с автоподстановкой Модуль Стикеры, созданный для облегчения процесса выбора покупок Отзывчивое Слайдшоу и Html модуль, адаптированные под шаблон Moneymaker Модули Вкладок товара, Header-меню и Footer-меню, Улучшенные категории Модули Микроразметки, Социальных кнопок, Способов оплаты и многое другое Кроме того, есть множество особенностей в шаблоне Moneymaker, которые я хотел бы выделить:
      Продающий дизайн, основанный на наших наблюдениях включая данные с вебвизора (интегрированного в наш магазин с 2011 г.) Удобный для покупателей интерфейс, переработанный в соответствии с подтвержденными правилами юзабилити и нашим опытом HTML5/CSS3 с механизмом поддержки устаревших браузеров (покупатели с IE8 будут вам благодарны) Отзывчивый дизайн, адаптированный под самые компактные устройства с экраном даже в 240px SEO-оптимизированный шаблон, с документацией и читабельным кодом, кросс-браузерностью и другими преимуществами Код шаблона успешно проходит валидацию по стандартам html5, в частности для страниц товара и страниц категорий
      Подробная документация по шаблону с описанием всех функций, модулей и нюансов работы доступна всем желающим, также как и демо-доступ в административную часть шаблона и модулей в комплекте (логин: demo / пароль: demo)
      На сегодня поддерживаются следующие версии OpenCart: ocStore 1.5.5.1.2, OpenCart 1.5.6.1, OpenCart 1.5.6.2, OpenCart 1.5.6.3, OpenCart 1.5.6.4.
      ВНИМАНИЕ: Для корректной работы части функциональности шаблона (пользовательские стикеры, расширенное меню категорий, поиск с автоподстановкой и т.п.) требуется vQmod, все инструкции по установке приведены в документации. Рекомендуется использовать vqmod 2.4.1 (скачать можно здесь)
      На покупку дополнительных лицензий действуют скидки:
      Совместимые модули:
      Для тех, кто сомневается в качестве шаблона:
      Полная история изменений доступна в документации
      Добавил RGB Добавлено 21.08.2014 Категория Платные шаблоны Системные требования Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6 ocStore 1.5.5.1.2
      1.5.5.1.1
      1.5.5.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика  
    • By Summersby
      Всем доброго времени суток! Такая проблема-интегрирую верстку и не получается перебить дефолтные стили Вootstrap. Кастомные стили пишу в stylesheets.css, естественно подключил его ниже bootstrap.css, !important тоже не помогает
    • By katilina
      Скачать/Купить дополнение 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.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. Дополнительные вкладки на странице товара Патч для шаблона, купившим модуль
      Добавил 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.6+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 Обращение к серверу разработчика Нет Старая цена 0  
    • By Sha
      Скачать/Купить дополнение Меню Step By Step
      Menu Step By Step:
      Пошаговое меню для OpenCart, хлебные крошки с выпадающими списками.
      модуль тестировался на OpenCart 2.0.3.1, 2.3.0.2
      модуль для ocStore 1.5.5.x.x здесь >
       
      ВОЗМОЖНОСТИ:
      Пошаговый подбор товара (категории товара). Возможность указать количество видимых пунктов по умолчанию. Возможность использовать, как хлебные крошки breadcrumb с выпадающими списками (как в total commander).  
      ЛОКАЛИЗАЦИЯ:
      English. Русский. Украинский.  
      ПРОСТАЯ УСТАНОВКА:
      Скопировать содержимое папки [upload] в корень движка.
      (структура архива соответствуют структуре папок OpenCart)
       
      ВАЖНО:
      Дополнение предоставляется по принципу "Как есть", Разработчик НЕ ГАРАНТИРУЕТ отсутствия ошибок, которые могут нарушить работу компьютера и/или сайта и/или привести к потере данных.
      Также, если в код магазина было внесено много изменений, то работоспособность модуля может быть нарушена.
      Использует ajax и bootstrap.
      Модуль не затирает, не заменяет ни каких файлов движка.
      Тем не менее, рекомендуем перед установкой делать бэкап файлов и базы данных!!!
       
      ДЕМО МАГАЗИНА
      ДЕМО АДМИНИСТРАТИВНОЙ ЧАСТИ
       
      имя пользователя: login
      пароль: login
       
      ЛИЦЕНЗИЯ:
      - скачать модуль можно только на форуме opencartforum.com
      - на сайте r.konotop.info представлено полное описание и обсуждение багов или доработок модуля (предлагайте).
      остальные способы распространения Menu Step By Step левые и ни какого отношения к данному модулю не имеют!!!
      - Модуль реализуется по принципу "1 покупка – 1 доменное имя". (для установки на второй свой сайт, необходимо оплатить второй раз, на третий - третий раз купить модуль...)
      - Запрещается передавать файлы модуля третьим лицам, как на платной, так и на безвозмездной основе.
       
      ТЕХНИЧЕСКАЯ ПОДДЕРЖКА:
      Техническая поддержка доступна только пользователям, из списка покупателей модуля. Если вы обращаетесь с просьбой разобраться в проблеме то, для экономии нашего времени, укажите: 1) адрес сайта, 2) доступ в админ-панель, 3) доступ на FTP-сервер.
      Изменения:
      Добавил Sha Добавлено 02.09.2015 Категория Модули Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.0 ocStore 2.3.0.2.4
      2.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 0  
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

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.