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
10 лет назад
такие меню не индексируются поисковыми системами
10 лет назад
Довольно интересное исполнение меню. Мне очень понравилось. К сожалению сама все никак не могу освоить jquery, хотя так хочется. Вобще много требуется времени на изучение данного языка? И от куда вы находите такие фишки в исполнении?
10 лет назад
Петр:
Меню на JavaScript индексируются как и обычные меню. Это флеш меню плохо индексируются ПС.
Ленчик:
Я даже не знаю, примерно сколько Вам нужно будет потратить время на изучение всего JavaScript. Но основы за 3-6 месяца можно выучить.
Уроки я беру в зарубежных коллег 🙂
Nick
10 лет назад
Да, очень классное меню. Одно плохо это ие! Он вообще не делает эти эффекты как остальные браузеры. Если вы могли поправить этот баг хотябы под ие8, я был бы счастлив. Если это возможно отпишите мне на почту
10 лет назад
Nick:
Вот Вам способ, как сделать так, чтобы меню работало в ie7 +
Учим Internet Explorer понимать CSS3
Меню криво выглядит в ie и за того, что в меню используются пару функций c CSS3.
iHizgil
10 лет назад
Это лучшее меню, которое я видел в жизни!Админу спасибо за инструкцию.
10 лет назад
Спасибо!Очень подробная инструкция, поставил за 15 минут.
9 лет назад
Твое мнение:В хроме наработает жаль…
9 лет назад
Должно работать по идее, я проверю как-нибудь.
Евгений
8 лет назад
Здравствуйте!
Менюшка мне понравилась!
Но почему-то я не могу её выровнить по центру.
Она чуть-чуть влево или вправо уходит, а если окно браузера уменьшить, то меню вообще куда-то в бок уезжает!
Помогите пожалуйста исправить.