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

[alinalessioYandex]

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

А где ?

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

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

[alinalessioYandex]

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

[markimax]

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

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

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

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

[alinalessioYandex]

[РЕШЕНО]

 

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

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

 

А где id="menu" ?

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

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

[alinalessioYandex]

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

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

 

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

[alinalessioYandex]

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

[Marianna]

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

 

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

Змінено 24 жовтня 2016 користувачем Marianna