Это мой первый пост на хабре, так что не судите строго! ;)
В моей первой статье я расскажу Вам про то, как интегрировать выпадающее (динамическое меню) в CMS S.Builder.
Пример динамического меню в действии можно посмотреть в оригинале статьи:
http://www.sbuilder.ru/article_more.php?aid=61.
К сожалению, включить JavaScript в тело сообщения здесь у меня не получилось.
Меню может быть горизонтальным или вертикальным. Это без разницы! Будет выпадать в любом случае. ;)
Я покажу как делать и такое и такое.
Я буду использовать бесплатный скрипт Ангуса Турнбала (Angus Turnbull) — FreeStyle v1.0 RC9 (http://www.twinhelix.com/). Но на сайте автора скрипта, вы можете скачать и более позднюю версию FreeStyle v1.0 RC11 (http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip).
Сточки зрения интеграции в нашу систему между релизами RC9 и RC11 разницы нет.
Я остановился на этом скрипте по следующим причинам:
Огромное спасибо Ангусу за проделанную работу!
Здесь Вы сможете найти несколько урезанную, но переведенную версию скрипта FreeStyle v1.0 RC9. Но если у вас нет проблем с английским, то вы можете скачать полную версию FreeStyle v1.0 RC11 с сайта автора — http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip.
Настраивать меню я буду на CMS S.Builder версии 4.0, но в данном случае разницы между 4.0 и 3.7 практически нет. Так что, статья будет полезна абсолютно всем, и даже тем, кто не создает сайты на базе нашей CMS.
Я буду исходить из того, что Вы уже знаете, где и как создается и настраивается обычное меню в CMS S.Builder.
Итак, приступим!
Допустим, мы имеем следующее меню в системе:
Перехожу в макеты дизайна меню:
И создаю новый макет дизайна:
Перехожу на «Уровень 1» и вставляю код в поля.
В поле «Верх» вставляю:
<UL class=menulist id=listMenuRoot>
В поле «Пункт с подпунктами» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт с подпунктами (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт без подпунктов» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Пункт без подпунктов (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Низ» закрываем список:
</UL>
<script type=«text/javascript»>
var listMenu = new FSMenu('listMenu', false, 'visibility', 'visible', 'hidden');
listMenu.cssLitClass = 'highlighted';
function animClipDown(ref, counter)
{
var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);
ref.style.clip = (counter==100?
((window.opera || navigator.userAgent.indexOf('KHTML') > -1)? '':
'rect(auto, auto, auto, auto)'):
'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');
};
function animFade(ref, counter)
{
var f = ref.filters, done = (counter==100);
if (f)
{
if (!done && ref.style.filter.indexOf(«alpha») == -1)
ref.style.filter += ' alpha(opacity=' + counter + ')';
else if (f.length && f.alpha) with (f.alpha)
{
if (done) enabled = false;
else { opacity = counter; enabled=true }
}
}
else ref.style.opacity = ref.style.MozOpacity = counter/100.1;
};
var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement('span');
arrow.appendChild(document.createTextNode('>'));
// Вы можете заменять вышеупомянутые две линии для маленького изображения стрелки…
//arrow = document.createElement('img');
//arrow.src = 'arrow.gif';
//arrow.style.borderWidth = '0';
arrow.className = 'subind';
}
addEvent(window, 'load', new Function('listMenu.activateMenu(«listMenuRoot», arrow)'));
</script>
Внимание: Строку addEvent(window, 'load', new Function('listMenu.activateMenu(«listMenuRoot», arrow)')); рекомендуемпоменять на listMenu.activateMenu(«listMenuRoot», arrow); Автор активирует выпадающее меню только при полной загрузке страницы. Т.к. мы вставили этот код после вывода меню, то необходимости в загрузке всей страницы у нас нет.
Данный скрипт работает с меню, построенном в виде списка <UL>.
Есть версия, работающая с DIV'ами, но т.к. на <UL> можно построить практически любое меню, мы не будем останавливаться на DIV версии меню.
Получаю пока первый уровень:
Рядом с закладкой «Уровень 1» есть закладка "+" нажимаю ее, чтобы добавить еще одну закладку «Уровень 2»:
В поле «Верх» вставляю:
<UL>
В поле «Пункт с подпунктами» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт с подпунктами (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт без подпунктов» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Пункт без подпунктов (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Низ» закрываем список:
</UL>
Продолжая таким образом настраиваю нужное количество уровней.
Внимание: если дизайн уровня не задан, то он будет строиться на основе дизайна предыдущего уровня. Следовательно, в нашем случает достаточно настроить два уровня – Уровень1 и Уровень2.
Теперь мне нужно разместить это меню в макете дизайна страниц. Делается это следующим образом:
Для этого я перехожу к макетам дизайна сайта «Меню разработчика» -> «Макеты дизайна сайта»:
Открываем на редактирование нужный макет, щелкнув по нему правой кнопкой мыши и выбрав «Редактировать макет дизайна» из появившегося контекстного меню (можно просто щелкнуть по названию шаблона):
В открывшемся окне выбираем закладку «Связанные компоненты»:
В открывшемся списке нахожу редактируемый блок «ОСНОВНОЕ МЕНЮ», это именно тот блок, что мне сейчас нужен.
Далее в столбце «Тип компонента» выбираю компонент нужного нам модуля «Навигация по сайту -> Вывод меню»:
Теперь нажимаю иконку настройки:
В открывшемся окне выбираю раздел (оно же меню) сайта:
И перехожу на закладку «Свойства»:
Выбираю макет дизайна. Галочку «Сохранять выделение у пунктов верхнего уровня» проставляю. И нажимаю кнопку «Выбрать».
Вот и все! Меню на странице размещено!
Да!
Чуть не забыл! В макете дизайна, в теге <HEAD>...</HEAD> нужно разместить:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_v.css" />
<script type=«text/javascript» src="/scripts/fsmenu.js"></script>
<noscript><link rel=«stylesheet» type=«text/css» href="/css/listmenu_fallback.css" /></noscript>
Причем, если Вам нужно горизонтальное выпадающее меню, то в первой строке указывайте:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_h.css" />
Если вертикальное, то:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_v.css" />
Я предполагаю, что Вы знаете, как закачать нужные файлы в соответствующие папки на сервер.
Получаем:
Смотрим, что получилось:
Все работает!
Изменяя стили в файле listmenu_v.css или listmenu_h.css можно добиться различных вариантов отображения меню:
Возможно гораздо более серьезное изменение оформления меню. Фактически любое!
Пользуйтесь!
Более полная инструкция по настройке меню (включая установку фоновых изображений у пунктов и т.д.) находится в файле меню.
Об этом далее...
Стили меню имеют широкий набор настроек! Расписывать их в рамках статьи я не вижу смысла т.к. они подробно расписаны в соответствующих файлах:
Скачать архив с файлами скрипта можно здесь.
Если Вам понравилось, пишите и я продолжу этот цикл!
В моей первой статье я расскажу Вам про то, как интегрировать выпадающее (динамическое меню) в CMS S.Builder.
Пример динамического меню в действии можно посмотреть в оригинале статьи:
http://www.sbuilder.ru/article_more.php?aid=61.
К сожалению, включить JavaScript в тело сообщения здесь у меня не получилось.
Меню может быть горизонтальным или вертикальным. Это без разницы! Будет выпадать в любом случае. ;)
Я покажу как делать и такое и такое.
Я буду использовать бесплатный скрипт Ангуса Турнбала (Angus Turnbull) — FreeStyle v1.0 RC9 (http://www.twinhelix.com/). Но на сайте автора скрипта, вы можете скачать и более позднюю версию FreeStyle v1.0 RC11 (http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip).
Сточки зрения интеграции в нашу систему между релизами RC9 и RC11 разницы нет.
Я остановился на этом скрипте по следующим причинам:
- Коды CSS и JavaScript полностью разнесены. Следовательно, при интеграции скрипта знание JavaScript не нужны. Все что вам нужно знать — это CSS. Но если у вас есть желание что-то доработать в JavaScript коде, то к вашим услугам код с подробными комментариями автора;
- Скрипт кросс-браузерный;
- Логика работы скрипта полностью совпадает с логикой работы модуля Меню в CMS S.Builder.
Огромное спасибо Ангусу за проделанную работу!
Здесь Вы сможете найти несколько урезанную, но переведенную версию скрипта FreeStyle v1.0 RC9. Но если у вас нет проблем с английским, то вы можете скачать полную версию FreeStyle v1.0 RC11 с сайта автора — http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip.
Настраивать меню я буду на CMS S.Builder версии 4.0, но в данном случае разницы между 4.0 и 3.7 практически нет. Так что, статья будет полезна абсолютно всем, и даже тем, кто не создает сайты на базе нашей CMS.
Я буду исходить из того, что Вы уже знаете, где и как создается и настраивается обычное меню в CMS S.Builder.
Итак, приступим!
Допустим, мы имеем следующее меню в системе:
Перехожу в макеты дизайна меню:
![](http://www.sbuilder.ru/images/articles_cms/dmenu/img/nav_menu_dis_menu_b.gif|","binn_popup_image","width=596,height=226,scrollbars=no,toolbar=no,location=no,status=no,resizable=yes,left="+((screen.availWidth-596) / 2)+",top="+((screen.availHeight-226) / 2));wnd.focus();)
И создаю новый макет дизайна:
Перехожу на «Уровень 1» и вставляю код в поля.
В поле «Верх» вставляю:
<UL class=menulist id=listMenuRoot>
В поле «Пункт с подпунктами» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт с подпунктами (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт без подпунктов» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Пункт без подпунктов (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Низ» закрываем список:
</UL>
<script type=«text/javascript»>
var listMenu = new FSMenu('listMenu', false, 'visibility', 'visible', 'hidden');
listMenu.cssLitClass = 'highlighted';
function animClipDown(ref, counter)
{
var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);
ref.style.clip = (counter==100?
((window.opera || navigator.userAgent.indexOf('KHTML') > -1)? '':
'rect(auto, auto, auto, auto)'):
'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');
};
function animFade(ref, counter)
{
var f = ref.filters, done = (counter==100);
if (f)
{
if (!done && ref.style.filter.indexOf(«alpha») == -1)
ref.style.filter += ' alpha(opacity=' + counter + ')';
else if (f.length && f.alpha) with (f.alpha)
{
if (done) enabled = false;
else { opacity = counter; enabled=true }
}
}
else ref.style.opacity = ref.style.MozOpacity = counter/100.1;
};
var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement('span');
arrow.appendChild(document.createTextNode('>'));
// Вы можете заменять вышеупомянутые две линии для маленького изображения стрелки…
//arrow = document.createElement('img');
//arrow.src = 'arrow.gif';
//arrow.style.borderWidth = '0';
arrow.className = 'subind';
}
addEvent(window, 'load', new Function('listMenu.activateMenu(«listMenuRoot», arrow)'));
</script>
Внимание: Строку addEvent(window, 'load', new Function('listMenu.activateMenu(«listMenuRoot», arrow)')); рекомендуемпоменять на listMenu.activateMenu(«listMenuRoot», arrow); Автор активирует выпадающее меню только при полной загрузке страницы. Т.к. мы вставили этот код после вывода меню, то необходимости в загрузке всей страницы у нас нет.
Данный скрипт работает с меню, построенном в виде списка <UL>.
Есть версия, работающая с DIV'ами, но т.к. на <UL> можно построить практически любое меню, мы не будем останавливаться на DIV версии меню.
Получаю пока первый уровень:
Рядом с закладкой «Уровень 1» есть закладка "+" нажимаю ее, чтобы добавить еще одну закладку «Уровень 2»:
В поле «Верх» вставляю:
<UL>
В поле «Пункт с подпунктами» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт с подпунктами (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a>{SUB_ITEMS}</LI>
В поле «Пункт без подпунктов» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Пункт без подпунктов (выбранный)» ставим код:
<LI><a href="{URL}">{TEXT}</a></LI>
В поле «Низ» закрываем список:
</UL>
Продолжая таким образом настраиваю нужное количество уровней.
Внимание: если дизайн уровня не задан, то он будет строиться на основе дизайна предыдущего уровня. Следовательно, в нашем случает достаточно настроить два уровня – Уровень1 и Уровень2.
Теперь мне нужно разместить это меню в макете дизайна страниц. Делается это следующим образом:
Для этого я перехожу к макетам дизайна сайта «Меню разработчика» -> «Макеты дизайна сайта»:
Открываем на редактирование нужный макет, щелкнув по нему правой кнопкой мыши и выбрав «Редактировать макет дизайна» из появившегося контекстного меню (можно просто щелкнуть по названию шаблона):
В открывшемся окне выбираем закладку «Связанные компоненты»:
В открывшемся списке нахожу редактируемый блок «ОСНОВНОЕ МЕНЮ», это именно тот блок, что мне сейчас нужен.
Далее в столбце «Тип компонента» выбираю компонент нужного нам модуля «Навигация по сайту -> Вывод меню»:
Теперь нажимаю иконку настройки:
В открывшемся окне выбираю раздел (оно же меню) сайта:
И перехожу на закладку «Свойства»:
Выбираю макет дизайна. Галочку «Сохранять выделение у пунктов верхнего уровня» проставляю. И нажимаю кнопку «Выбрать».
Вот и все! Меню на странице размещено!
Да!
Чуть не забыл! В макете дизайна, в теге <HEAD>...</HEAD> нужно разместить:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_v.css" />
<script type=«text/javascript» src="/scripts/fsmenu.js"></script>
<noscript><link rel=«stylesheet» type=«text/css» href="/css/listmenu_fallback.css" /></noscript>
Причем, если Вам нужно горизонтальное выпадающее меню, то в первой строке указывайте:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_h.css" />
Если вертикальное, то:
<link rel=«stylesheet» type=«text/css» href="/css/listmenu_v.css" />
Я предполагаю, что Вы знаете, как закачать нужные файлы в соответствующие папки на сервер.
Получаем:
Смотрим, что получилось:
Все работает!
Изменяя стили в файле listmenu_v.css или listmenu_h.css можно добиться различных вариантов отображения меню:
Возможно гораздо более серьезное изменение оформления меню. Фактически любое!
Пользуйтесь!
Более полная инструкция по настройке меню (включая установку фоновых изображений у пунктов и т.д.) находится в файле меню.
Об этом далее...
Разберем файлы в архиве выпадающего меню
Стили меню имеют широкий набор настроек! Расписывать их в рамках статьи я не вижу смысла т.к. они подробно расписаны в соответствующих файлах:
- fsmenu.html — файл с примером и описанием меню.
Внимание: Инструкции по настройке находятся прямо в HTML-кода файла;
- fsmenu.js — JavaScript самого меню. Это и есть выпадающее меню! Не забудьте его подключить. Без этого файла меню работать не будет;
- listmenu_v.css — CSS-файл, с настройками вертикального выпадающего меню. Вы можете подключить этот файл отдельно или включить его код в Ваш CSS-файл;
- listmenu_h.css — CSS-файл, с настройками горизонтального выпадающего меню. Вы можете подключить этот файл отдельно или включить его код в Ваш CSS-файл;
- listmenu_fallback.css — этот файл реализует меню без использования JavaScript. Используется, если у пользователя в браузере отключен JavaScript.
Скачать архив с файлами скрипта можно здесь.
Если Вам понравилось, пишите и я продолжу этот цикл!
