Анимированное меню для сайта - выпадающие картинки
И так, для начала хотелось бы толкнуть праздничную речь в честь 14 февраля.
Так как сегодня просто офигенски замечательный праздник, спешу поздравить Вас - мои дорогие друзья, пусть солнца луч коснется ваших глаз! Пусть у вас всегда будет счастье на душе и радость в глазах!
Любви вам, удачи - и всего самого наилучшего!
Я сегодня встал с самого утра , и сразу же приступил к записи очередного видеоурока, урок получился хороший и качественный. Будет на чем набить вам руку.
Поэтому обязательно его посмотрите. Из этого урока вы узнаете - как создать анимированное меню с выпадающими картинками.
Это меню смотрится очень стильно и оригинально, ну и плюс, я покажу вам, как надо менять внешний вид этого меню и сами картинки.
Видео урок "Создание анимированного меню с выпадающими картинками"
Для комфортного обучения вам понадобится скрипт меню, скачать его вы сможете по ссылке ниже, так как файлик маленький - размещаю его у себя на хостинге:
Обратите внимание, что ниже идут ссылки на скачивание урока в высоком качестве. Если вы будете скачивать урок к себе на компьютер - скрипт скачивать не надо! Он идет в архиве видеоурока.
Ссылка на видеоурок по установке меню в высоком разрешении:
Всего вам хорошего, ОЧЕНЬ СКОРО мы встретимся снова.
Ваш Валентин - Серж!
Ах да, в честь праздничка мужикам подарок:
ЗЫ: девушкам тоже будет интересно взглянуть, жду впечатлений
Анимированное меню для 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 (которую скачали с expert-css.com) в корень вашего сайта (вы можете закинуть его куда угодно, но тогда надо будет прописать путь к скриптам и файлу стилей)
Всё. Теперь всё готово. Настраиваете всё как говорит Сергей в видео и получаете рабочее меню.
Доброго времени суток Сергей!
И Вас спраздником!
Почему при попытке закачать видеоурок выдается сообщение:
"Данная ссылка доступна только со страниц сайта"
Что необходимо сделать?
Заранее благодарю Александр
Серега, внизу посередине нужно галочку было еще поставить
Это из-за того, что у вас не поддерживается редирект.
Скажите как вы открываете эти ссылки?
Просто щелкаете по ним?
Да, вот прямые ссылки для тех у кого редирект не работает:
На видео:
http://turbobit.net/pnik5xs0i7pg.html
http://letitbit.net/download/70026.72e0bb1f1bf1db8fb751253bbffb/fancy.zip.html
На подарок для мужиков (прикольная штукенция) :
http://boobs.webriders.com.ua/
Интересная вещь!Правда пока что для меня это неактуально,так как меню сделал уже по другому типу,но в будущем возьму на заметку
Ну да, у тебя двухуровневое - этого будет маловато
Ну а в будущем - я нарою еще что-нибудь интерестное
Люди, если урок понравился - не забываем ставить плюсик и делиться с друганами и подружками у себя в социалках - буду блогадарен
Олег
Что то женская половина молчит, дамы, где же вы???
Ау!!!!!!!!!!!!
Мы без вас скучаем!
Сергей , большое спасибки за поздравление. Вам также большой и взаимной ЛЮБВИ не только в день Святого Валентина. За менюшку спасибо. Очень интересная штука. И доходчиво, без воды, рассказано. Спасибо!!!
ВОООТТ!!!!
И первая представительница прекрасного пола!
Спасибо Любовь за комметарий, вам тоже всего самого суперского!
Рад что вам понравилось
Сергей,с праздником!!!Я снова не могу скачать ни с какого сайта...
Елена, что конкретно у вас не получаеться?
Здравствуйте,Сергей! Все чудесно скачалось,открыл посмотрел,
кое что нужно изменить,но это не проблема,а как вставить менюшку
на свой сайт?
С уважением!!!
Я же в самом начале урока объясняю - как ставить менюшку на сайт, какие файлы нужны и что прописывать что бы эта менюшка появилась...
Что за сайт?
Сергей,а как правильно подключить это прикольное меню на MaxSite CMS,например в шаблоне clouds? Я внес изменения в main-start.php и main-menu.css.Не получилось. Как быть с jquery и fancy,где их указывать?
в header.php прописываете путь к файлу стилей
либо копируете эти стили в файл style.css или struct.css
В main-start.php прописываете сам код менюшки.
И после кода менюшки пишите путь к скрипту fancy.js
Должен работать.
JQuery - прописывается в максе, ее указывать не надо.
Извините,Сергей! Я что то проморгал,по поводу установки на сайт.
Буду пытаться.На всякий случай сайт solodkijbiz.com на WP.
С уважением Анатолий!!!
Вам поможет Александр, он хорошо разбирается в WP, комментарий 10.
Попросите что бы подсказал куда что копировать и устанавливать
Александр, добрый день! По совету Сергея обращаюсь к Вам за
помощью. Хотелось бы установить на свой сайт менюшку,он на WP,но
как правильно это сделать я не знаю.Если можно, подскажите.
С уважением Анатолий!!!
Сергей, не получается!Подскажите, что делаю не так.Скопировал стили в style.css. Код прописал. Может неправильно подключаю скрипт?
Виктор, что за сайт?
Сергей он у меня на локальном хостинге. Я пока только пытаюсь сверстать шаблон.Ваше меню очень понравилось!
Понятно, где храните скрипт менюшки?
Где картинки от меню?
Почему то письма Виктору приходят мне на почту? Сергей, а Александр пока не ответил.
С приветом Анатолий!!!
Вы может подписаны на получение комментариев?
Отписаться можно в настройках профиля.
И переименовать вашего комментатора 48 на Анатолия, тоже бы не мешало.
Саши сейчас нет, появится к вечеру, я ему передам...
Картинки в папке imagse шаблона clouds,а скрипт в папке clouds.
Ты путь к картинкам перепрописал? В стилях..
И какой путь ты указываешь к файлу скрипта?
К файлу скрипта я указываю путь и такой указывал http://localhost/www1/luntic/ , а картинки скопировал в папку clouds.Само меню появилось, но оно все смещенное и при наведении ничего не происходит. Наверно не правильный путь скрипта?
К файлу скрипта я указываю путь script type="text/javascript" src="Q:\\\\home\\\\localhost\\\\www\\\\www1\\\\luntic\\\\application\\\\maxsite\\\\templates\\\\clouds\\\\sys/fancy.js">
Почему скрипт в шаблоне? Поставь где нибудь поближе, в корне сайта для начала.
Затем картинки - ты путь к ним прописал в фале стилей?
По умолчанию картинки находятся в той же папке, что и файл стилей!
Поэтому если они в другой папке - необходимо поменять путь!
Привет, Серж. Прикольная менюха, пригодится. Спасибо!
Пожалуйста.
Сергей, скрипт я указал в корне (папка sys в папке maxsite),картинки оставил в той же папке,что и файл стилей. В header.php прописал путь к файлу стилей. В main-start.php прописал сам код менюшки и путь к скрипту fancy.js. Скопировал стили в файл style.css В итоге у меня появились названия меню и все. Не могу догнать где я совершаю ошибку. И как быть с main-menu.css? Где надо точно копировать файл в style.css и надо ли что в нем менять? Сергей мог бы ты подробно описать как бы ты делал на примере clouds шаблона? Хотя для этого, к сожалению, наверное надо снять отдельный видеоурок.
Зачем по два раза одно и тоже писать?
Комментарий удалил.
Видеоурок сижу записываю, не мешать!
Здравствуйте! Вы с чужими вопросами и своими ответами попада-
ете на мою почту, я так понимаю,что с вашей менюшки не будет
ничего толкового. После ваших подсказок и помощи, мне пришлось
поменять тему на сайте, а это приличная работа!
По поводу ответов на почту - отпишитесь от комментариев на сайте.
вы где то на что-то подписались.
Не совсем понял.
Вам не помогли?
Все, я вас отписал сам, должно помочь
Так в чем проблема точно заключается?
Что у вас случилось?
Сергей, добрый вечер! Вы меня извините за мою не сдержаность и
комп. не грамотность. Причину я попытался объяснить Александру.
Прошу прощения за такое высказывание!
Ок, без проблем.
Я слышал вы впервый раз пытались тему менять?
Ничего страшного.
Первый блин комом.
Или вы думаете у меня все с первого раза вышло?
Неа )
Опыт - вот что вам надо.
Сергей, я сел за комп. в мае прошлого года и не по собственному
хотению. После серьезного ранения, в свое время, мне ампутировали
ногу и единственное мое занятие это комп.и машина автомат, но на
дворе зима и по этому только комп. Так что прости меня неуч!
С уважением
Виктор видеоурок готов, можете скачать.
В самом конце поста.
Комментатор 48, даже не знаю что вам и сказать
Сочувствую, у меня тоже были проблемы с ногами, но не настолько серьезные.
Ну а по поводу компа, выучить его и сайтостроение - легкая задача
Здравствуйте,Сергей! Спасибо за отзыв. Может быть у вас есть
еще что- то интересное для сайта?
Сергей, большое спасибо тебе за отзывчивость и проделанную работу!!!
Добрый день, Сергей и Александр! От всей души поздравляю вас
с праздником и желаю всего самого наилучшего вам и вашим семьям!
С уважением Анатолий!!!
И вас также
Все мы защитники отечества
Хотя немножко и разного
Виктор - НЗ!
А я, Сергей, поздравляю Вас с Праздником Мужчин! Счастья,здоровья и любви Вам! Это день Защитника Отечества, Женщины, Семьи, Дома.
Желаю Вам крепчайшего здоровья, семейного счастья, успехов в творчестве и финансах.Мне очень интересно на Вашем сайте. Потихонечку применяю в жизнь. Зайдите и Вы на мой блог http://babushkinotvet.blogspot.com
Этот блог раскрывает тайны сохранения здоровья и активного, счастливого долголетия.
Сергей, еще раз спасибо за видео по установке меню,все получилось! Единственное меня интересует вопрос, почему при нажатии на любой из пунктов меню ничего не происходит? Допустим, я просматриваю комментарии в статье, а потом нажимаю меню Главная, но остаюсь на той же странице без изменений. Адрес для Главная в настройках шаблона прописывал, но без результата.
Здравствуйте, Сергей! Постоянно чужая почта приходит на мой
ящик???
Здарова Серёга, хотел спросить:
Закладки в конце контента плагин или ты сам сделал ?)
Если плагин дай ссылку, хочу и у себя такой поставить, красиво смотрется =)
решил зарегится )
Здарова, Серёга! Во первых хотел поблагодарит тебя, это было ещё в августе 2010 года =) помню всё мучался с вордпрессом то одно не нравилось то другое и уже чуть было не забил на проект как я наткнулся на твой сайт Goodkomp.com
После этого ты убедил меня, что надо перейти на Maxsite CMS!
И с этого дня мой проект тронулся с места, а теперь уже есть 500+ уникальных посетителей в сутки!
В благодарность решил поставить баннер на Goodkomp.com на целый месяц =)думаю ты не будешь против, 15.000 людей увидят этот баннер, многие покликают, а некоторым понравится твой сайт и они останутся! это самое меньшее что я могу сделать =)
П.С. Если хочешь могу поменять ссылку на Master-css.com но пскольку тематика ближе Googkomp-у думаю лучше будет
Сергей, нужна твоя помощь!
ООО, кого я вижу, ГОР!
Старый друг
В принципе баннер мне то до одного места - кликают по нему не много 5 - 6 человек в день.
Мы же с тобой договаривались обменом статьями. Ты обещал прислать статью о себе - но так и не сделел этого
Где статья, индеец
Виктор, какая именно помощь вам необходима?
Ах да, закладки в конце каждой статьи - это плагин.
Вот ссылка:
http://dl.dropbox.com/u/1787825/yashare.zip
Сергей, я по поводу активации меню. Благодаря твоему уроку все получилось меню установил, все как надо. Но проблема в том, что оно не активно. На какой бы пункт не нажимал ничего не происходит, страница не меняется. Как сделать его активным?
Ссылки не забыли прописать?
нуу... что сказать...
все эти 5-6 которые кликают скорее всего нуждаются в обучении компьютеру, по твоему им нехрен делать и они кликают по баннеру ? , а вообще тебе виденее...
смысл от этого почти ноль, вот и передумал... забыл предупредить...
щас обменом постовых ТИЦ и PR не получишь, это было в светлом прошлом :(
Ссылки в настройках шаблона прописывал, не помогло.
Ого, Гор, а от куда такие светлые мысли?
Почему не поднимешь?
Ну ка дай мне почитать
За баннер все равно спс
Ну и не ради тица с пр это делать только, но и для авторитета сайта и также его посещаемости.
Виктор, ссылки не в настройках шаблона прописывать надо - а в самом меню...
В том коде который ты копировал в мэинстарт.
Сергей, почему эта фигня приходит на мою почту? Избавтесь от
этих дебильных вопросов.
Опираясь на собственный опыт =)
а то ты не читал ? весь инет забит статьями сеошников,все статьи копипасты... 10 способов раскрутить сайт, раскрутить сайт за 5 минут и много такой хрени...
Сам видел посещалку моего сайта =) я палец об палец не ударил, а только писал свои статьи и в итоге за короткое время добился большего, чем многие которые следуят советам сеошников, обмениваются статьями и страдают всякой хренью, ну и в итоге топчятся на месте с пасещялкой 50-100 уников =)
не завидую я им =) лучше время которое многие тратят на чтение всякой хрени тратят на написание уникальных статей
тема очень обширная, можно как-то поговорить =)
это был Я
Сергей, спасибо за помощь! Получилось!
Гор, угу, я уже оценил.
ты прям по моим стопам, я тоже в посещалку палец о палец не ударил, просто правильно писал и все.
А выхлоп - каждый месяц по сто с плюсом человек прибавляется.
И самое интересное - что все посетители получаются ЦЕЛЕВЫЕ
Если просмотреть историю моего блога, про компы который, он тоже был с посещаемостью в 20 - 30 уников в сутки - горькое время было, пока не открыл для себя этот способ
По поводу инфы на почту - отпишитесь!
Вы сами подписались, а теперь что вам стоит отписаться?
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
MistyMcfarland22 - i am don't understand, sorry...
Надеюсь, правильно написал.
Надо учить английский.
Кто переведет в человекопонятный режим для меня?
Гугл тебе в помощь.
( копировать файлы к себе на хостинг)-а куда конкретно копировать эти файлы -я вот вообще плохо понимаю,когда так говорят.Я еще только начинаю сайты делать и не все толком понимаю.И в какой файл вставлять меню, тоже не пойму. Вообще ниче не могу поставить-ни галерею, ни снег,ни уголок. Есть какие-нибудь уроки где описывают прямо конкретно, что куда вставлять.Че мне изучать, чтобы все это понимать.И где взять это обучение?
Ну блин, на каждом хостинге разщный интерфейс.
Можно подключить ФТП соединение, а можно использовать файл-менеджер хостинга, для закачки файлов.
Обратитесь в поддержку своего хостинга, они вам расскажут как подключить фтп или использовать файл-менеджер.
блин я установил меня ! и на все пунктах главная страница ! так и не понимал в чем дело - просмотрел код страницы демо версии !! и понел !!!
Привет а как убрать ненужные кнопки из анимированного меню сайта и сделать его по центру сайта?