• Home
  • Контакты
  • Карта сайта
www.wantweb.ru wantweb
Навигация Want Web

Модуль Anchor_menu

13 октября 2014

О модуле

Формально, это не совсем меню, скорее список ссылок (якорей) на соответствующие фрагменты страницы. При этом переход на другие страницы не осуществляется.

Модуль может использовать встроенные возможности Joomla (Bootstrap), в частности скрипты Affix и ScrollSpy., управляющие фиксацией модуля и отслеживанием текущего положения на странице.

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

Якоря для выбранных фрагментов контента (для заголовков) создаются автоматически, так же как и цели ссылок Анкор-меню.

Область применения

Иногда необходимо разместить на странице блок текста большого объема. Например справочная информация.

Прокручивание страницы, высотой в 20 экранов, в поисках желанных слов, может превратиться в достаточно утомительное занятие. Представьте себе, что посетитель пришел на ваш сайт из поисковой системы по ключевому запросу. Нужная ему информация находится, условно, на 17 экране.

Гораздо удобнее, если список основных разделов материала будет размещен в боковой колонке и не уедет вместе со всем содержимым при прокрутке. Это значительно облегчит быструю навигацию к нужному разделу. При этом подсвеченный пункт списка поможет пользователю определить текущее положение на странице.

Технические требования

  • Версия Joomla 3.2 и выше, потому что некоторые возможности, используемые в работе модуля, были добавлены начиная с версии 3.2
  • Подключение в шаблоне jQuery 1.8.x и выше

Основные настройки

Тег закладки

Обычно раздел начинается с заголовка, поэтому логично в качестве закладки выбрать именно его. В настройке нужно указать тег заголовка h1-h6 для которых будут автоматически созданы якоря

Класс контента

container-class

Для чего нужно указать класс контента, и что это за класс. Простой пример.

Допустим, основные текстовые разделы на странице начинаются с заголовка h3, и им будут присвоены соответствующие id. Но эти же заголовки могут присутствовать не только в основном контенте! Например, заголовки модулей ...

Чтобы локализовать только необходимые нам теги h3, нужно указать класс родительского контейнера. Если это стандартный шаблон Joomla, то можно выбрать предустановленные классы для компонента com_content:

  • item-page для страницы материала
  • blog для страницы блога категории
  • blog-featured для страницы избранных материалов

Если у вас шаблон сторонних разработчиков или установлен другой компонент - Класс контента необходимо указать самостоятельно.

Как вариант, можно задать свой класс в настройках пункта меню:
Пункт меню -> Параметры отображения страницы -> CSS-класс страницы

И далее, в настройке указать его.

Если класс не указан, то родительским контейнером будет body.

Префикс ID

id генерируются из префикса + порядковый номер заголовка, например: id="anchorList-2"

Вы можете оставить префикс по умолчанию или назначить свой.

Анкор-лист

Основная настройка. Здесь создается список Заголовков. Форма открывается нажатием кнопки Создать | Редактировать.

anchor-list-3

В открывшемся модальном окне нужно заполнить поля Текст ссылки. Сами ссылки на выбранные фрагменты (заголовки)- будут сгенерированы автоматически.

После заполнения полей нажмите кнопку Сохранить (желательно не пользоваться кнопкой Отменить - это может вызвать проблему, о которой, ниже в разделе Возможные проблемы).

Важно!

Нажатие кнопки Сохранить не приводит к сохранению данных! Они сохраняются только в памяти компьютера, и если выйти из модуля, нажав Закрыть - изменения в Анкор-листе будут потеряны.

Изменения сохраняются только при сохранении модуля!

Скрипты

Если в вашем шаблоне подключен фреймвок Bootstrap, то модуль может использовать его стандартные скрипты, и нужно выбрать настройку Bootstrap (по умолчанию).

Если нет - выберите Из модуля. Тогда необходимые скрипты будут загружаться из модуля. 

Предупреждение!

Если выбрано Из модуля - предустановленные доп.классы работать не будут, и вам придется задавать все стили оформления самостоятельно. 

Доп. классы меню

adv-classes

Данная настройка позволяет выбрать для Анкор-листа один (группу) из предустановленных css-классов Bootstrap.

Кроме того можно указать собственный класс, или через пробел добавить его к стандартному. Стили нужно будет прописать самостоятельно.

Более подробно о работе со стилями - в разделе Рекомендации по Css.

Стоп-меню

По умолчанию меню фиксируется у верхнего края окна. Если по каким-либо причинам вам хочется, чтобы оно не прилипало к верхнему краю, а оставалось ниже, с помощью этой настройки модуль фиксируется ниже.

Значение указывается в пикселях, саму ед.изм. (px) указывать не надо, только цифры.

Стоп-анкор

При выборе пункта меню контент прокручивается и останавливается вверху страницы. Данная настройка устанавливает отступ контента от верхнего края.

Лучше не использовать эту настройку и оставить значение по умолчанию - 0. Я добавил ее только для того, чтобы заголовок очередного фрагмента не уезжал под фиксированную верхнюю навигационную панель. Побочным эффектом является то, что активный пункт меню соответствует предыдущему фрагменту контента ... 

Выкрутился из этого положения, добавив заголовкам margin-top, равный величине настройки (об этом - ниже).

Время анимации

Задает скорость прокрутки страницы при выборе ссылки в меню. Указывать в миллисекундах (без ед.изм.)

Некоторые особенности настройки

Рассмотрим те настройки, которые присутствуют в большинстве стандартных модулей. В Anchor-menu некоторые из них могут работать несколько по другому.

Стиль модуля

При выборе любого стиля, кроме none, модуль помещается в дополнительный контейнер. В нашем случае это имеет смысл, если контейнер должен явно задавать ширину модуля.

Во всех остальных случая при прокрутке страницы модуль меню остановится, а оболочка с заголовком, фоном и прочими стилями оформления поедут дальше ...

Поэтому, в большинстве случаев, предпочтительнее задать Стиль модуля - none, а дополнительное оформление, как и в стандартном модуле, задавать с помощью Суффикса Css-класса модуля.

Суффикс css-класса модуля

Обычно суффикс добавляется к классу moduletable внешнего контейнера. В Anchor-menu есть 2 варианта использования суффикса:

  1. Если задан любой стиль кроме none, то все как обычно.
  2. Если задан none, то указанный класс будет добавляться к основному контейнеру модуля! Т.е. все стили зафиксируются и никуда не уедут.
Совет

Не нужно, как это часто делается в первом случае, добавлять перед суффиксом разделитель, типа тире, нижнее подчеркивание или пробел! Пробел вставляется автоматически.

Привязка к пунктами меню

Так как модуль предназначен для навигации по странице отдельного материала или блога категоиии, то целесообразно привязывать его только к ней.

На остальных, названия пунктов меню не соответствуют выбранным фрагментам для которых по прежнему будут генерироваться id, модуль становится бесполезным.

Показывать заголовок

Как и в случае с параметром Суффикс css-класса модуля, при установленном Стиле модуля - none, заголовок будет выводится в основном контейнере. Во всех остальных случаях - снаружи и уезжать вместе с контентом за границу экрана.

Возможные проблемы

Баг Opera

Основная проблема у нас, на сегодняшний день - браузер Opera ...

Если в css-стиле вашего шаблона прописано стилевое правило:

body { height: 100%; }

то модуль будет отображаться не совсем корректно.

Он по прежнему будет работать, фиксироваться в указанном положении, переходить по ссылкам, но  активной всегда будет самая последняя ссылка в Анкор-листе!

Как это можно исправить?

Опыт работы с браузерами IE 6-7, научил обращаться с ними как ... умственно-ограниченными)) - вроде бы могут, но не все.

Поэтому самый простой выход - сделать активные ссылки такими же, как и обычные. Да, это создаст некоторые неудобства для любителей Оперы, но как и в случае с IE, с этим придется мириться ...

/* Фикс для Opera */
 
_:-o-prefocus, .anchor_menu .nav .active a {
    background:transparent;  /* фон активной ссылки*/
    color:#0088CC;           /* цвет активной ссылки */
}

Примечания. Если вы определили собственные css-стили, то укажите свои значения.

В остальных браузерах данная проблема не возникает.

Баг Joomla 3.3

Этот досадный баг возникает в админке, при создании/редактировании Анкор-листа.

Если в модальном окне формы редактирования нажать кнопку Отменить (Cancel) - то окно закроется, а при следующем открытии вы увидите, что все записи клонировались! Я не считал, удваивается их количество или возводится в квадрат, но при 3-х кратном повторе эксперимента на локальном компьютере он завис намертво ...

Варианты действий:

  1. Не пользоваться кнопкой Отмена. Внеся соответствующие правки закрывать форму только кнопкой Сохранить (Save).
  2. Внести исправления в файл
    media/system/js/repeatable.js,
    который отвечает за вывод формы. Это хак ядра Joomla! и при очередном обновлении изменения могут быть утеряны (я искренне надеюсь, что в следующей версии баг будет исправлен).

Нужно открыть указанный файл, найти и заменить код:

/*  для j3.2  (источник: 
** http://joomla.stackexchange.com/questions/895/how-to-create-a-repeatable-xml-form-field-feature" */
  origContent = getTrs().clone();
// заменить на:
  origContent = getTrs();
 
// для j3.3.3 и, возможно, некоторых более ранних версий 
  a=getTrs().clone()} 
//замена на 
  a=getTrs();}

Рекомендации по CSS

Оформление блока модуля

Рассмотрим на примере стандартного шаблона Protostar, включенного в установочный пакет Joomla!

Все модули в боковой колонке оформляются классом well. Ни что не мешает нам сделать то же самое. В поле Суффикс css-класса модуля задаем well и на выходе получаем блок того же стиля:

<div class="anchor-menu well"> ... </div>

Если использовать собственный класс, например my_class, то стили для него прописываются так:

.anchor-menu.my_class { ...}

Оформление списка и отдельных пунктов используются классы, задаваемые в настройке Доп.пункты меню.

Если не использовать предустановленные, а ввести произвольное имя класса, например Test, то код оформления может выглядеть так:

/* Стили для элемента списка */
.anchor-menu .nav.Test li a { ... }
 
/* Стили для активного пункта меню */
.anchor-menu .nav.Test .active a { ... }

Точно так же можно переопределять стандартные классы. Все стили нужно прописывать в css-файле своего шаблона.

Немного об адаптивной верстке.

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

/* Отключение адаптивного режима для расширений менее 800px */
@media (max-width:767px){
    .anchor_menu.affix {
        position: static!important;
    }
}

Мобильная версия модуля планируется в течении месяца.

Скачать модуль

  • Модуль устанавливается стандартным способом из менеджера расширений.
  • При обновлении до новой версии, установите модуль через менеджер расширений. Файлы перезапишутся, настройки - не изменятся. (Желательно после обновления открыть модуль и пересохранить, если появились новые настройки - предварительно установить необходимые параметры.
  • Для удаления модуля нужно выполнить несколько шагов:
    Менеджер расширений -> Управление -> фильтр Модули -> отметить модуль -> Деинсталлировать
Внимание!

Если вы уже установили модуль, то при обновлении до версии 1.3.1 потребуется перенастройка модуля.

Скачать модуль mod_anchor_menu_v131.zip (11.6Kb) Загрузка

Вопросы, замечания

Если у вас возникнут вопросы или замечания по работе модуля - можете задавать их здесь, или отправить по почте.
Буду благодарен за любую информации о недочетах, а также пожелания по оформлению и настройкам модуля.

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

⇧