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

Рубрика: Скрипты на сайт -> CMS MaxSite;
Метки:

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

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

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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


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

  • Видео-урок, где я все подробно рассказываю, объясняю и показываю (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', - цвет фона, если градиентный фон в файле стилей не работает.

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



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

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

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

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

Комментариев: 29 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

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

Комментариев: 29
  •  V[Ne]ZakoNa | 6 февраля 2012 в 22:06:54

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

  •  Серёга | 6 февраля 2012 в 22:13:07

    Хех, бомбы здесь нет smile

    Но пользуйся на здоровье ;)

  •  kliol | 7 февраля 2012 в 12:15:07

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

  •  Сергей | 11 февраля 2012 в 23:31:38

    handsКлассно. Мне понравился урок. И хорошее изложение. Молоток тёзка !

  •  Серёга | 12 февраля 2012 в 15:25:45

    Спасибо друзья smile

  •  Марк | 9 июня 2012 в 18:57:09

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

  •  Александр | 10 сентября 2012 в 07:28:39

    Спасибо тебе огромное Сергей!!!

  •  Серёга | 10 сентября 2012 в 15:21:38

    НЗ.

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

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

  •  vestlik | 27 сентября 2012 в 10:40:31

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

  •  Серёга | 27 сентября 2012 в 11:00:29

    Без понятия - я не работаю с этой CMS.

  •  Иван | 28 сентября 2012 в 19:40:39

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

  •  Серёга | 29 сентября 2012 в 13:23:20

    А в каком файле смотрели?

  •  Иван | 29 сентября 2012 в 17:00:34

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

  •  Серёга | 30 сентября 2012 в 20:01:19

    Спасибо - создаемс smile

  •  Антон | 12 октября 2012 в 16:37:31

    Дякую ви супер hands

  •  Дмитрий | 13 октября 2012 в 13:31:05

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

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

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

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

  •  Артём Порубов | 31 октября 2012 в 02:59:28

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

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

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

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

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

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

    border-right: 1px solid #0059ec;

    border-left: 1px solid #0059ec;

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

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

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

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

  •  Серёга | 31 октября 2012 в 17:55:09

    Дима, посмотрю что можно сделать.

  •  Серёга | 31 октября 2012 в 17:56:04

    Артем, про "эффект холодца" - улыбнуло smile

  •  Артём Порубов | 31 октября 2012 в 20:53:31

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

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

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

  •  Серёга | 1 ноября 2012 в 00:46:23

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

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

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

  •  Александр | 6 апреля 2013 в 04:24:43

    Ссылка на архив не РАБОТАЕТ!!!!!!!!

  •  Елена | 17 апреля 2013 в 14:15:56

    Александр,

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

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

  •  Владимир | 3 сентября 2013 в 14:49:33

    Все очень здорово, но не хватает кое-чего. Думаю очень удобная штука, чтобы при нажатии на конкретный пункт меню, ползунок фиксировался именно на нем, а не убегал в начало. Как это реализовать?

  •  Серега | 4 ноября 2013 в 00:50:40

    Ссылка на архив действительно не работает. Проверял тремя браузерами.

    Пишет:

    Forbidden

    You don't have permission to access on this server.

  •  Елена | 4 ноября 2013 в 03:55:26

    Поменяла ссылку - проверьте, как сейчас, работает?

    •  Вова | 13 января 2016 в 13:34:11

      Не работает, пожалуйста исправьте.

  •  Андрей | 2 марта 2014 в 23:12:38

    Нет, Елена. Ссылка не работает снова...

  •  Пётр | 22 августа 2015 в 01:03:54

    Нет скрипта, переходил по всем сылкам не одна не открывается.