Как при foreach вставлять класс active в меню сайта?

Question

[Historian111]

Добрый день. Немного практикуюсь в создании сайта, и встала небольшая проблемка с меню этого сайта.

При клике на кнопку, должен добавляться класс active, который выделяет нажатую кнопку.

Но меню я хочу полностью добавить в базу данных, для удобства изменения или добавления новых пунктов. И вот тут началась проблема, получаю я данные из БД,

прохожусь циклом и вывожу в нужных местах

<?php if(!empty($navLinks)):?>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <?php foreach ($navLinks as $navLink):?>
                <li><a href="<?= $navLink->href?>" class="scroll-to"><?= $navLink->name?></a></li>
                <?php endforeach;?>
            </ul>
        </div>
        <?php endif;?>

Все выводится классно, только вот выделяется только первая кнопка всегда, к остальным при переключении active не прилипает. Разрабатываю на Yii2. Может кто сталкивался с такой проблемой, задачей, помогите пожалуйста

Answer 1

[Дмитрий]

Добрый вечер.
Используйте виджеты, которые предоставляет yii2, всё будет работать.
Например yii\widgets\Menu;
Получаете из базы данных все необходимые пункты меню, формируете их в массив и "скармливаете" в виджет.

Menu::widget([
    'items' => $items
])

Так же можно использовать NavBar

Comments

[Historian111]

Спасибо. Может я что то не понимаю, а как это поможет добавить класс active к li?

[Дмитрий]

Historian111, так всё включено. Вы же на yii2 делаете сайт, вот и используйте виджеты без лишней головной боли.

[Дмитрий]

Historian111, Вы когда установили yii2 - видели шаблон по умолчанию?

[Historian111]

slo_nik, видел, он у меня тоже остался. Только я не понимаю, как оно будет работать, по сути это одно и тоже, что я пропишу в виджете, что я просто напишу

[Дмитрий]

Historian111, не изобретайте велосипед. В виджетах всё реализовано.
И, как видите, разница есть.

[Дмитрий]

Historian111, так же можно получить id действия или контроллера и исходя из его значения выставлять "active" для пункта меню.
Но это лишнее телодвижение.

[Historian111]

slo_nik, ладно... Он никак не поможет в этой проблеме, она останется... К li не будет добавляться класс active. Это лишнее, мне проще написать так, как я написал в вопросе, потому что это тоже самое. Даже в стандартном шаблоне нет такого, там по другому все реализовано, слишком просто, опять же, проще без виджетов прописать даже там, меньше кода, код читабельнее и проще

[Дмитрий]

Historian111, поможет и ещё как. Если Вы не знаете, то не утверждайте то, чего не знаете.
Цитата из документации к виджету Menu

Menu checks the current route and request parameters to toggle certain menu items with active state.

[Дмитрий]

мне проще написать так, как я написал в вопросе, потому что это тоже самое.

Historian111, это не тоже самое, это, извините за выражение, говнокод.
Хотите говнокодить - вперёд.

[Historian111]

slo_nik, в вопросе все ясно написано. Во первых, как я в LI добавлю класс? Во вторых, как я форич туда добавлю? Оно делает тоже самое, что я сделал и сейчас. Я так же к li могу прописать active, и так же ничего не будет работать. Это все логично. Мне нужна работа с БД и только так, никак иначе

[Historian111]

slo_nik, это не говнокод, это нормальный код, который делает один в один то, что я делает виджет. Мне нужен другой результат, поэтому я и написал сюда. Если было бы все просто, я бы сам все сделал...

Вот допустим у меня не будет меню, но будет текст, где пролистываются слова через какое то время, и через это время добавляется определенный класс строке, чтобы та появилась, и потом исчезла. И вот тут костыль с тем виджетом, потому что тут он не поможет......

Мне нужна работа с бд, а не костыли, напиши ручками а потом шарься в коде пол дня и меняй все

[Дмитрий]

Во первых, как я в LI добавлю класс? Во вторых, как я форич туда добавлю?

Historian111, виджет сам добавит класс активному пункту меню(читайте документацию), тем более, что я привёл цитату из документации, которая отвечает на Ваш вопрос.
Второе, я написал, что надо сформировать массив данных и передать в виджет. Это можно сделать foreach, как Вы и пытаетесь, а можно в запросе получить необходимые данные и при помощи необходимых инструментов создать массив.
Вот Ваша задача с меню для сайта решённая только средствами yii2, как видите на изображении активный пункт выделен другим цветом.

Пункты меню так же хранятся в базе данных. Запросом получены необходимые пункты, сформирован массив и передан в виджет. Никакой пляски для добавления активному пункту меню класса не было, всё сделал виджет.

[Дмитрий]

это не говнокод, это нормальный код,

Historian111, разрабатывая на framework-е и не используя его готовые решения как раз и является говнокодом.

[Historian111]

slo_nik,

разрабатывая на framework-е и не используя его готовые решения как раз и является говнокодом.

нет

[Historian111]

slo_nik, Да не поможет это решить данную задачу, тут как раз больше танцев чем пользы. Пользоваться всем подряд, что насоздавали кто то там, как то не очень. Нужно делать так, как будет лучше для определенной задачи. Еще раз повторяю, в li он не добавит ничего!!!!! Я могу повторять хоть вечность. Посмотрите вопрос, а не спорьте. Мне не надо добавлять класс к "a", нужно к LLLLLIIIIIIII . как еще написать? Даже в стандартном шаблоне добавляется класс к AAAAAAAA

как же я люблю этих защитников yii2.........

[Дмитрий]

Мне не надо добавлять класс к "a", нужно к LLLLLIIIIIIII . как еще написать? Даже в стандартном шаблоне добавляется класс к AAAAAAAA

Historian111, это из примера, скриншот которого я привёл выше, используется Nav виджет

<li class="active">
     <a href="/tomdom/production/views/5" tabindex="-1">Детские горки</a>
</li>

Это из другого проекта, используется виджет NavBar

<li class="active">
     <a href="/yii2_dev/contact"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Контакты</a>
</li>

Посмотрите внимательно, какому элементу присвоен класс "active"? Неужели тегу "а"?

Еще раз повторяю, в li он не добавит ничего!!!!! Я могу повторять хоть вечность.

Как же я люблю этих упёртых баранов, которые никого не хотят слушать!!! Особенно, когда пишут что-то подобное

Немного практикуюсь в создании сайта

Немного === знаний "0", но понтов выше головы.

[Historian111]

slo_nik, оскорбления пошли... ясно

[Дмитрий]

Historian111, да мне пофиг. Не надо было истерики закатывать!

[Павел Корнилов]

Абалдеть...
Человек так упорно пытался помочь, с таким терпением... А его так и не услышали =(
Отмечаю решением.

[Historian111]

KorniloFF, и как ты это сделаешь? Помочь, это когда помогают. Это же не решит мою проблему. В доке нет того, что нужно мне. Как мне помогли? Я знаю, что он хороший человек, иногда реально хорошие советы дает, и помогает, не раз видел это.

[Historian111]

slo_nik, истерик не было, я нормально отвечал

[Павел Корнилов]

Historian111, или лыжи не едут, или я тоже тупой.
Твоё уточнение вопроса:

Мне не надо добавлять класс к "a", нужно к LLLLLIIIIIIII . как еще написать? Даже в стандартном шаблоне добавляется класс к AAAAAAAA

Ответ:

Historian111, это из примера, скриншот которого я привёл выше, используется Nav виджет

<li class="active">
     <a href="/tomdom/production/views/5" tabindex="-1">Детские горки</a>
</li>

Разве это не адекватная помощь???

[Historian111]

slo_nik, я знаю что нельзя цикл в виджет, этот код написан был чисто проверить. Знаю что нужно в модели все это делать, передавать в контроллер и во вью.... а про ну и что дальше, так там костыль на лице... я лично не знаю, как ты в виджет запихнешь отдельный div, которые принадлежит именно самому меню. Логотип убирать нельзя, у него тоже отдельный div. Вот это и есть костыль, который и мешает всегда в готовых виджетах и т.д.

[Дмитрий]

Historian111, какой логотип, какой див?
Давайте данные для меню, вместе с дампом таблицы, изображениями и примером в чистом html, что должно получится на выходе.

[Historian111]

slo_nik,

код

<nav class="navbar navbar-default navbar-fixed-top navbar-hidden navigation-top" id="navigation-top-1"
     role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <!-- Logo start -->
            <a class="navbar-brand scroll-to" href="#home">
                <span class="va-helper"></span>
                <img src="img/nav-logo.png" alt="BasicGrid Wellness and Spa"/>
            </a>
            <!-- Logo end -->
        </div>

        <!-- Nav-Links start -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#home" class="scroll-to">Home</a></li>
                <li><a href="#our-service" class="scroll-to">Our Services</a></li>
                <li><a href="#about-us" class="scroll-to">About Us</a></li>
                <li><a href="#offers" class="scroll-to">Offers</a></li>
                <li><a href="#team" class="scroll-to">Team</a></li>
                <li><a href="#contact" class="scroll-to">Contact</a></li>
            </ul>
        </div>
        <!-- Nav-Links end -->
    </div>
</nav>

бд лого

бд меню

ну в общем пока в бд все, как в шаблоне. Потом хочу из админки все поменять

меню

[Дмитрий]

Historian111, я не собираюсь в базу руками всё записывать, миграцию писать тоже не хочу. дам в формате sql и реальное изображение нужно.

[Дмитрий]

Historian111, код виджета занял 12 строк, метод вывода пунктов меню из базы 8 строк.
Результат

<nav id="navigation-top-1" class="navbar navbar-default navbar-fixed-top navbar-hidden navigation-top"
     role="navigation-top-1">
    <div class="container">
        <div class="navbar-header">

            <a class="navbar-brand scroll-to" href="/yii2_test/" style="padding:0px">
                <span class="va-helper"></span>
                <img src="/yii2_test/logo/VironIT_logotype.jpg" alt="">
            </a>
        </div>
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul id="w0" class="navbar-nav navbar-right nav">
                <li class="active"><a class="scroll-to" href="/yii2_test/">test1</a></li>
                <li><a class="scroll-to" href="/yii2_test/about">test2</a></li>
                <li><a class="scroll-to" href="/yii2_test/contact">test3</a></li>
            </ul>
        </div>
    </div>
</nav>

[Historian111]

slo_nik, Вот давай по честному. Я тебе сказал, что мне не нужно все делать за меня, ты мне сказал, что давай данные из БД, чистый код меню и т.д., если все получится, с меня отметка и извинения. По сути, я не просил у тебя ничего, ты это сам сказал, сам пообещал, и потом такое говоришь. Если у тебя получилось, я рад искренне за тебя, но мужчина должен сдерживать свое слово. Мне не жалко отметки и не трудно извиниться, если я не прав.

Не хочешь, не хотел делать, давать код, смысл было начинать этот разговор, я просто не понимаю тебя.

[Дмитрий]

Historian111, если честно, то мне плевать и на отметку и на извинения. В ответе я сразу дал решение, что надо использовать. Но вместо того, чтобы попробовать решить задачу Вы начали истерить и доказывать то чего не знаете. Даже ни малейшей попытки решить задачу, ни строчки кода...
Даже после того, как я начал настаивать на том, что это можно решить при помощи встроенных виджетов.
В итоге я сделал пример и показал, какой html получается и прикрепил gif-ку, чтобы было видно, что класс для активного элемента присваивается. Css классы я конечно же взял из Вашего примера, потому что их надо указывать в виджете.
Но и после этого опять же никакой попытки решить задачу с Вашей стороны....
С таким подходом помогать, а тем более давать готовое решение нет никакого желания...
А готовые решения есть на fl.ru

[Historian111]

slo_nik, Ты даже не знаешь, что я делал, делаю, а говоришь подобное. Если думаешь что не пробовал, пробовал. Получилось то, что я говорил выше.

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

И опять же, за слова ты не ответил свои, а это о многом говорить, переложил все на меня.

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

Я не виноват, что ты не можете помочь, а навязываешь без доказательств свое мнение. Тут проблема не во мне, а в тебе. Пойми, какой учитель, такие и ученики, и никак иначе. То что я точно знаю о себе, я всегда стараюсь сделать все, с желанием подходя к каждому вопросу. Если ты это не увидел, я тоже не виноват.

Опять же, ты поступил очень плохо с человеком, начав оскорблять, закончив унижением и обманом. Как минимум, нормальные люди так не поступают. Еще и с требованиями заплатить, за то, что ты обещал дать, сам обещал, я не просил.

[Historian111]

slo_nik, Единственное, что приходит и приходило в голову, для решения этой задачи, это создание собственного виджета....

[Дмитрий]

Historian111, удачи в создании собственного виджета...
Да, блин!!! ОТКРОЙТЕ ИСХОДНЫЙ КОД ВИДЖЕТА МЕНЮ В ШАБЛОНЕ, КОТОРЫЙ СТАВИТ YII2 ПРИ УСТАНОВКЕ ПРИЛОЖЕНИЯ!!!
ТАМ НЕ ТОЛЬКО СТРУКТУРА ПОХОЖА, НО И ЧАСТИЧНО КЛАССЫ CSS СОВПАДАЮТ!!!
НЕУЖЕЛИ ЭТО ТАК ТРУДНО? ОБЯЗАТЕЛЬНО ЧУШЬ ГОРОДИТЬ УЖЕ В ПОД СОТНЮ КОММЕНТАРИЕВ?!!

[Historian111]

slo_nik, Так я понимаю как воспользоваться виджетом этим, без выборки из бд. Я же не совсем тупой. Я частично понял все, что написал ты мне. Но я не понимаю, как это работает с 2-ми дивами и 2-мя таблицами из бд.

Какую чушь я пишу то? Если логически я понять не могу. Нет подходящих примеров, я все перерыл в гугле, НЕТУ. Это просто для тех, кто знает, кому обьяснили, кто понял сам и т.д, я не понимаю

[Дмитрий]

Historian111, во-первых, на брудершафт мы не пили. Во-вторых, я старше, так что будьте любезны...
В-третьих, делаете следующее:
1) Устанавливаете с нуля yii2 basic
2) Открываете views/layouts/main.php
3) Смотрите, как там написано верхнее меню при помощи yii\bootstrap\NavBar и yii\bootstrap\Nav
4) Комментируете это меню
5) Пишите, опираясь на пример из шаблона, своё меню
6) Настраиваете стили и вывод опираясь на статьи в документации
а) https://www.yiiframework.com/extension/yiisoft/yii...
б) https://www.yiiframework.com/extension/yiisoft/yii...
7) Показываете свой код верхнего меню.
8) Описываете проблемы, с которыми столкнулись в написании этого меню
Пока всё. И только после этого я, возможно, покажу готовое решение.
Подсказки:
1) Пункты меню получить в статическом методе(можно публичный, если позволяет.надо будет создать в модели), который будет возвращать массив пунктов меню в нужной структуре.
2) Создать статический метод (можно публичный, если позволяет), который будет возвращать изображение логотипа из базы.
3) В документации прочитать о методах, которые позволяют подменить стандартные css классы для виджетов.
ВСЁ!!! После того, как я увижу результат Ваших изысканий, возможно я покажу готовое решение.

[Historian111]

slo_nik, Ты думаешь я реально тупой? Я могу сделать статичное меню, прописывая в ручную все. Зачем мне делать все эти движения? Я знаю как добавить лого, меню, но не динамичное .

И повторюсь, я не прошу готовое решение, я хочу пример, нормальный, пусть и из гугла, но пример именно использования БД а не докмусорки, где написана шляпа в примерах, которая практически бесполезна

Прикалывает тебя издеваться над людьми, не пойму... что за комьюнити такое мерзкое....

[Дмитрий]

Historian111, всё, разговор окончен.