Раскрывающаяся панель при клике на блок jQuery + CSS3
В данной небольшой статье мы покажем как создать раскрывающаяся панель при клике на блок jQuery + CSS3. При нажатие на панель она сворачивается. Все достаточно просто и возможно кому то будет полезно.
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. HTML
<ul id="trigger-list">
<li><a class="trigger quazar-trigger" href="#">Квазар</a></li>
<li><a class="trigger jet-trigger" href="#">Джеты</a></li>
<li><a class="trigger milky-way-trigger" href="#">Млечный Путь</a></li>
<li><a class="trigger star-trigger" href="#">Звезда</a></li>
</ul>
<div class="quazar message">
<h3>Квазар</h3>
Квазар (англ. quasar) — особо мощное и далёкое активное ядро галактики. Квазары являются одними из самых ярких объектов во Вселенной — их мощность излучения иногда в десятки и сотни раз превышает суммарную мощность всех звёзд таких галактик, как наша.
</div>
<div class="jet message">
<h3>Релятивистские струи, джеты</h3>
Релятивистские струи, джеты (англ. jet) — струи плазмы, вырывающиеся из центров (ядер) таких астрономических объектов, как активные галактики, квазары и радиогалактики.
Обычно у объекта наблюдается две струи, направленные в противоположные стороны.
</div>
<div class="milky-way message">
<h3>Млечный Путь</h3>
Галактика Млечный Путь, называемая также просто Гала?ктика (с заглавной буквы), — гигантская звёздная система, в которой находится Солнечная система, все видимые невооружённым глазом отдельные звёзды.
</div>
<div class="star message">
<h3>Звезда</h3>
Звезда — небесное тело, в котором идут, шли или будут идти термоядерные реакции. Но чаще всего звездой называют небесное тело, в котором идут в данный момент термоядерные реакции.
</div>
4. 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>
Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.сетях через сервисы ниже.
Отправить ответ