We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 13593
    • 8 Posts
    Здравствуйте!
    Подскажите пожалуйста. Имеется вертикальное меню. Как сделать чтобы выбранный текущий раздел подсвечивался другим цветом? Подозреваю, что нужно определить текущей id страницы и каким-то образом связать его с CSS (или все намного проще??)
    Буду оч. признательна, если вы подскажете хотя бы общий принцип работы этого эффекта.
      • 22301
      • 1,084 Posts
      Привет!

      чтобы сообщникам не приходилось гадать, что да как, укажи, плиз, каким сниппетом меню строишь?
        [img]http://jurist-info.ru/pic/rrr.jpg[/img]

        Безжалостный пияр!
        Artima -- неуч!
        Осторожно: преступная локализация -- modx-cms.ru
        Баштанник Андрей -- мегапрограммер из Белоруссии и поедатель говна, очень критично настроенный молодой человек!

        Дисклеймер для общительных: даю сам себе право транслировать в открытый эфир содержание лички, just for fun
        • 785
        • 2,113 Posts
        Чем меню сделано? Если Wayfinder и все сделано стандартно, то для активного элемента там генерируется код <li class="active"> - дальше все через CSS.
          Создание сайтов на MODx, поддержка сайтов, поисковая оптимизация, программирование, копирайтинг
          Статьи о MODx, регулярно новые публикации
          • 13593
          • 8 Posts
          openagate
          AKots

          Нет, не Wayfinder - пишу вручную в шаблоне. Сложность в том что для каждого пункта меню состояние active РАЗНОЕ (разным цветом) плюс там вместо буллета картинка, которая в состоянии "active" тоже должна замещаться (((
            • 785
            • 2,113 Posts
            Ни и при чем тут MODx? Если меню делается вручную, то и оформлять его тоже надо вручную – через CSS.
            Если все элементы разные, просто в CSS будет много строк, но принципиальных сложностей никаких нет.
            А вообще рекомендую посмотреть Wayfinder с параметром &rowIdPrefix – может и не придется ничего вручную делать, только CSS описать.
              Создание сайтов на MODx, поддержка сайтов, поисковая оптимизация, программирование, копирайтинг
              Статьи о MODx, регулярно новые публикации
              • 22301
              • 1,084 Posts
              Jarvi, это ты зря, что пишешь ручками. я привереда ещё тот, и из сообщников, наверное, позже всех начал WayFinder юзать (я про старожЫлов:)). Так вот, скепсис быстро развеялся, 99% фантазий реализуемо с помощью этого сниппета, надо только документацию изучить.

              Лучше кинь пример, если есть возможность, или изложи, что хочется, сообщники тебе подскажут, как такое реализовать на WF, и с CSS помогут.
                [img]http://jurist-info.ru/pic/rrr.jpg[/img]

                Безжалостный пияр!
                Artima -- неуч!
                Осторожно: преступная локализация -- modx-cms.ru
                Баштанник Андрей -- мегапрограммер из Белоруссии и поедатель говна, очень критично настроенный молодой человек!

                Дисклеймер для общительных: даю сам себе право транслировать в открытый эфир содержание лички, just for fun
                • 13593
                • 8 Posts
                AKots
                ТОЛЬКо через css ? я просто сначала думала что придется с id страниц мучиться. Кажется, я нашла пример для ссs, но это будет "кривоватое" решение. Спасибо за указание на &rowIdPrefix , прочту.

                openagate
                Честно говоря не представляю как это на WF сделать, потому и обратилась к вам )
                Сделать нужно вот что:


                Заказчик желает чтобы каждый раздел меню выглядел как "закладка", подсвечивался СВОИМ цветом, и имел СВОЮ пиктограммку слева. Я планирую поместить меню в таблицу, сделать "сдвоенные" рисунки для фона ячейки в таблице и смещать их вверх-вниз.
                <style type="text/css">
                A.rollover#current {
                background-position:
                0px /* Смещение по горизонтали */
                -40px; /* Смещение вверх по вертикали */
                }
                </style>
                
                В ссылке:
                <a href="link.html" class="rollover" id="current"></a>


                Для этого на каждой странице меню насколько я понимаю, придется писать свой стиль: #current1, #current2, #current3 и тд....    Не думаю что это самое разумное и оптимальное решение, но другого пока не вижу sad
                  • 12550
                  • 107 Posts
                  Можно не для каждой страницы писать свой стиль, а сделать 2 tv - цвет и картинка и для каждой страницы. которая должна быть в меню заполнить эти tv-параметры. А если они не заполнены то выводить стандартный цвет и картинку.
                    • 785
                    • 2,113 Posts
                    Quote from: iamask at Jan 28, 2008, 05:38 AM

                    Можно не для каждой страницы писать свой стиль, а сделать 2 tv - цвет и картинка и для каждой страницы. которая должна быть в меню заполнить эти tv-параметры.

                    И как это реализовать? Изменение картинки и цвета при наведении мыши реализуется в CSS. Так что, нужно динамически генерировать CSS? Тогда лучше сразу описать все варианты и поместить их в отдельный файл CSS. Или предлагается оформление меню сделать статическим и привязать к HTML? Это однозначно плохое решение. Или я что-то не понимаю, и предлагается иной вариант?

                    Quote from: Jarvi at Jan 28, 2008, 05:08 AM

                    Сделать нужно вот что:
                    …
                    Заказчик желает чтобы каждый раздел меню выглядел как "закладка", подсвечивался СВОИМ цветом, и имел СВОЮ пиктограммку слева.
                    …
                    Для этого на каждой странице меню насколько я понимаю, придется писать свой стиль: #current1, #current2, #current3 и тд.... Не думаю что это самое разумное и оптимальное решение, но другого пока не вижу sad
                    Лично я не совсем понял, что должно получиться, а также запутался в предлагаемых терминах. Что такое раздел меню? Это команда текущего меню, или, может быть, вложенное меню, в которое перешли из верхнего? Что такое страница? Получается, что меню расположено на нескольких страницах, и на каждой отдельной полного меню сайта нет?

                    Первое, что непонятно, нужно одноуровневое меню со ссылками на страницы, на каждой из которых свое меню следующего уровня, или иерархическое многоуровневое меню?

                    На приложенном рисунке видно одноуровневое меню, каждый элемент которого имеет уникальный рисунок (возможно и цвет). Это делается элементарно с помощью Wayfinder с параметром &rowIdPrefix и CSS. Естественно, раз элементы разные, каждый из них должен иметь уникальный ID и описан отдельной строкой в CSS, иначе никак нельзя.

                    Если каждая команда меню ведет на страницу, на которой имеется свое меню (меню раздела), которое оформляется в зависимости от конкретной страницы, тоже можно воспользоваться Wayfinder, поместив его в DIV с ID, зависящем от номера страницы (это очень просто сделать). В CSS описать, что меню внутри такого-то DIV имеет такие-то параметры.

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

                    Кстати, зачем помещать меню в таблицу? Все отлично делается и без использования табличной верстки, которая в принципе обладает рядом недостатков.
                      Создание сайтов на MODx, поддержка сайтов, поисковая оптимизация, программирование, копирайтинг
                      Статьи о MODx, регулярно новые публикации
                      • 22301
                      • 1,084 Posts
                      СРОЧНО УЧИТЬ МАТЧАСТЬ! grin

                      Все стили надо выносить в отдельный файл, а не впиперивать их на каждой странице! Как это сделать, можно найти в любом справочнике по CSS.

                      Если коротко, то на серваке создаётся текстовый файл с расширением css. например, style.css и в простейшей реализации цепляется к странице путём размещение вот такого кода в head-секции
                      <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

                      все остальное реализуется исключительно на WF и через css, даже картинки вставляются... и получается всё очень аккуратно.

                      для примера: http://jurist-info.ru -- такое меню я делал на самописном сниппете + css. Можно глянуть код. WF тогда был просто в зачаточном состоянии. Но принцЫп понятен.

                      UPD, см. что AKots изложил
                        [img]http://jurist-info.ru/pic/rrr.jpg[/img]

                        Безжалостный пияр!
                        Artima -- неуч!
                        Осторожно: преступная локализация -- modx-cms.ru
                        Баштанник Андрей -- мегапрограммер из Белоруссии и поедатель говна, очень критично настроенный молодой человек!

                        Дисклеймер для общительных: даю сам себе право транслировать в открытый эфир содержание лички, just for fun