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

Понедельник, 06 февраля 2012 года в 21:00      Просмотров: 3384

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

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

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

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

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

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

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


    И так, у нас будет два варианта обучения:

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





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


Шаг 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;}

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

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

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


Шаг 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

1. V[Ne]ZakoNa
2012-02-06 в 22:06:54

Скрипт бомба))) спасибо Серега))) то что нужно для нового сайта))))

Сереж, твои уроки смотреть одно удовольствие. И полезно, и увлекательно. Продолжай в том же духе. Удачи!

Интересует следующий вопрос..как сюда "прикрутить" подменю?

НЗ.

Марк, сорр smile Чет упустил я твой коммент.

Подменю автоматом уже встроено - ничего прикручивать не надо.

Как все это хозяйство применить для joomla 1.5?

Здравствуйте! Очень интересная статья, да и полезная. Все вышло кроме одного и не могу понять в чем же проблема. Нажимаю на кнопку она подсвечивается. В css поставил ведь бекграунд нет...и все равно оно его подсвечивает. В чем может быть проблема?

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

Привет Серега!

Не как не выходит установить свой.long face

Может ты сам попробуешь потом отпишешься?

Вот ссылка: http://ruseller.com/lessons.php?rub=32&id=401

я как сорока ведусь на всё блестящее, и естественно очень захотелось такую цацу.

и я очень обрадовался что есть текстовое описание помимо видео урока. потому что я вечно не успеваю за уроками, даже не успеваю нажать паузу.... ну тормоз в общем (хотя уроки шикарные!!!!)

и вот два дня я возился, танцевал с бубном. но у меня просто не работало меню вообще. приходилось всё возвращать к умолчанию...

сегодня вооружился терпением, изловчился нажимать паузу в видеоуроке... и всё получилось!

Серёж, огромное спасибо!

а не работало потому что в статье не хватает вот этих строк:

border-right: 1px solid #0059ec;

border-left: 1px solid #0059ec;

перед вот этой строчкой. position: absolute;

в видеоуроке я их нашёл.

эффект скачков (блин не придумал как назвать, если кто подскажет нужное слово – БИГ СПС)

три варианта: инертное торможение, эффект холодца, эффект желе smile

рад, что поднял настроение.

Дима, может не выходит, потому что как и я по тексту делал, а не по видео.

А можно вопрос: блок этот всегда отъезжает на "главная" после того, как уберешь с менюшки мышь. Даже если ты не на главной. Никак нельзя сделать, чтобы он оставался на заголовке той страницы(или родительской), на которой ты находишься?

Не знаю если честно.

Здесь уже стихия яваскрипта.

А мне это не интересно и я не изучаю его.

Александр,

Только что проверила - все работает!

Попробуйте скачать с другого браузера.

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)