Rocking and Rolling — Скрытое меню на JQuery
3 июня 2010 года, Размещено в категории: jQuery / MooTools
В этом уроки Мы будем делать скрытое меню на JQuery (Rocking and Rolling).
Будем создавать меню из маленьких иконок, которые при наведении курсора будут раскрываться, а лучше сказать выезжать другие скрытые за иконкой ссылки, или даже форма поиска.
Ничего сложного в меню нет, все как всегда 3 шага: HTML каркас меню CSS файл с оформлением и код JavaScript.
Давайте приступим к нашему скрытому меню на JQuery
Шаг 1: HTML код
Все наше меню находится в контейнере <div class="menu"></ div>. Каждую иконку со всем его внутренним содержанием мы вставляем в контейнер <div class="item"></ div> и уже в нем вы размещаем другие внутренние ссылки, или форму поиска.
Шаг 2: CSS код
Пишем оформление для класса .menu задаем высоту ширину меню, шрифт и размер шрифта, отступы и т.д:
.menu{ width:800px; height:52px; position:relative; top:200px; left:100px; font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-transform: uppercase; }
Пишем оформление для класса .item это внутренняя меню, оно у нас скрытое за иконкой:
.item{ position:relative; background-color:#f0f0f0; float:right; width:52px; margin:0px 5px; height:52px; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden; }
Здесь вы указываем путь к каждой нашей иконки и прописываем им оформление:
.link{ left:2px; top:2px; position:absolute; width:48px; height:48px; } .icon_home{ background:transparent url(../images/home.png) no-repeat top left; } .icon_mail{ background:transparent url(../images/mail.png) no-repeat top left; } .icon_help{ background:transparent url(../images/help.png) no-repeat top left; } .icon_find{ background:transparent url(../images/find.png) no-repeat top left; } .icon_photos{ background:transparent url(../images/photos.png) no-repeat top left; }
Все остальные элементы меню мы оформляем следующим образом:
.item_content{ position:absolute; height:52px; width:220px; overflow:hidden; left:56px; top:7px; background:transparent; display:none; } .item_content h2{ color:#aaa; text-shadow: 1px 1px 1px #fff; background-color:transparent; font-size:14px; } .item_content a{ background-color:transparent; float:left; margin-right:7px; margin-top:3px; color:#bbb; text-shadow: 1px 1px 1px #fff; text-decoration:none; font-size:12px; } .item_content a:hover{ color:#0b965b; } .item_content p { background-color:transparent; display:none; } .item_content p input{ border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px; }
Шаг3: JavaScript
Как всегда первым делом подключаем фрейморк jQuery и наши файлы с JavaScript между тегом <head> </head>, которые выполняют всю работу:
И вставляем на сайт JavaScript код между тэгом <body> </ body> который приводит в действие все эффекты нашей анимации:
$('.item').hover( function(){ var $this = $(this); expand($this); }, function(){ var $this = $(this); collapse($this); } ); function expand($elem){ var angle = 0; var t = setInterval(function () { if(angle == 1440){ clearInterval(t); return; } angle += 40; $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); },10); $elem.stop().animate({width:'268px'}, 1000) .find('.item_content').fadeIn(400,function(){ $(this).find('p').stop(true,true).fadeIn(600); }); } function collapse($elem){ var angle = 1440; var t = setInterval(function () { if(angle == 0){ clearInterval(t); return; } angle -= 40; $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); },10); $elem.stop().animate({width:'52px'}, 1000) .find('.item_content').stop(true,true).fadeOut() .find('p').stop(true,true).fadeOut(); }
Мой блог находят по следующим фразам
• Flash плеер для сайта
• dicim.net
• как сделать разворачивающуюся строку в таблице по кнопке jquery
• музыкальный плеер для сайта флеш
• где лучше располагать текст к иллюстрации
• player dlya sayta
12 лет назад
такие меню не индексируются поисковыми системами
12 лет назад
Довольно интересное исполнение меню. Мне очень понравилось. К сожалению сама все никак не могу освоить jquery, хотя так хочется. Вобще много требуется времени на изучение данного языка? И от куда вы находите такие фишки в исполнении?
12 лет назад
Петр:
Меню на JavaScript индексируются как и обычные меню. Это флеш меню плохо индексируются ПС.
Ленчик:
Я даже не знаю, примерно сколько Вам нужно будет потратить время на изучение всего JavaScript. Но основы за 3-6 месяца можно выучить.
Уроки я беру в зарубежных коллег 🙂
Nick
12 лет назад
Да, очень классное меню. Одно плохо это ие! Он вообще не делает эти эффекты как остальные браузеры. Если вы могли поправить этот баг хотябы под ие8, я был бы счастлив. Если это возможно отпишите мне на почту
12 лет назад
Nick:
Вот Вам способ, как сделать так, чтобы меню работало в ie7 +
Учим Internet Explorer понимать CSS3
Меню криво выглядит в ie и за того, что в меню используются пару функций c CSS3.
iHizgil
11 лет назад
Это лучшее меню, которое я видел в жизни!Админу спасибо за инструкцию.
11 лет назад
Спасибо!Очень подробная инструкция, поставил за 15 минут.
11 лет назад
Твое мнение:В хроме наработает жаль…
11 лет назад
Должно работать по идее, я проверю как-нибудь.
Евгений
9 лет назад
Здравствуйте!
Менюшка мне понравилась!
Но почему-то я не могу её выровнить по центру.
Она чуть-чуть влево или вправо уходит, а если окно браузера уменьшить, то меню вообще куда-то в бок уезжает!
Помогите пожалуйста исправить.