Меню с плавающим пунктом на 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="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', - цвет фона, если градиентный фон в файле стилей не работает.
Откройте этот файл в редакторе и поставьте свои значения.
Ну вот вроде и все. Будьте внимательны при добавлении и редактировании кода, так как из-за одного неправильного символа может не работать все меню!
Если будут вопросы, замечания или пожелания – прошу все писать в комментариях. Будем решать.
ЗЫ: не забудьте рассказать про этот урок своим друзьям. (достаточно просто нажать на одну из кнопок ниже)
Спасибо за внимание!
Скрипт бомба))) спасибо Серега))) то что нужно для нового сайта))))
Хех, бомбы здесь нет
Но пользуйся на здоровье ;)
Сереж, твои уроки смотреть одно удовольствие. И полезно, и увлекательно. Продолжай в том же духе. Удачи!
Спасибо друзья
Интересует следующий вопрос..как сюда "прикрутить" подменю?
Спасибо тебе огромное Сергей!!!
НЗ.
Марк, сорр
Чет упустил я твой коммент.
Подменю автоматом уже встроено - ничего прикручивать не надо.
Как все это хозяйство применить для joomla 1.5?
Без понятия - я не работаю с этой CMS.
Здравствуйте! Очень интересная статья, да и полезная. Все вышло кроме одного и не могу понять в чем же проблема. Нажимаю на кнопку она подсвечивается. В css поставил ведь бекграунд нет...и все равно оно его подсвечивает. В чем может быть проблема?
А в каком файле смотрели?
Уже все вышло, это я сам там чуть не до глядел. Создавайте по больше таких замечательных уроков
Спасибо - создаемс
Дякую ви супер
Привет Серега!
Не как не выходит установить свой.
Может ты сам попробуешь потом отпишешься?
Вот ссылка: https://ruseller.com/lessons.php?rub=32&id=401
я как сорока ведусь на всё блестящее, и естественно очень захотелось такую цацу.
и я очень обрадовался что есть текстовое описание помимо видео урока. потому что я вечно не успеваю за уроками, даже не успеваю нажать паузу.... ну тормоз в общем (хотя уроки шикарные!!!!)
и вот два дня я возился, танцевал с бубном. но у меня просто не работало меню вообще. приходилось всё возвращать к умолчанию...
сегодня вооружился терпением, изловчился нажимать паузу в видеоуроке... и всё получилось!
Серёж, огромное спасибо!
а не работало потому что в статье не хватает вот этих строк:
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
перед вот этой строчкой. position: absolute;
в видеоуроке я их нашёл.
три варианта: инертное торможение, эффект холодца, эффект желе
Дима, посмотрю что можно сделать.
Артем, про "эффект холодца" - улыбнуло
рад, что поднял настроение.
Дима, может не выходит, потому что как и я по тексту делал, а не по видео.
А можно вопрос: блок этот всегда отъезжает на "главная" после того, как уберешь с менюшки мышь. Даже если ты не на главной. Никак нельзя сделать, чтобы он оставался на заголовке той страницы(или родительской), на которой ты находишься?
Не знаю если честно.
Здесь уже стихия яваскрипта.
А мне это не интересно и я не изучаю его.
Ссылка на архив не РАБОТАЕТ!!!!!!!!
Александр,
Только что проверила - все работает!
Попробуйте скачать с другого браузера.
Все очень здорово, но не хватает кое-чего. Думаю очень удобная штука, чтобы при нажатии на конкретный пункт меню, ползунок фиксировался именно на нем, а не убегал в начало. Как это реализовать?
Ссылка на архив действительно не работает. Проверял тремя браузерами.
Пишет:
Forbidden
You don't have permission to access on this server.
Поменяла ссылку - проверьте, как сейчас, работает?
Не работает, пожалуйста исправьте.
Нет, Елена. Ссылка не работает снова...
Нет скрипта, переходил по всем сылкам не одна не открывается.