Растягиваем основное меню на ширину контента

вт, 02.04.2013 13:10 :: olk

Иногда необходимо «растянуть» основное горизонтальное меню сайта на всю ширину основного контента. Предлагаю решение при помощи небольшого javascript-а. 1. Для начала нам надо немного преобразовать вывод меню, для того что бы в дальнейшем можно было его легче обработать скриптом (нам необходимо ввести дополнительный признак «глубины» пункта меню, что бы обработать только самый верхний уровень меню. Для этого в своей теме в файле template.php создаем (или переопределяем) функцию ВАША_ТЕМА_menu_link__main_menu(array $variables) У меня получилась функция со следующим содержанием

  1. /*
  2.  * Здесь olkgrid - имя моей темы
  3.  */
  4. function olkgrid_menu_link__main_menu(array $variables) {
  5.     $element = $variables['element'];
  6.     $sub_menu = '';
  7.     $element['#attributes']['class'][] = 'menu-' . $element['#original_link']['mlid'];
  8.     $element['#attributes']['class'][] = 'depth-' . $element['#original_link']['depth'];
  9.  
  10.     static $item_cnt = 0;
  11.     if($element['#original_link']['depth']>1){
  12.         $element['#attributes']['class'][] = 'item-'.(++$item_cnt);
  13.     }
  14.     if ($element['#below']) {
  15.         $sub_menu = drupal_render($element['#below']);
  16.         $element['#attributes']['class'][] = 'dropdown';
  17.     }
  18.     $output = l($element['#title'] , $element['#href'], $element['#localized_options']);
  19.     return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . '<span class="suffix">'."\n";
  20. }

В данном коде нам важно, что для каждого уровня меню мы присваиваем класс depth-N — соответствующий уровню пункта меню.

Далее сам скрипт растягивания, мы предполагаем, что меню построено (в плане темизации) корректно, и вся ширина пункта меню задается непосредственно для ссылки (т.е. тэг <a>)

Пояснения к скрипту navigation-content — это id контейнера меню по ширине равный ширине контента остальное в комментариях скрипта

  1. /**
  2.  *  @file olkgrid.js
  3.  */
  4.  
  5. (function ($) {
  6.  
  7.     Drupal.behaviors.StretchMainMenu = {
  8.         attach: function (context, settings) {
  9.             // получим ширину контйнера
  10.             var n_width=parseInt($('#navigation-content').width());
  11.             var cnt=0;  // счетчик пунктов меню 1-го уровня
  12.             var w = 0;  // в этой переменной будем считать ширину занимаемую меню
  13.             var delta = 0;
  14.             // пройдемся по всем пунктам меню 1-го уровня
  15.             $('#navigation-content li.depth-1 > a').each(function(index) {
  16.                     // вычисляем ширину текущего меню и количество пунктов меню 1-го уровня
  17.                     w += parseInt($(this).width())+
  18.                             parseInt($(this).css("padding-left"))+parseInt($(this).css("padding-right"))+
  19.                             parseInt($(this).css("margin-left"))+parseInt($(this).css("margin-right"))+
  20.                             parseInt($(this).css("border-left-width"))+parseInt($(this).css("border-right-width"));
  21.                     cnt++;
  22.             }
  23.             )
  24.             // если ширина текущего меню меньше ширины контейнера то будем растягивать
  25.             if(n_width>w) {
  26.                   // дельта если не делиться на ровно
  27.                 delta = (n_width-w) % (cnt);
  28.                  // сколько добавить к каждому пункту
  29.                 var add_padding = (n_width-w-delta) / (cnt);
  30.                  // добавляем отступ (padding) к каждому пункту меню
  31.             $('#navigation-content li.depth-1 > a').each(function(index) {
  32.                 var cur_padding_left=parseInt($(this).css("padding-left"))+parseInt(add_padding/2);
  33.                 var cur_padding_right=parseInt($(this).css("padding-right"))+parseInt(add_padding/2)+(add_padding % 2);
  34.                 $(this).css("padding-left",cur_padding_left+'px');
  35.                 $(this).css("padding-right",cur_padding_right+'px');
  36.             }
  37.             )
  38.                 // если есть дельта, то добавим к первому и последнему пункту соответствующий отступ
  39.                 if(delta>0) {
  40.                 var first_padding_left=parseInt($('#navigation-content li.first.depth-1 > a').css("padding-left"))+parseInt(delta/2);
  41.                 var last_padding_right=parseInt($('#navigation-content li.last.depth-1 > a').css("padding-right"))+parseInt(delta/2)+(delta % 2);
  42.                 $('#navigation-content li.first.depth-1 > a').css("padding-left",first_padding_left+'px');
  43.                 $('#navigation-content li.first.depth-1 > a').css("padding-right",last_padding_right+'px');
  44.                  }
  45.  
  46.             }
  47.  
  48.         }
  49.     };
  50.  
  51. })(jQuery);
Меню до обработки До

Меню после обработки После

Комментарии

Прикольно

Добавить комментарий
« Добавить комментарий
» Добавить комментарий