Xpoint
   [напомнить пароль]

Как реализовать указатель в меню

Метки: [без меток]
2008-04-10 12:56:23 [обр] kim[досье]

Собственно есть меню:
http://kim-evgene.ucoz.ru/Temp/menu.gif

Надо сделать чтобы указатель (линия) был только до активного пункта,
т.е. последующие пункты после активного должны быть уже без линии

спустя 1 час 16 минут [обр] kim[досье]

Я думаю это легко сделать через ява скрипт, только сам его совсем не знаю,

к примеру,
есть активный пункт меню с классом "this",
скрипт проверяет, если у элемента класс не "this" то делает бордер слева,
если "this" то у последующих пунктов, нет бордера,

Подскажите, пожалуйста, кто знает, очень нужно

спустя 32 минуты [обр] Евгений Петров(172/1055)[досье]
kim[досье]
К верстке это, действительно, имеет совсем удаленное отношение.
Что касается скрипта - берется ul, семейство li в этом списке и это семейство перебирается.
Пока не встретится активный li (по каким признакам - Вам виднее) всем li (включая активный), добавляется некий класс, отвечающий за появление левого border.
Оставшимся li в этом же цикле этот класс убираем.
спустя 18 минут [обр] kim[досье]
Да, саму суть я понимаю, только реализовать не могу,
подскажите кодом, пожалуйста
спустя 2 часа 23 минуты [обр] Евгений Петров(172/1055)[досье]
спустя 7 часов [обр] kim[досье]

Большущее пребольшущее Вам спасибо,
есть же хорошие люди, который могут помочь :)

Вот только кода бы поменьше,
я думаю это можно сделать так:

есть активный пункт меню с классом "this",
скрипт проверяет, если у элемента класс не "this" то делает бордер слева,
если "this" то так же делает бордер и + увеличивает какую-то специально созданную переменную на 1 (которая была равна до этого к примеру 0, и так же до этого проверялась в скрипте),
и дальше скрипт уже видя что переменная равна "1" не делает бордер

Возможно такое реализовать через ява скрипт?

спустя 1 минуту [обр] kim[досье]
Вот html код меню:
      <ul class="side_nav">
         <li><a href="#">О преимуществах</a></li>
         <li class="active"><a href="#">Битиплекс</a>
            <ul class="sub_menu">
               <li><a href="#">О препарате</a></li>
               <li><a href="#">Свидетельство о регистрации</a></li>
               <li><a href="#">Санитарно-эпидемиологоческое заключение</a></li>
               <li id="this"><a href="#">Свидетельство на товарный знак</a></li>
               <li><a href="#">Рекомендации по применению препарата</a></li>
            </ul>   
         </li>
         <li><a href="#">Бактрил</a></li>
         <li><a href="#">Баксис</a></li>
         <li><a href="#">Триходермин Нова</a></li>
      </ul>
спустя 52 минуты [обр] kim[досье]
И ссылка на код (+CSS)
http://kim-evgene.ucoz.ru/Temp/Test.html
спустя 7 часов [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]

А без JS разве никак?

li { list-style: none; }
li.active { font-weight: bold; }
.sub_menu { height: 100%; overflow: hidden; font-weight: normal; }
.sub_menu li { padding: 100em 0 0 2em; margin-top: -100em; }
.sub_menu li#this { border-left: .2em solid green; padding-left: 1.8em; font-weight: bold; }

Вроде ж получается...

спустя 7 часов [обр] kim[досье]
УХТЫ!! вот это классно придумано, большое Вам спасибо
Powered by POEM™ Engine Copyright © 2002-2005