Анимированное меню для сайта - выпадающие картинки

Анимированное меню - выпадающие картинки.

И так, для начала хотелось бы толкнуть праздничную речь в честь 14 февраля.

Так как сегодня просто офигенски замечательный праздник, спешу поздравить Вас - мои дорогие друзья, пусть солнца луч коснется ваших глаз! Пусть у вас всегда будет счастье на душе и радость в глазах! smile

Любви вам, удачи - и всего самого наилучшего! rock

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

Поэтому обязательно его посмотрите. Из этого урока вы узнаете - как создать анимированное меню с выпадающими картинками.

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

Это меню смотрится очень стильно и оригинально, ну и плюс, я покажу вам, как надо менять внешний вид этого меню и сами картинки.

Смотреть ДЕМО-версию.

Видео урок "Создание анимированного меню с выпадающими картинками"

Для комфортного обучения вам понадобится скрипт меню, скачать его вы сможете по ссылке ниже, так как файлик маленький - размещаю его у себя на хостинге:

Прямая ссылка на скрипт меню

Обратите внимание, что ниже идут ссылки на скачивание урока в высоком качестве. Если вы будете скачивать урок к себе на компьютер - скрипт скачивать не надо! Он идет в архиве видеоурока.

Ссылка на видеоурок по установке меню в высоком разрешении:

Скачать с Летитбит

Всего вам хорошего, ОЧЕНЬ СКОРО мы встретимся снова.

Ваш Валентин - Серж! love

Ах да, в честь праздничка мужикам подарок:

Смотреть здесь. chuckle

ЗЫ: девушкам тоже будет интересно взглянуть, жду впечатлений oh oh


Анимированное меню для Wordpress

Добавлено от Александра

Вот как осуществить это в WordPress (показано на примере шаблона world_of_business_bue028).

Итак во первых берёте вот этот код (из index.html):

<div class="navigation">
<ul id="menu" class="menu">
<li><a class="first">Players</a></li>
<li><a>Cameras</a></li>
<li><a>TVs</a></li>
<li><a>Screens</a></li>
<li><a>Tools</a></li>
<li><a>Phones</a></li>
<li><a class="last">Printers</a></li>
</ul>
</div>
<mce:script src="sys/jquery-1.3.2.js" mce_src="sys/jquery-1.3.2.js" type="text/javascript"></mce:script>
<mce:script src="sys/fancy.js" mce_src="sys/fancy.js" type="text/javascript"></mce:script>

И вставляете этот код в файл header.php вашего шаблона сразу после открывающего тега <body>. Далее в этом же файле header.php в этой части кода

<div class="PageBackgroundGlare">
<div class="PageBackgroundGlareImage"></div>
</div>

Оставляете только  <div class="PageBackgroundGlareImage"></div> а остальное убираете. Далее прописываете вот эту строчку

<link rel="stylesheet" href="sys/fancy.css" type="text/css" charset="utf-8"/>

где-нибудь в <head> (я вставлял сразу после <head profile="http://gmpg.org/xfn/11">)

Всё, файл header.php сохраняете.

Далее открываете файл style.css. В нём находите следующее:

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}

И там меняете параметр top, тоесть будет так:

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 50px;
}

Сохраняете файл style.css. Теперь закидываете папку sys (которую скачали с master-css.com) в корень вашего сайта (вы можете закинуть его куда угодно, но тогда надо будет прописать путь к скриптам и файлу стилей)

Всё. Теперь всё готово. Настраиваете всё как говорит Сергей в видео и получаете рабочее меню.


Установка Меню на CMS MaxSite! Видео

Скачать видео по установке.

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

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

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

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

Комментариев: 71
  •  Комментатор 35 | 14 февраля 2011 в 22:27:55

    Доброго времени суток Сергей!

    И Вас спраздником!

    Почему при попытке закачать видеоурок выдается сообщение:

    "Данная ссылка доступна только со страниц сайта"

    Что необходимо сделать?

    Заранее благодарю Александр

  •  Олег | 14 февраля 2011 в 22:35:42

    Серега, внизу посередине нужно галочку было еще поставитьLOL

  •  Серёга | 14 февраля 2011 в 23:19:45

    Это из-за того, что у вас не поддерживается редирект.

    Скажите как вы открываете эти ссылки?

    Просто щелкаете по ним?

    Да, вот прямые ссылки для тех у кого редирект не работает:

    На видео:

    http://turbobit.net/pnik5xs0i7pg.html

    http://letitbit.net/download/70026.72e0bb1f1bf1db8fb751253bbffb/fancy.zip.html

    На подарок для мужиков (прикольная штукенция) smile :

    http://boobs.webriders.com.ua/

  •  Евгений Шаповалов | 14 февраля 2011 в 23:21:24

    Интересная вещь!Правда пока что для меня это неактуально,так как меню сделал уже по другому типу,но в будущем возьму на заметкуsmile

  •  Серёга | 14 февраля 2011 в 23:26:51

    Ну да, у тебя двухуровневое - этого будет маловато smile

    Ну а в будущем - я нарою еще что-нибудь интерестноеwink

    Люди, если урок понравился - не забываем ставить плюсик и делиться с друганами и подружками у себя в социалках - буду блогадаренred face

  •  Серёга | 14 февраля 2011 в 23:32:41

    Олег surprised grin

    Что то женская половина молчит, дамы, где же вы???

    Ау!!!!!!!!!!!!

    Мы без вас скучаем! makeup

  •  Любовь | 14 февраля 2011 в 23:50:44

    Сергей , большое спасибки за поздравление. Вам также большой и взаимной ЛЮБВИ не только в день Святого Валентина. За менюшку спасибо. Очень интересная штука. И доходчиво, без воды, рассказано. Спасибо!!!

  •  Серёга | 15 февраля 2011 в 00:04:06

    ВОООТТ!!!!

    И первая представительница прекрасного пола!

    Спасибо Любовь за комметарий, вам тоже всего самого суперского!rolleyes

    Рад что вам понравилось cool smile

  •  Елена | 15 февраля 2011 в 00:29:54

    Сергей,с праздником!!!Я снова не могу скачать ни с какого сайта...

  •  Александр | 15 февраля 2011 в 00:50:33

    Елена, что конкретно у вас не получаеться?

  •  Анатолий | 15 февраля 2011 в 13:13:50

    Здравствуйте,Сергей! Все чудесно скачалось,открыл посмотрел,

    кое что нужно изменить,но это не проблема,а как вставить менюшку

    на свой сайт?

    С уважением!!!

  •  Серёга | 15 февраля 2011 в 13:18:34

    Я же в самом начале урока объясняю - как ставить менюшку на сайт, какие файлы нужны и что прописывать что бы эта менюшка появилась...

    Что за сайт?

  •  Виктор | 15 февраля 2011 в 13:20:32

    Сергей,а как правильно подключить это прикольное меню на MaxSite CMS,например в шаблоне clouds? Я внес изменения в main-start.php и main-menu.css.Не получилось. Как быть с jquery и fancy,где их указывать?

  •  Серёга | 15 февраля 2011 в 13:26:09

    в header.php прописываете путь к файлу стилей

    либо копируете эти стили в файл style.css или struct.css

    В main-start.php прописываете сам код менюшки.

    И после кода менюшки пишите путь к скрипту fancy.js

    Должен работать.

    JQuery - прописывается в максе, ее указывать не надо.

  •  Анатолий | 15 февраля 2011 в 13:31:21

    Извините,Сергей! Я что то проморгал,по поводу установки на сайт.

    Буду пытаться.На всякий случай сайт solodkijbiz.com на WP.

    С уважением Анатолий!!!grrr

  •  Серёга | 15 февраля 2011 в 13:39:47

    Вам поможет Александр, он хорошо разбирается в WP, комментарий 10.

    Попросите что бы подсказал куда что копировать и устанавливать smile

  •  Анатолий | 15 февраля 2011 в 13:53:01

    Александр, добрый день! По совету Сергея обращаюсь к Вам за

    помощью. Хотелось бы установить на свой сайт менюшку,он на WP,но

    как правильно это сделать я не знаю.Если можно, подскажите.

    С уважением Анатолий!!!

  •  Виктор | 15 февраля 2011 в 14:12:01

    Сергей, не получается!Подскажите, что делаю не так.Скопировал стили в style.css. Код прописал. Может неправильно подключаю скрипт?whewgrrr

  •  Серёга | 15 февраля 2011 в 14:22:08

    Виктор, что за сайт?

  •  Виктор | 15 февраля 2011 в 14:29:34

    Сергей он у меня на локальном хостинге. Я пока только пытаюсь сверстать шаблон.grrrВаше меню очень понравилось!clap

  •  Серёга | 15 февраля 2011 в 14:39:40

    Понятно, где храните скрипт менюшки?

    Где картинки от меню?

  •  Анатолий | 15 февраля 2011 в 14:40:09

    Почему то письма Виктору приходят мне на почту? Сергей, а Александр пока не ответил.

    С приветом Анатолий!!!

  •  Серёга | 15 февраля 2011 в 14:41:35

    Вы может подписаны на получение комментариев?

    Отписаться можно в настройках профиля.

    И переименовать вашего комментатора 48 на Анатолия, тоже бы не мешало.

    Саши сейчас нет, появится к вечеру, я ему передам...

  •  Виктор | 15 февраля 2011 в 14:48:42

    Картинки в папке imagse шаблона clouds,а скрипт в папке clouds.

  •  Серёга | 15 февраля 2011 в 15:27:50

    Ты путь к картинкам перепрописал? В стилях..

    И какой путь ты указываешь к файлу скрипта?

  •  Виктор | 15 февраля 2011 в 15:46:38

    К файлу скрипта я указываю путь и такой указывал http://localhost/www1/luntic/ , а картинки скопировал в папку clouds.Само меню появилось, но оно все смещенное и при наведении ничего не происходит. Наверно не правильный путь скрипта?

  •  Виктор | 15 февраля 2011 в 15:48:06

    К файлу скрипта я указываю путь script type="text/javascript" src="Q:\\\\home\\\\localhost\\\\www\\\\www1\\\\luntic\\\\application\\\\maxsite\\\\templates\\\\clouds\\\\sys/fancy.js">

  •  Серёга | 16 февраля 2011 в 00:18:06

    Почему скрипт в шаблоне? Поставь где нибудь поближе, в корне сайта для начала.

    Затем картинки - ты путь к ним прописал в фале стилей?

    По умолчанию картинки находятся в той же папке, что и файл стилей!

    Поэтому если они в другой папке - необходимо поменять путь!

  •  SiriusMaster | 16 февраля 2011 в 01:20:38

    Привет, Серж. Прикольная менюха, пригодится. Спасибо! rock

  •  Серёга | 16 февраля 2011 в 01:35:48

    Пожалуйста.

  •  Виктор | 16 февраля 2011 в 07:31:08

    Сергей, скрипт я указал в корне (папка sys в папке maxsite),картинки оставил в той же папке,что и файл стилей. В header.php прописал путь к файлу стилей. В main-start.php прописал сам код менюшки и путь к скрипту fancy.js. Скопировал стили в файл style.css В итоге у меня появились названия меню и все. Не могу догнать где я совершаю ошибку.angry И как быть с main-menu.css? Где надо точно копировать файл в style.css и надо ли что в нем менять? Сергей мог бы ты подробно описать как бы ты делал на примере clouds шаблона? Хотя для этого, к сожалению, наверное надо снять отдельный видеоурок.grrrgrrrgrrr

  •  Серёга | 16 февраля 2011 в 18:57:20

    Зачем по два раза одно и тоже писать?

    Комментарий удалил.

    Видеоурок сижу записываю, не мешать! smile

  •  Анатолий | 16 февраля 2011 в 20:20:11

    Здравствуйте! Вы с чужими вопросами и своими ответами попада-

    ете на мою почту, я так понимаю,что с вашей менюшки не будет

    ничего толкового. После ваших подсказок и помощи, мне пришлось

    поменять тему на сайте, а это приличная работа!

  •  Серёга | 16 февраля 2011 в 20:26:12

    По поводу ответов на почту - отпишитесь от комментариев на сайте.

    вы где то на что-то подписались.

    Не совсем понял.

    Вам не помогли?

  •  Серёга | 16 февраля 2011 в 20:39:04

    Все, я вас отписал сам, должно помочь smile

    Так в чем проблема точно заключается?

    Что у вас случилось?

  •  Анатолий | 16 февраля 2011 в 21:53:57

    Сергей, добрый вечер! Вы меня извините за мою не сдержаность и

    комп. не грамотность. Причину я попытался объяснить Александру.

    Прошу прощения за такое высказывание!hands

  •  Серёга | 16 февраля 2011 в 22:09:33

    Ок, без проблем.

    Я слышал вы впервый раз пытались тему менять?

    Ничего страшного.

    Первый блин комом.

    Или вы думаете у меня все с первого раза вышло?

    Неа smile)

    Опыт - вот что вам надо. wink

  •  Анатолий | 16 февраля 2011 в 22:21:26

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

    хотению. После серьезного ранения, в свое время, мне ампутировали

    ногу и единственное мое занятие это комп.и машина автомат, но на

    дворе зима и по этому только комп. Так что прости меня неуч!

    С уважениемok

  •  Серёга | 21 февраля 2011 в 16:10:53

    Виктор видеоурок готов, можете скачать. wink

    В самом конце поста.

    Комментатор 48, даже не знаю что вам и сказать confused

    Сочувствую, у меня тоже были проблемы с ногами, но не настолько серьезные.

    Ну а по поводу компа, выучить его и сайтостроение - легкая задача smile

  •  Анатолий | 21 февраля 2011 в 18:15:50

    Здравствуйте,Сергей! Спасибо за отзыв. Может быть у вас есть

    еще что- то интересное для сайта?

  •  Виктор | 22 февраля 2011 в 07:15:27

    Сергей, большое спасибо тебе за отзывчивость и проделанную работу!!!clapLOLhappy

  •  Анатолий | 22 февраля 2011 в 12:09:50

    Добрый день, Сергей и Александр! От всей души поздравляю вас

    с праздником и желаю всего самого наилучшего вам и вашим семьям!

    С уважением Анатолий!!!

  •  Серёга | 22 февраля 2011 в 13:17:45

    И вас также smile

    Все мы защитники отечества cool smile

    Хотя немножко и разного chuckle

  •  Серёга | 22 февраля 2011 в 13:18:17

    Виктор - НЗ!

  •  Алина Таранец | 23 февраля 2011 в 20:02:05

    А я, Сергей, поздравляю Вас с Праздником Мужчин! Счастья,здоровья и любви Вам! Это день Защитника Отечества, Женщины, Семьи, Дома.

    Желаю Вам крепчайшего здоровья, семейного счастья, успехов в творчестве и финансах.Мне очень интересно на Вашем сайте. Потихонечку применяю в жизнь. Зайдите и Вы на мой блог http://babushkinotvet.blogspot.com

    Этот блог раскрывает тайны сохранения здоровья и активного, счастливого долголетия.

  •  Виктор | 24 февраля 2011 в 08:08:42

    Сергей, еще раз спасибо за видео по установке меню,все получилось!LOL Единственное меня интересует вопрос, почему при нажатии на любой из пунктов меню ничего не происходит? Допустим, я просматриваю комментарии в статье, а потом нажимаю меню Главная, но остаюсь на той же странице без изменений. Адрес для Главная в настройках шаблона прописывал, но без результата.whew

  •  Анатолий | 24 февраля 2011 в 08:24:00

    Здравствуйте, Сергей! Постоянно чужая почта приходит на мой

    ящик???

  •  Аноним | 25 февраля 2011 в 23:01:36

    Здарова Серёга, хотел спросить:

    Закладки в конце контента плагин или ты сам сделал ?)

    Если плагин дай ссылку, хочу и у себя такой поставить, красиво смотрется =)

  •  Гор | 25 февраля 2011 в 23:05:36

    решил зарегится )

  •  Гор | 25 февраля 2011 в 23:54:39

    Здарова, Серёга! Во первых хотел поблагодарит тебя, это было ещё в августе 2010 года =) помню всё мучался с вордпрессом то одно не нравилось то другое и уже чуть было не забил на проект как я наткнулся на твой сайт Goodkomp.com

    После этого ты убедил меня, что надо перейти на Maxsite CMS!

    И с этого дня мой проект тронулся с места, а теперь уже есть 500+ уникальных посетителей в сутки!

    В благодарность решил поставить баннер на Goodkomp.com на целый месяц =)думаю ты не будешь против, 15.000 людей увидят этот баннер, многие покликают, а некоторым понравится твой сайт и они останутся! это самое меньшее что я могу сделать =)

    П.С. Если хочешь могу поменять ссылку на Master-css.com но пскольку тематика ближе Googkomp-у думаю лучше будет smile

  •  Виктор | 28 февраля 2011 в 05:49:24

    Сергей, нужна твоя помощь!

  •  Серёга | 28 февраля 2011 в 09:24:32

    ООО, кого я вижу, ГОР!

    Старый друг cool smile

    В принципе баннер мне то до одного места - кликают по нему не много smile 5 - 6 человек в день.

    Мы же с тобой договаривались обменом статьями. Ты обещал прислать статью о себе - но так и не сделел этого long face

    Где статья, индеец question snake

    Виктор, какая именно помощь вам необходима?

  •  Серёга | 28 февраля 2011 в 09:38:26

    Ах да, закладки в конце каждой статьи - это плагин.

    Вот ссылка:

    http://dl.dropbox.com/u/1787825/yashare.zip

  •  Виктор | 28 февраля 2011 в 10:04:56

    Сергей, я по поводу активации меню. Благодаря твоему уроку все получилось меню установил, все как надо. Но проблема в том, что оно не активно. На какой бы пункт не нажимал ничего не происходит, страница не меняется. Как сделать его активным?

  •  Серёга | 28 февраля 2011 в 11:04:52

    Ссылки не забыли прописать?

  •  Гор | 28 февраля 2011 в 12:39:59
    5 - 6 человек в день

    нуу... что сказать...

    все эти 5-6 которые кликают скорее всего нуждаются в обучении компьютеру, по твоему им нехрен делать и они кликают по баннеру ? smile, а вообще тебе виденее...

    Мы же с тобой договаривались обменом статьями. Ты обещал прислать статью о себе - но так и не сделел этого

    смысл от этого почти ноль, вот и передумал... забыл предупредить...

    щас обменом постовых ТИЦ и PR не получишь, это было в светлом прошлом :(

  •  Виктор | 28 февраля 2011 в 12:45:24

    Ссылки в настройках шаблона прописывал, не помогло.

  •  Серёга | 28 февраля 2011 в 13:33:23

    Ого, Гор, а от куда такие светлые мысли? smile

    Почему не поднимешь?

    Ну ка дай мне почитать oh oh

    За баннер все равно спс smile

    Ну и не ради тица с пр это делать только, но и для авторитета сайта и также его посещаемости.

    Виктор, ссылки не в настройках шаблона прописывать надо - а в самом меню...

    В том коде который ты копировал в мэинстарт.

  •  Аноним | 28 февраля 2011 в 13:46:21

    Сергей, почему эта фигня приходит на мою почту? Избавтесь от

    этих дебильных вопросов.

  •  Аноним | 28 февраля 2011 в 13:57:55
    Ого, Гор, а от куда такие светлые мысли?

    Опираясь на собственный опыт =)

    Ну ка дай мне почитать

    а то ты не читал ? весь инет забит статьями сеошников,все статьи копипасты... 10 способов раскрутить сайт, раскрутить сайт за 5 минут и много такой хрени...

    Сам видел посещалку моего сайта =) я палец об палец не ударил, а только писал свои статьи и в итоге за короткое время добился большего, чем многие которые следуят советам сеошников, обмениваются статьями и страдают всякой хренью, ну и в итоге топчятся на месте с пасещялкой 50-100 уников =)

    не завидую я им =) лучше время которое многие тратят на чтение всякой хрени тратят на написание уникальных статей smile

    тема очень обширная, можно как-то поговорить =)

  •  Гор | 28 февраля 2011 в 13:59:31

    это был Я smile

  •  Виктор | 28 февраля 2011 в 14:55:49

    Сергей, спасибо за помощь!clap Получилось!happyLOL

  •  Серёга | 28 февраля 2011 в 15:14:52

    Гор, угу, я уже оценил.

    ты прям по моим стопам, я тоже в посещалку палец о палец не ударил, просто правильно писал и все.

    А выхлоп - каждый месяц по сто с плюсом человек прибавляется.

    И самое интересное - что все посетители получаются ЦЕЛЕВЫЕ smile

    Если просмотреть историю моего блога, про компы который, он тоже был с посещаемостью в 20 - 30 уников в сутки smile - горькое время было, пока не открыл для себя этот способ smile

  •  Серёга | 28 февраля 2011 в 15:15:34

    По поводу инфы на почту - отпишитесь!

    Вы сами подписались, а теперь что вам стоит отписаться?

  •  MistyMcfarland22 | 23 июля 2011 в 06:42:39

    I propose not to hold off until you earn enough amount of money to order different goods! You should get the loans or just consolidation loans and feel fine

  •  Серёга | 23 июля 2011 в 12:15:38

    MistyMcfarland22 - i am don't understand, sorry...

    Надеюсь, правильно написал.

    Надо учить английский.

    Кто переведет в человекопонятный режим для меня? red face

  •  Комментатор 46 | 23 июля 2011 в 22:17:20

    Гугл тебе в помощь.grin

  •  Сергей | 17 октября 2011 в 19:51:19

    ( копировать файлы к себе на хостинг)-а куда конкретно копировать эти файлы -я вот вообще плохо понимаю,когда так говорят.Я еще только начинаю сайты делать и не все толком понимаю.И в какой файл вставлять меню, тоже не пойму. Вообще ниче не могу поставить-ни галерею, ни снег,ни уголок. Есть какие-нибудь уроки где описывают прямо конкретно, что куда вставлять.Че мне изучать, чтобы все это понимать.И где взять это обучение?grrr

    •  Серёга | 17 октября 2011 в 21:36:32

      Ну блин, на каждом хостинге разщный интерфейс.

      Можно подключить ФТП соединение, а можно использовать файл-менеджер хостинга, для закачки файлов.

      Обратитесь в поддержку своего хостинга, они вам расскажут как подключить фтп или использовать файл-менеджер.

  •  андрей | 31 марта 2012 в 15:58:43

    блин я установил меня ! и на все пунктах главная страница ! так и не понимал в чем дело - просмотрел код страницы демо версии !! и понел !!!

  •  дмитрий | 30 ноября 2014 в 07:49:32

    Привет а как убрать ненужные кнопки из анимированного меню сайта и сделать его по центру сайта?