Основное меню

Меню с прыгающими кнопками

Для того чтобы создать такое меню, первым делом нам понадобится изображение, которое и будет прыгать. После того как вы нарисовали элемент, который будет в последствии прыгать, заключаем его в ссылки:

<p align="center">
<a class="skype-button" href=""><img src="images/skype-bu.png" alt="Button">Музыка</a>
<a class="skype-button" href=""><img src="images/skype-bu.png" alt="Button">Видео</a>
<a class="skype-button" href=""><img src="images/skype-bu.png" alt="Button">Картинки</a>
<a class="skype-button" href=""><img src="images/skype-bu.png" alt="Button">Книги</a>
</p>

Следующим шагом будет создание стилей для нашего прыгающего меню:

.skype-button {
padding:4px 10px 3px 25px;
border:solid 1px #B7DEFF;
position:relative;
cursor:pointer;
display:inline-block;
background-image:url('images/skype-bk.png');
background-repeat:repeat-x;
font:12px Verdana;
height:16px;
text-decoration:none;
color:#447299;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.skype-button img {
position:absolute;
top:-4px;
left:-12px;
border:none;
}
.skype-button:hover {
color:#6AADE6;
 }

Подключаем библиотеку Mootools к меню:

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$$('a.skype-button').each(function(el) {
var img = el.getElement('img'), running = false;
var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
}
});
el.addEvent('mouseenter',function() {
if(!running) {
fx1.start({'top':'-10px'}).start({'top':'-4px'});
running = true;
}
});
});
});
</script>

И на этом создание меню с подпрыгивающими кнопками закончено.
Исходные файлы в архиве.

Скачать файл
размер файла: 83,33 Kb
cкачиваний: 40

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.