Меню с плавающим пунктом на MaxSite CMS.
Привет мои дорогие друзья.
Сегодня я решил поделиться уроком, как установить на MaxSite меню с плавающим пунктом. Смотрится сие чудо довольно интересно, особенно, если подобрать цветовую гамму под свой дизайн.
Показывать я буду на примере шаблона Default – того, который идет по умолчанию в системе, и который используют большинство пользователей.
Если вы не до конца понимаете как он работает, или вам захочется в нем еще что-нибудь изменить, то посмотрите линейку уроков "Шаблон своими руками" – где я более подробно рассказываю, как изменить Default шаблон по своему вкусу.
Версия системы 0.63, версия шаблона 3.0 – именно на этих версиях я показываю как присобачить менюшку.
- И так, у нас будет два варианта обучения:
- Видео-урок, где я все подробно рассказываю, объясняю и показываю (27 минут где то).
- Текстовая инструкция – инструкция из 7 шагов по установке этого меню – все четко и быстро. Но минимум объяснений.
- Файлы для скачивания:
- Архив со скриптом.
- Видеоурок по вставке меню на MaxSite CMS. (можно посмотреть онлайн!)
Пошаговая инструкция:
Шаг 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="http://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', - цвет фона, если градиентный фон в файле стилей не работает.
Откройте этот файл в редакторе и поставьте свои значения.
Ну вот вроде и все. Будьте внимательны при добавлении и редактировании кода, так как из-за одного неправильного символа может не работать все меню!
Если будут вопросы, замечания или пожелания – прошу все писать в комментариях. Будем решать.
ЗЫ: не забудьте рассказать про этот урок своим друзьям. (достаточно просто нажать на одну из кнопок ниже)
Спасибо за внимание!
Комментариев: 23
2012-02-06 в 22:06:54
Скрипт бомба))) спасибо Серега))) то что нужно для нового сайта))))
2012-02-06 в 22:13:07
Хех, бомбы здесь нет
Но пользуйся на здоровье ;)
2012-02-07 в 12:15:07
Сереж, твои уроки смотреть одно удовольствие. И полезно, и увлекательно. Продолжай в том же духе. Удачи!
2012-02-11 в 23:31:38
Классно. Мне понравился урок. И хорошее изложение. Молоток тёзка !
2012-02-12 в 15:25:45
Спасибо друзья
2012-06-09 в 18:57:09
Интересует следующий вопрос..как сюда "прикрутить" подменю?
2012-09-10 в 07:28:39
Спасибо тебе огромное Сергей!!!
2012-09-10 в 15:21:38
НЗ.
Марк, сорр Чет упустил я твой коммент.
Подменю автоматом уже встроено - ничего прикручивать не надо.
2012-09-27 в 10:40:31
Как все это хозяйство применить для joomla 1.5?
2012-09-27 в 11:00:29
Без понятия - я не работаю с этой CMS.
2012-09-28 в 19:40:39
Здравствуйте! Очень интересная статья, да и полезная. Все вышло кроме одного и не могу понять в чем же проблема. Нажимаю на кнопку она подсвечивается. В css поставил ведь бекграунд нет...и все равно оно его подсвечивает. В чем может быть проблема?
2012-09-29 в 13:23:20
А в каком файле смотрели?
2012-09-29 в 17:00:34
Уже все вышло, это я сам там чуть не до глядел. Создавайте по больше таких замечательных уроков
2012-09-30 в 20:01:19
Спасибо - создаемс
2012-10-12 в 16:37:31
Дякую ви супер
2012-10-13 в 13:31:05
Привет Серега!
Не как не выходит установить свой.
Может ты сам попробуешь потом отпишешься?
Вот ссылка: http://ruseller.com/lessons.php?rub=32&id=401
2012-10-31 в 02:59:28
я как сорока ведусь на всё блестящее, и естественно очень захотелось такую цацу.
и я очень обрадовался что есть текстовое описание помимо видео урока. потому что я вечно не успеваю за уроками, даже не успеваю нажать паузу.... ну тормоз в общем (хотя уроки шикарные!!!!)
и вот два дня я возился, танцевал с бубном. но у меня просто не работало меню вообще. приходилось всё возвращать к умолчанию...
сегодня вооружился терпением, изловчился нажимать паузу в видеоуроке... и всё получилось!
Серёж, огромное спасибо!
а не работало потому что в статье не хватает вот этих строк:
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
перед вот этой строчкой. position: absolute;
в видеоуроке я их нашёл.
три варианта: инертное торможение, эффект холодца, эффект желе
2012-10-31 в 17:55:09
Дима, посмотрю что можно сделать.
2012-10-31 в 17:56:04
Артем, про "эффект холодца" - улыбнуло
2012-10-31 в 20:53:31
рад, что поднял настроение.
Дима, может не выходит, потому что как и я по тексту делал, а не по видео.
А можно вопрос: блок этот всегда отъезжает на "главная" после того, как уберешь с менюшки мышь. Даже если ты не на главной. Никак нельзя сделать, чтобы он оставался на заголовке той страницы(или родительской), на которой ты находишься?
2012-11-01 в 00:46:23
Не знаю если честно.
Здесь уже стихия яваскрипта.
А мне это не интересно и я не изучаю его.
2013-04-06 в 04:24:43
Ссылка на архив не РАБОТАЕТ!!!!!!!!
2013-04-17 в 14:15:56
Александр,
Только что проверила - все работает!
Попробуйте скачать с другого браузера.