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

Меню

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

2

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

Jemand 14472 , ,
JavaScript

1. CSS

ul {
	margin: 0;
	padding: 0;
	}
li {
	width: 100px;
	height: 50px;
	float: left;
	color: #191919;
	text-align: center;
	overflow: hidden;
	}
a {
	color: #FFF;
	text-decoration: none;
	}
p {
	padding: 0px 5px;
	}
.subtext {
		padding-top: 15px;
	}
.green {
	background: #6AA63B url('green-item-bg.jpg') top left no-repeat;
	}
.yellow {
	background: #FBC700 url('yellow-item-bg.jpg') top left no-repeat;
	}
.red {
	background: #D52100 url('red-item-bg.jpg') top left no-repeat;
	}
.purple {
	background: #5122B4 url('purple-item-bg.jpg') top left no-repeat;
	}
.blue {
	background: #0292C0 url('blue-item-bg.jpg') top left no-repeat;
	}

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

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>

3. Подключение плагина анимации

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

4. JavaScript

<script type="text/javascript">
$(document).ready(function(){
	$("a").click(function(){
		$(this).blur();
	});
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
});
</script>

4. HTML

<ul>
	<li class="green">
		<p><a href="#">Пункт №1</a></p>
		<p class="subtext">Бла-бла</p>
	</li>
	<li class="yellow">
		<p><a href="#">Пункт №2</a></p>
		<p class="subtext">Бла-бла</p>
	</li>
	<li class="red">
		<p><a href="#">Пункт №3</a></p>
		<p class="subtext">Бла-бла</p>
	</li>
	<li class="blue">
		<p><a href="#">Пункт №4</a></p>
		<p class="subtext">Бла-бла</p>
	</li>
	<li class="purple">
		<p><a href="#">Пункт №5</a></p>
		<p class="subtext">Бла-бла</p>
	</li>
</ul>

Демо

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

» 2 комментария

  1. Добрый день! Очень классный сайт! Спасибо за Ваш труд :) )
    Есть вопрос. Решила использовать это меню своего сайта, но у меня почему весь контент страницы прыгает вместе с кнопками. Т.е. когда нажимаешь на кнопку, выпадает менюшка, а вместе с ней и текст страницы смещается вниз….. Что делать? В чем дело?! Помогите, плиз. Заранее спс.


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