Rocking and Rolling — Скрытое меню на JQuery

3 июня 2010 года, Размещено в категории: jQuery / MooTools

Скрытое меню на JQuery

В этом уроки Мы будем делать скрытое меню на JQuery (Rocking and Rolling).
Будем создавать меню из маленьких иконок, которые при наведении курсора будут раскрываться, а лучше сказать выезжать другие скрытые за иконкой ссылки, или даже форма поиска.

Ничего сложного в меню нет, все как всегда 3 шага: HTML каркас меню CSS файл с оформлением и код JavaScript.
Давайте приступим к нашему скрытому меню на JQuery

demoскачать

Шаг 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 комментариев

  • 8 лет назад Ответить

    такие меню не индексируются поисковыми системами

  • 8 лет назад Ответить

    Довольно интересное исполнение меню. Мне очень понравилось. К сожалению сама все никак не могу освоить jquery, хотя так хочется. Вобще много требуется времени на изучение данного языка? И от куда вы находите такие фишки в исполнении?

    • 8 лет назад Ответить

      Петр:
      Меню на JavaScript индексируются как и обычные меню. Это флеш меню плохо индексируются ПС.
      Ленчик:
      Я даже не знаю, примерно сколько Вам нужно будет потратить время на изучение всего JavaScript. Но основы за 3-6 месяца можно выучить.
      Уроки я беру в зарубежных коллег 🙂

  • 8 лет назад Ответить

    Да, очень классное меню. Одно плохо это ие! Он вообще не делает эти эффекты как остальные браузеры. Если вы могли поправить этот баг хотябы под ие8, я был бы счастлив. Если это возможно отпишите мне на почту

  • 8 лет назад Ответить

    Это лучшее меню, которое я видел в жизни!Админу спасибо за инструкцию.

  • 8 лет назад Ответить

    Спасибо!Очень подробная инструкция, поставил за 15 минут.

  • 7 лет назад Ответить

    Твое мнение:В хроме наработает жаль…

    • 7 лет назад Ответить

      Должно работать по идее, я проверю как-нибудь.

  • 6 лет назад Ответить

    Здравствуйте!
    Менюшка мне понравилась!
    Но почему-то я не могу её выровнить по центру.
    Она чуть-чуть влево или вправо уходит, а если окно браузера уменьшить, то меню вообще куда-то в бок уезжает!
    Помогите пожалуйста исправить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: