CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

11

Горизонтальное меню с выпадающими кнопками на MooTools

Jemand 9230 , ,
JavaScript

1. CSS

* {
	padding: 0;
	margin: 0;
	}
#menu{
	position: relative;
	height: 30px;
	background: #303030;
	border-bottom: solid 3px #000;
	margin-bottom: 10px;
	z-index: 100;
	}
#menu ul {
	position: absolute;
	left: 0;
	top: 0;
	list-style: none;
	font-size: 16px;
	}
#menu li {
	float: left;
	}
#menu li a {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 20px;
	background: #303030;
	color: #fff;
	text-decoration: none;
	font-family: Georgia;
	}

2. Подключение MooTools

<script type="text/javascript" src="mootools.js"></script>

Данный код размещаем в секции <head> нашего документа.
Скачать MooTools можно здесь.
3. JavaScript

<script type="text/javascript">
window.addEvent('domready', function(){
  $$('#menu a').each(function(el) {
    var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Bounce.easeOut,link:'cancel'});
    el.addEvents({
      'mouseenter': function() {fx.start({'padding-top':30, 'background-color':'#000'});},
      'mouseleave': function() {fx.start({'padding-top':0, 'background-color':'#F04F31'});}
    });
  });
});
</script>

Данный код также размещаем в <head>, но после подключения MooTools.
4. HTML

<div id="menu">
  <ul>
    <li><a href="" title="">Главная</a></li>
    <li><a href="" title="">О нас</a></li>
    <li><a href="" title="">Портфолио</a></li>
    <li><a href="" title="">Контакты</a></li>
  </ul>
</div>

Демо

Рекламная пауза

» 11 комментариев

  1. Выпадение менюшек не происходит,почему,не понимаю…буд-то джава не срабатывает.

  2. извините а как сделать чтобы УЖЕ ИМЕЮЩИЕСЯ меню также при наведении красиво пукало?

  3. Как вот здесь
    ‘mouseleave’: function() {fx.start({‘padding-top’:0, ‘background-color’:'#F04F31′});}
    вместо background-color поставить картинку или цвет градиентом сделать?

  4. После наведения на пункт меню, он выпадает, как и должно быть. Но, при возвращении в исходное состояние, кнопка становится красной. Как исправить?

  5. Хорошее меню)


Оставить комментарий