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

Меню

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

6

Раскрывающаяся панель при клике на блок CSS3 + jQuery

Jemand 27444
CSS3, JavaScript

1. CSS

.message {
	font: 12px Arial, Helvetica, sans-serif;
	-webkit-background-size: 40px 40px;
	-moz-background-size: 40px 40px;
	background-size: 40px 40px;
	background-image: -webkit-gradient(linear, left top, right bottom,
							color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
							color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
							color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
							to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	width: 100%;
	border: 1px solid;
	color: #fff;
	padding: 15px;
	position: fixed;
	left: 0;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	-webkit-animation: animate-bg 5s linear infinite;
	-moz-animation: animate-bg 5s linear infinite;
	}
.quazar {
	background-color: #4ea5cd;
	border-color: #3b8eb5;
	}
.jet {
	background-color: #de4343;
	border-color: #c43d3d;
	}
.milky-way {
	background-color: #eaaf51;
	border-color: #d99a36;
	}
.star {
	background-color: #61b832;
	border-color: #55a12c;
	}
.message h3	{
	margin: 0 0 5px 0;
	}
.message p {
	margin: 0;
	}
@-webkit-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
	}
@-moz-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
	}
#trigger-list {
	text-align: center;
	margin: 100px 0;
	padding: 0;
	}
#trigger-list li {
	display: inline-block;
	*display: inline;
	zoom: 1;
	}
#trigger-list .trigger {
	display: inline-block;
	background: #ddd;
	border: 1px solid #777;
	padding: 10px 20px;
	margin: 0 5px;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	color: #333;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	}
#trigger-list .trigger:hover {
	background: #f5f5f5;
	}

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

3. JavaScript

<script type="text/javascript">
var myMessages = ['quazar','milky-way','jet','star']; // Типы сообщений
function hideAllMessages()
{
		 var messagesHeights = new Array();
		 for (i=0; i<myMessages.length; i++)
		 {
				  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
				  $('.' + myMessages[i]).css('top', -messagesHeights[i]);
		 }
}
function showMessage(type)
{
	$('.'+ type +'-trigger').click(function(){
		  hideAllMessages();
		  $('.'+type).animate({top:"0"}, 500);
	});
}
$(document).ready(function(){
		 hideAllMessages();
		 for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }
		 $('.message').click(function(){
				  $(this).animate({top: -$(this).outerHeight()}, 500);
		  });
});
</script>

4. HTML

<!-- Кнопки -->
<ul id="trigger-list">
		 <li><a href="#" class="trigger quazar-trigger">Квазар</a></li>
		 <li><a href="#" class="trigger jet-trigger">Джеты</a></li>
		 <li><a href="#" class="trigger milky-way-trigger">Млечный Путь</a></li>
		 <li><a href="#" class="trigger star-trigger">Звезда</a></li>
</ul>
<!-- Кнопки -->

<!-- Панели -->
<div class="quazar message">
		 <h3>Квазар</h3>
		 <p>Квазар (англ. quasar) — особо мощное и далёкое активное ядро галактики. Квазары являются одними из самых ярких объектов во Вселенной — их мощность излучения иногда в десятки и сотни раз превышает суммарную мощность всех звёзд таких галактик, как наша.</p>
</div>
<div class="jet message">
		 <h3>Релятивистские струи, джеты</h3>
		 <p>Релятивистские струи, джеты (англ. jet) — струи плазмы, вырывающиеся из центров (ядер) таких астрономических объектов, как активные галактики, квазары и радиогалактики.
Обычно у объекта наблюдается две струи, направленные в противоположные стороны.</p>
</div>
<div class="milky-way message">
		 <h3>Млечный Путь</h3>
		 <p>Галактика Млечный Путь, называемая также просто Гала?ктика (с заглавной буквы), — гигантская звёздная система, в которой находится Солнечная система, все видимые невооружённым глазом отдельные звёзды.</p>
</div>
<div class="star message">
		 <h3>Звезда</h3>
		 <p>Звезда — небесное тело, в котором идут, шли или будут идти термоядерные реакции. Но чаще всего звездой называют небесное тело, в котором идут в данный момент термоядерные реакции.</p>
</div>
<!-- Панели -->

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

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

  1. Еще бы сворачивалось;)

  2. Привет!! Нужна помощь) Пишу сайт с нуля, на div-ах… Но я вот оформила все Css, но инфу не вставила, не знаю как сделать так, чтоб когда в раскрываюшимся меню тыкаешь на пункт и инфа на этой же странице была, в моем случае – в среднем боксе) ну и в шапке сайта, у меня тоже вкладки, хотелось бы, чтоб когда опять же на вкладку тыкаю- появлялось как раз раскрывающееся меню, в моем случае первый бокс) можно как-то без скрипта обойтись?? Незнаю какойнить target впилить???? Или он тоько для фреймов?

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


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