We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2171
    • 77 Posts
    Подскажите, может делал кто меню с иконками? Как это можно реализовать?

    Заранее благодарен!
      Сообщество MODx-cms.ru - новое качество.
    • Если Вы подскажете, что такое в Вашем понимании меню с иконками, будем рады помочь smiley
        Разработка сайтов и программных модулей на MODX.
        Опыт работы на MODx с 2005 года. Высокое качество.
        Компания Baltic Design Colors: http://www.bdcolors.ru.
        • 33694
        • 742 Posts
        Уже обсуждалось не однократно. Но т.к. те обсжудения я сай найти так и не смог smiley то решил написать, в другой раз кому-то будет легче найти.


        Способ №1:
        В шаблоне (чанке) WayFinder’a &rowTpl используйте такую конструкцию:
        <li[+wf.id+][+wf.classes+]>
        <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>
        <img src=[(base_url)]assets/images/icon_[+wf.docid+].gif />[+wf.linktext+]</a>
        [+wf.wrapper+]
        </li>
        По указанному пути складываете иконки и меню будет с ними. Способ хорошо подходит когда пунктов меню достаточно много и они могут достаточно часто меняться. Просто бросаете нужные "иконки" в указанную папку, и они автоматом подцепяться от туда.


        Способ №2:
        В шаблоне (чанке) WayFinder’a используете такую конструкцию:
        <li[+wf.id+][+wf.classes+] id="menu_icon_[+wf.docid+]">
        <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>
        [+wf.wrapper+]
        </li>

        А нужную иконку к нужному пункту меню подвешиваете уже в стилях, через его id. Например, для пункта указывающего на страницу с id=24, так:
        li#menu_icon_24 {
        	padding-left: 18px;
        	backgrounf: url("images/my_super_icon_blablabla.gif") left center no-repeat;
        }

        Способ более сложный, но награда за это — чистый и лёгкий код на выходе. К тому же,  украсть ваши иконки будет сложнее smiley
        Но каждый раз когда будет меню будет меняться, нужно будет обновлять таблицу стилей (хотя это можно и обойти, но оно того не стоит...), поэтому данный способ хорошо подходит  только для мелких и средних меню.


        P.S. Немного исхитрившись (или допилив снипет) во в обоих способах вместо id документов, можно использовать их alias’ы, что согласитесь, придаст более наглядный вид именам файлов или стилям. Но это всё уже для самостоятельного изучения. smiley


        * пора FAQ русское составлять, это будет первый вопрос
          • 2171
          • 77 Posts
          Огромное спасибо за абсолютно исчерпывающий ответ! smiley
            Сообщество MODx-cms.ru - новое качество.
            • 5106
            • 16 Posts
            [e]Bu$ter, спасибо за ответ.
            Вопрос такой возникал, но решил сам. оказывается применил первый способ smiley
              • 25780
              • 15 Posts
              Ïîâòîðèë ïåðâûé ñïîñîá.  icon_[+wf.id+].gif íè÷åãî íå ïîäñòàâëÿëîñü. Âåçäå âûâîäèëî icon_.gif.

              Ïîìåíÿë â ñòðî÷êå:

              <img src=[(base_url)]assets/images/icon_[+wf.id+].gif />[+wf.linktext+]</a>

              ìåòêó [+wf.id+] íà [+wf.docid+] - òàê çàðàáîòàëî.

              Õî÷ó ñïðîñèòü, ýòî îïå÷àòêà èëè åñòü åùå êàêèå-òî ïðàâèëà î êîòîðûõ ÿ íå çíàþ

              (Âûçîâ òàêîé: [[Wayfinder? &startId=`[*id*]` &level=`1` &outerTpl=`menuicon` &rowTpl=`menu_icon`]])

                • 33694
                • 742 Posts
                Опечатка конечное! [+wf.id+] это из стилей Id... т.е. совсем не то. Хорошо, что вы заметили, и спасибо, что сообщили.

                А второй способ вообще одна сплошная ошибка с этим [+wf.id+]... — он нерабочий в принципе был! Спасибо ещё раз (ото всех, кто ещё захочет этим воспользоваться).


                Всё исправил.
                  • 5839
                  • 1 Posts
                  Спасибо,помог wink