1

Тема: Виділити активні пункти меню

Виділити активні пункти меню. Є такі пункти меню home, about, news, static, vacancy, contacts, factory, investor, tender.
Пункт about ділиться на підпункти:
Підсвічуються активним тільки пункти / static / about /, при натисканні на інші підпункти меню виділяються активним зовсім інший пункт меню static, він в свою чергу також підпункти вони виділяються правильно.

<li>
                               <a href='/static/about/'>....</a>
                               <ul>
                                   <li><a href='/static/about/' class='shift'>.....</a></li>
                                   <li><a href='/static/history/' class='shift'>....</a></li> 
                                   <li><a href='/static/management/' class='shift'>....</a></li>
                                   <li><a href='/static/csr/' class='shift'>.....</a></li>
                               </ul>
                           </li>

Також є пункт меню <li>
<a href='/static/tender/'> Закупівлі та тендери </a>
</ Li>
який так само при активності виділяє меню static.


Знайшов код який на мою думку відповідає за виділення активних пунктів, правда я не розбираюся в ньому. Прошу допомоги, як зробити щоб подсвечивались правильні пункт.

function menu_action()
{
   var menu = new Array('','about','news','static','vacancy','contacts','factory','investor','tender');
    
   url = document.location.href;
   if(url.indexOf('/') != -1)
   {
      url = url.substring(7);
      url = url.substring(parseInt(url.indexOf('/')) + 1);
   }
   if(url == '')
   {
      $('.menu .main > li:eq(0) > a').addClass('hover');
      return;
   }
   cnt = menu.length;
   for(i = 1; i < cnt; i++)
   {
      if(url.indexOf(menu[i])!= -1)
      {
         if(i < 6)
         {
            $('.menu .main > li:eq(' + i + ') > a').addClass('hover');
         }
         else
         {
            i = i - 6;
            $('.menu .more > li:eq(' + i + ') > a').addClass('hover');
         }
         return;
      }
   }
}

2

Re: Виділити активні пункти меню

Будь ласка, розкрийте завдання трохи детальніше. Зокрема, "Знайшов код який на мою думку відповідає..." - тобто код не ваш? А чий? Чому ви не можете спитати в автора? Чому не можна додати клас в PHP?
Код, м'яко кажучи, лайновий - 90% javascript-у тут взагалі не потрібно. Але без відповідей на питання вище боюся взагалі припускати, що воно таке і як виправити.

Подякували: 221VOLT, leofun012

3 Востаннє редагувалося koala (08.06.2016 11:27:25)

Re: Виділити активні пункти меню

Автор цього твору намагався імітувати, як я розумію, приблизно ось це:

$("a[href='"+url+"']").addClass('hover');

трохи тільки значення url підігнати треба.

Подякували: 221VOLT1

4

Re: Виділити активні пункти меню

Вибачаюсь, даю трошки деталей.

Знайшов код який на мою думку відповідає..." - тобто код не ваш?

Не мій.

 А чий?

Розробників сайту, я лише його адмініструю.

Чому ви не можете спитати в автора?

Не має такої можливості.

Чому не можна додати клас в PHP?

Як саме?

Код, м'яко кажучи, лайновий - 90% javascript-у тут взагалі не потрібно

Підкажіть будь ласка як зробити правильно?

Все почалось з того що я добавив один пункт меню(з підменю), та поміняв деякі пункти місцями. І при активності пункти що змінились перестали підсвічувались, або підсвічує пункти що стали на його місце.

І тут я надибав цей javascript. І тут я зрозумів що вони підсвічуються почергово. І тепер мені потрібно зрозуміти як мені підсвітити новіпідпункти меню. Якось так (((

5

Re: Виділити активні пункти меню

Можете дати посилання на сайт?

6 Востаннє редагувалося mutio43 (08.06.2016 13:11:34)

Re: Виділити активні пункти меню

Можете дати посилання на сайт?

Не можу. Сайт доступний тільки з внутрішньої мережі компанії.

7

Re: Виділити активні пункти меню

Всі елементи меню знаходяться всередені елементу з класом .menu? (зверніть увагу - якби ви навели більше коду, не треба було б питати це).
Поки що, наскільки я розумію, треба зробити

function menu_action()
{
  $(".menu a[href='"+window.location.pathname+"']").addClass('hover');
}

але інформації замало.

Подякували: mutio43, 221VOLT, leofun013

8

Re: Виділити активні пункти меню

     <div class='menu'>
             <a class='logo' href='portal' title='Наш портал'></a>
             <div>
                  <div>
                       <ul class='main'>
                           <li>
                               <a href='/'>Головна</a>
                           </li>
                           <li>
                               <a href='/static/about/'>Про нас</a>
                               <ul>
                                   <li><a href='/static/about/' class='shift'>Про компанію</a></li>
                                   <li><a href='/static/history/' class='shift'>Історія</a></li> 
                                   <li><a href='/static/management/' class='shift'>Менеджмент</a></li>
                                   <li><a href='/static/csr/' class='shift'>Соціальна відповідальність</a></li>
                               </ul>
                           </li>
                           <li>
                               <a href='/news/'>Новини</a>
                           </li>
                           <li>
                                <a href='/static/a/'>Продукція</a>
                           <ul>
                                   <li><a href='/static/b/' class='shift'>1</a></li>
                                   <li><a href='/static/c/' class='shift'>2</a></li> 
                                   <li><a href='/static/d/' class='shift'>3</a></li>  
                               </ul>
                           </li>
                           <li>
                               <a href='/vacancy/'>Кар’єра</a>
                           </li>
                           <li>
                               <a href='/contacts/'>Контакти</a>
                           </li>
                       </ul>
                  </div>
             </div>
             <ul class='more'>
                 <li>
                      <a href='/test1/'>testt1</a>
                 </li>
                 <li>
                     <a href='/test2/'>test2</a>
                 </li>
                 <li>
                     <a href='/static/test3/'>test3</a>
                 </li>
             </ul>
        </div>
function menu_action()
{
  $(".menu a[href='"+window.location.pathname+"']").addClass('hover');
}

Працює, тільки не виділяє елементи із списку <ul>

9 Востаннє редагувалося koala (08.06.2016 16:33:08)

Re: Виділити активні пункти меню

Єдиний елемент < a > не в списку ul з наведених - це у другому рядку. Воно працює тільки для одного елемента?

10

Re: Виділити активні пункти меню

koala написав:

Єдиний елемент < a > не в списку ul з наведених - це у другому рядку. Воно працює тільки для одного елемента?

Вибачайте, туплю страншо. Працює, тільки не виділяє це: 13-15 рядок

<li><a href='/static/history/' class='shift'>Історія</a></li> 
                                   <li><a href='/static/management/' class='shift'>Менеджмент</a></li>
                                   <li><a href='/static/csr/' class='shift'>Соціальна відповідальність</a></li>

та 24-26 рядок

<li><a href='/static/b/' class='shift'>1</a></li>
                                   <li><a href='/static/c/' class='shift'>2</a></li> 
                                   <li><a href='/static/d/' class='shift'>3</a></li>  

Все інше працює

11

Re: Виділити активні пункти меню

А адреси цих сторінок відображаються так само - .../static/c/ і т.д.?
Ну і чомусь мені здається, що там ще щось важливе в css чи інших js, але вже набридло в партизана з вами гратися.

Подякували: mutio431

12 Востаннє редагувалося mutio43 (09.06.2016 10:22:03)

Re: Виділити активні пункти меню

Ну і чомусь мені здається, що там ще щось важливе в css чи інших js, але вже набридло в партизана з вами гратися.

Партизан викритий - важливе таки знаходилось в css, добавив: і підменю також запрацювало

.wrap > .menu ul.main > li > ul > li > a.hover, .wrap > .menu ul.main > li > ul > li > a:hover
{
   background: url('../img/bg_menu_hover.png');
}

Дякую за javascript

Подякували: koala1

13 Востаннє редагувалося koala (09.06.2016 10:33:10)

Re: Виділити активні пункти меню

А вам точно треба всі ланцюжки вказувати? У вас є інший елемент .menu в файлі? В меню можуть бути посилання, крім його пунктів? Якщо ні, то

.menu a.hover, .menu a:hover
{
       background: url('../img/bg_menu_hover.png');
}

А ще краще клас hover замінити на selected чи current, щоб не плутати.

Подякували: mutio43, leofun012