Главная -> jQuery -> Меню на CSS+jQuery (гаражные двери)

Меню на CSS+jQuery (гаражные двери)

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

Если же вы все-таки хотите привлечь внимание и удивить своих посетителей, например, если тематика вашего сайта запчасти Инфинити здесь уже можно реализовать меню в виде гаражных дверей (единственный момент вам потребуется более интересная отрисовка, чем в примере)

Не скажу что самый интересный и полезный пример, но при умелом обращении и тематичном дизайне будет как раз “в тему”. Каждый из пунктов меню как бы закрыт гаражной дверью, а при наведении курсора открывается.

Демо | Скачать

Нам потребуются всего три изображения:

1. Непосредственно графическое меню (оно будет идти фоном)

2. “Двери”

3. И, наконец, окно, которое послужит для нас фреймом

Меню:



Обычная семантическая верстка (не забываем про сео-оптимизацию ни на минуту), но с id и классами для каждой ссылки.

Файл стилей:


* { margin:0px; padding:0px; }
body { background:#c1c1c1; }
a { outline-style: none; }


ul#menuback {
margin: 50px auto;
list-style: none;
background: url(../images/menu-bg.jpg);
width: 800px;
overflow: auto;
}
ul#menuback li.shutter {
width: 200px;
height: 100px;
display: block;
float: left;
}
ul#menuback li#shutter1 {
background: url(../images/shutter-1.jpg) no-repeat;
}
ul#menuback li#shutter2 {
background: url(../images/shutter-2.jpg) no-repeat;
}
ul#menuback li#shutter3 {
background: url(../images/shutter-3.jpg) no-repeat;
}
ul#menuback li#shutter4 {
background: url(../images/shutter-4.jpg) no-repeat;
}


a.link {
width: 200px;
height: 100px;
display: block;
background: url(../images/window.png) no-repeat bottom center;
text-indent: -9999px;
}

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

Фоновый рисунок присваиваем UL, устанавливаем высоту и ширину элементов списка, а затем приписываем для каждого из пунктов свой фон.

Последний этап подключаем jQuery и JavaScript








$(document).ready(function() {
//Set css in Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
$('#shutter2').css({backgroundPosition: '0px 0px'});
$('#shutter3').css({backgroundPosition: '0px 0px'});
$('#shutter4').css({backgroundPosition: '0px 0px'});


//Animate the shutter
$(".link").hover(function(){
$(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
}, function() {
$(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
});
});

Сначала мы еще раз прописываем позицию фона, а затем действие при наведении курсора на элемент с классом link. Вот и все Удачи на практике!

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 
Рекомендуем:

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.