Анимированная выпадающая панель для Блоггер

Привет, друзья. Поделюсь с вами, как сделать красивую анимированную панель, которая будет содержать в себе какую - то полезную информацию и открываться вверху блога при нажатии на кнопку.

Разместить внутри панели можно всю что угодно. Мне кажется, что проявив фантазию, каждый сможет реализовать что - то полезное. Например, что пришло первое в голову.

Загадать какие - то загадки и дать разгадки.
Сделать расписание уроков или заданий.
Устроить розыгрыши и назвать победителей.
Дать биографию поэта, художника и др...
Умные советы для кулинарных блогов.
Так же, как на примере, дать просто какую-то информацию.

Демонстрация

Хотела разобрать каждый участок кода, но поскольку у меня много начинающих блогеров, публикую код полностью. Скопируйте его к себе в блокнот, чтобы сделать соответствующие настройки.

Код.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript">
var myMessages = ['afrika','arktika','indonesy','evraziy','antarktida' ]; //
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>

<!-- Кнопки -->

<ul id="trigger-list">
   <li><a href="#" class="trigger afrika-trigger">Африка</a></li>
   <li><a href="#" class="trigger   indonesy-trigger">Индонезия</a></li>
   <li><a href="#" class="trigger arktika-trigger">Арктика</a></li>
   <li><a href="#" class="trigger evraziy-trigger">Евразия</a></li>
<li><a href="#" class="trigger antarktida-trigger">Антарктида</a></li>
</ul>

<!-- Панели -->

<div class="afrika message">
   <h3>Африка</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="indonesy message">
   <h3>Индонезия </h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="arktika message">
   <h3>Арктика</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="evraziy message">
   <h3>Евразия</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="antarktida  message">
<h3>Антарктида</h3>
<p>Текст в выпадающей панели</p>
</div>

<style>
.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;
 }
.afrika {
 background-color: #009933 ;
 border-color: #3b8eb5;
 }
.indonesy {
 background-color: #006666;
 border-color: #c43d3d;
 }
.arktika {
 background-color: #9999CC;
 border-color: #d99a36;
 }
.evraziy {
 background-color: #CC6633;
 border-color: #55a12c;
 }
.antarktida {
 background-color: #996666 ;
 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: #999999;
 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;
 }
</style>

В начале кода красным цветом скрипт библиотеки jquery. Прочитайте о ней в этом сообщении.

То, что в коде выделено синим цветом впишите свои названия. Вместо решёток укажите адрес куда должна вести ссылка. Или оставьте как есть. Красным цветом это текст, отображаемый на панели.

В стилях CSS зелёным я отметила фон для каждой панельки. Вообще, очень много можно поменять на свой вкус. Можно добавлять или убирать кнопки и панели. В коде это отмечено жирным шрифтом 4 раза (на примере Антарктида). Если с этим возникнут трудности, пишите в комментариях. Тут главное понять что за что отвечает.

Готовый код устанавливаем в редакторе сообщений, перейдя в режим HTML.

Лучше эта панелька будет смотреться при отключенном навбаре. Читаем об этом здесь.

И на сегодня всё. Спасибо, что читаете мои шпаргалки блогерши и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email