Меню с плавающим пунктом на MaxSite CMS.

Привет мои дорогие друзья.

Сегодня я решил поделиться уроком, как установить на MaxSite меню с плавающим пунктом. Смотрится сие чудо довольно интересно, особенно, если подобрать цветовую гамму под свой дизайн.

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

Если вы не до конца понимаете как он работает, или вам захочется в нем еще что-нибудь изменить, то посмотрите линейку уроков "Шаблон своими руками" – где я более подробно рассказываю, как изменить Default шаблон по своему вкусу.

Версия системы 0.63, версия шаблона 3.0 – именно на этих версиях я показываю как присобачить менюшку.

Ссылка на оригинал.

И так, у нас будет два варианта обучения:
• Видео-урок, где я все подробно рассказываю, объясняю и показываю (27 минут где то).
• Текстовая инструкция – инструкция из 7 шагов по установке этого меню – все четко и быстро. Но минимум объяснений.

Файлы для скачивания:
• Архив со скриптом.
• Видеоурок по вставке меню на MaxSite CMS. (можно посмотреть онлайн!)

- прямая ссылка с сервера.

- зеркало Letitbit.

Пошаговая инструкция:

Шаг 1. Скачиваем архив с меню (ссылка выше). Распаковываем его в отдельную папку. Открываем шаблон Default. И копируем файл jquery.spasticNav.js из архива с меню в папке js в папку js шаблона Default. Открываем скопированный файл в редакторе.

Шаг 2. В шаблоне Default в папке css находим файл _add_style.css и переименовываем его в add_style.css. Затем идем в папку custom и там находим файл _header-end.php и переименовываем его в header-end.php. Оба файла открываем в редакторе.

Шаг 3. В файл add_style.css добавляем следующий код:

#blob {
    background: #0098c8; /*Цвет фона*/
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #005671, #0098c8); /*Фон градиентом для Firefox*/
    background: -webkit-gradient(linear, left top, left bottom, from(#005671), to(#0098c8)); /*Фон градиентом для других браузеров*/
    border-radius: 3px; /*Скругление углов плавающего пункта*/
    box-shadow: 0 0 3px #192849; /*Тень для плавающего пункта*/
}
ul.menu li a{position: relative; z-index:10; margin:0; padding: 0 10px; font-weight:normal; font-size: 15px;}
ul.menu li a:hover{background: none; color:white;}
ul.menu li.selected a{background: none;}

Сохраняемся.

Обратите внимание, что для некоторых сточек кода написаны подсказки.

Надеюсь. все знают как работает градиент?

Шаг 4. В файл header-end.php добавляем следующий код:

echo '<script type="text/javascript" src="' . getinfo('template_url') .'js/jquery.spasticNav.js"></script>';?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $('.menu').spasticNav();
</script>

Шаг 5. Если для меню необходимо добавить эффект скачков (блин не придумал как назвать, если кто подскажет нужное слово – БИГ СПС)

То вместо этой строчки кода в файле header-end.php:

$('.menu').spasticNav();

Вставляем это:

$('.menu').spasticNav({
		 speed : 2000,  
   		 easing : 'easeOutElastic' 
		});

Где параметр speed отвечает за скорость скачков меню.

Шаг 6. В файле скрипта меню меняем содержимое строки 16 с:

currentPageItem = $('#selected, nav),

на:

currentPageItem = $('.first', nav),

Шаг 7. Ну и последним шагом настраиваем наш плавающий пункт. За его настройку отвечают следующие строки в файле jquery.spasticNav.js (это строчки кода с 6 по 9):

overlap : 5, - указываем размер блока
speed : 3000, - указываем скорость следования блока за курсором мыши
reset : 1000, - указываем через какое время после отвода курсора блок вернется  на место
color : '#0098c8', - цвет фона, если градиентный фон в файле стилей не работает.

Откройте этот файл в редакторе и поставьте свои значения.

Ну вот вроде и все. Будьте внимательны при добавлении и редактировании кода, так как из-за одного неправильного символа может не работать все меню!

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

ЗЫ: не забудьте рассказать про этот урок своим друзьям. (достаточно просто нажать на одну из кнопок ниже)

Спасибо за внимание!