УрокМеню с анимацией

Всегда хочется своё основное меню как-нибудь украсить. Кто-то делает его выпадающим, иногда раздвигающимся. Кто-то навешивает на него разных красивых картинок. Я вот решил прикрутить к меню красивый скрипт, который видели немногие. А так как меню многим нравится, я решил рассказать как его сделать. Темболее что оно абсолютно кроссбраузерно.

Всё необходимое для создания такого меню вы можете найти здесь . Сложного ничего нет - достаточно подключить скрипт к меню и правильно настроить css, как показано на сайте.

Однако я столкнулся с одной небольшой неприятностью - когда переходишь по любому из пунктов меню, бегающий указатель всё равно остаётся на первом пункте, что абсолютно меня не радовало. Эта проблема решается следующим образом: открываем скрипт и меняем строку

curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];

на

curr=$("li.active-trail",this)[0]||$($li[0]).addClass("current")[0];

Теперь меню работает как в обычном друпале, выделяя активный пункт!

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

а вот за этот урок огромное спасибо)) как раз сегодня думал садиться искать, как такая бодяга делается))

01.09.2010 11:35
Аватар пользователя Spleshka
Spleshka написал:

ты если хочешь чтоб я что-то рассказал спрашивай, я урок сделаю :)

01.09.2010 13:13
Аватар пользователя D.Choomc
D.Choomc написал:

ок) интересует урок по темизации вьюсов, как в css оформлять вывод каждого поля.
И еще интересно, как сделать, чтобы комменты админа выделялись среди остальных комментов (другой bg)

01.09.2010 14:53
Аватар пользователя Spleshka
Spleshka написал:

по комментам урок сделал, а во вьюхам там что? смотришь фаербагом какой класс навесил вьюс и вешаешь на него цсс)) тут даже урока вроде не надо :)

02.09.2010 20:27
Аватар пользователя D.Choomc
D.Choomc написал:

спасибо большое!!
так там какие-то стремные классы многокилометровые прописываются. А ты через firebug темизируешь их? Я думал что можно файлик блока вывода вьюса (tpl.php) создавать и там ипереоформлять их вывод. Не так?

02.09.2010 20:39
Аватар пользователя Spleshka
Spleshka написал:

не, не надо ничего такого создавать. Всё что угодно можно сделать в самом вьюсе, я может сделаю урок как красиво можно переделать вывод переменных через вьюс.
А вообще, на будущее лучше учиться писать свои запросы в шаблоне, чем выводить это через вьюс - вьюхи много ресурсов жрут)

02.09.2010 20:44
Аватар пользователя D.Choomc
D.Choomc написал:

научи сенсей)))

02.09.2010 21:41
Аватар пользователя Spleshka
Spleshka написал:

всему своё время, сын мой. А если честно - то там просто надо будет учить запросы к базам данных :) А мне пока лень их объяснять, будет время обязательно напишу пару уроков по запросам и обработке их в друпале. И как формировать блоки из этих запросов)

02.09.2010 22:08
Аватар пользователя D.Choomc
D.Choomc написал:

ты говоришь про те запросы, которые автоматически генерируются во вьюсах в самом низу, под примером?

03.09.2010 00:01
Аватар пользователя Spleshka
Spleshka написал:

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

03.09.2010 01:12
Аватар пользователя D.Choomc
D.Choomc написал:

ладно, сенсей, лучше подожду уроков))

03.09.2010 01:38
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Здравствуйте! Скажите, Вы версткой и настройкой сайта на Друпале не занимаетесь? Планирую создать блог, дизайн в .PSD имеется. ТЗ практически готово.

19.11.2010 15:54
Аватар пользователя Spleshka
Spleshka написал:

Занимаюсь - стучите в аську 259235848 или на мыло spleshka@gmail.com

19.11.2010 16:57
Аватар пользователя Kragus
Kragus написал:

Здравствуйте! Можно подробнее узнать как прикрутить Lavalamp в существующую тему на 7 Друпале?

20.04.2011 17:52
Аватар пользователя Spleshka
Spleshka написал:

Так на их сайте же всё написано - ссылка есть в сообщении. Оно работает для любого Друпала

22.04.2011 18:02
Аватар пользователя dmcokol
dmcokol написал:

а как лучше подключить скрипт?
как лучше прикрутить js?
Класс меню (у вас на сайте)
надо значит везде в css менять .lavaLamp на primary-links?

19.06.2011 15:15
Аватар пользователя Spleshka
Spleshka написал:

js лучше подключить правильно. А в цсс да, заменить классы.

20.06.2011 23:35
Аватар пользователя NewDrupaler
NewDrupaler написал:

Splash,можешь пошагово объяснить как подключить нестандартный jquery-плагин (в частности этот - lavaLamp)?
C обычными (jqueryui.com) разобрался,а с нестандартными не пойму как воевать...
Что делал:
-ТУТ скачал необходимые файлы.
-добавил их в папку с темой,подключил через template.php (всё подключилось - и css,и js,смотрел через firebug)
-в файле css изменил класс .lavaLampWithImage на .primary-links

Изменился только background у моих primary-links...и всё...
Надо что то еще в .js менять???
Что не так делаю?

07.07.2011 15:43
Аватар пользователя forest098
forest098 написал:

Сделал всё по инструкции,меню заработало,но вот есть проблема пункты не кликабельны в чём может быть проблема?

12.08.2011 16:02
Аватар пользователя Spleshka
Spleshka написал:

Скорее всего в вёрстке. Пропишите пунктам меню position:relative и z-index: 9999;

13.08.2011 01:18
Аватар пользователя forest098
forest098 написал:

Не помогает

15.08.2011 13:24
Аватар пользователя Spleshka
Spleshka написал:

Дайте ссылку на сайт, я посмотрю

16.08.2011 15:25
Аватар пользователя forest098
forest098 написал:

http://moetravel.ru/

21.08.2011 14:17
Аватар пользователя Spleshka
Spleshka написал:

Поменяйте функцию с

$(function() {
  $("ul.lavaLampWithImage").lavaLamp({
    fx: "backout", 
    speed: 700,
    click: function(event, menuItem) {
      return false;
    }
  });
});

на

$(function() {
  $("ul.lavaLampWithImage").lavaLamp({
    fx: "backout", 
    speed: 700,
  });
});

и всё у вас заработает.

21.08.2011 16:38
Аватар пользователя forest098
forest098 написал:

Спасибо помогло

21.08.2011 17:30
Аватар пользователя Наталия
Наталия написал:

Сделала как написано, не нашла где js-скрипты, откуда их загрузить?

27.12.2015 19:35

Комментировать