Вкладки-табы на jquery и Css.

Вкладки-табы на jquery и Css. Выскальзывающие  вкладки-табы на jquery и Css.Отличие от других вариантов,что вкладки появляется сверху из под шапки блога,что создаёт дополнительную возможность маневрирования для применения табов. Использование и установка кода для вывода вкладок проста и не затейлива.Копируем код целиком и добавляем сначала в редактор для внесения своих изменений,ну а затем себе на страницу.


Установка кода для вывода табов.


Сначала проверяем и добавляем jquery,если его каким-то образом ещё нет на вашем сайте или блоге.Затем копируем и закидываем в папку для стилей или непосредственно в шаблон для Блогспот  Css-код отвечающий за визуальное восприятие вкладок.Так же необходимо произвести все настройки,исходя из своего дизайна.

<style type="text/css">
.message {width: 600px;/*ширина блока*/
height: 300px;/*высота блока*/
border: 1px solid;
color: #fff;
padding: 20px;
position: fixed;
left:150;/*выровнять по центру*/
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
}
.gol {
background-color: #fff;/*цвет блока*/
border: 5px solid #ccc;
text-decoration: none;
}
.gol1 {
background-color: #fff;
border: 5px solid #ccc;text-decoration: none;
color: #333;
}
.gol2 {
background-color: #fff;
border: 5px solid #cfc;
text-decoration: none;
}
.gol3 {
background-color: #fff;
border: 5px solid #ccc;
text-decoration: none;
}
@-webkit-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -180px 0;
    }
}
@-moz-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -180px 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 #cdf; /*цвет рамки кнопки*/
padding: 10px 20px;
margin: 0 5px;
font: bold 14px Arial, Helvetica;
text-decoration: none;
color: #105550;/*цвет текста кнопки*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#trigger-list .trigger:hover {
background: #DDC0BE;/*цвет фона кнопки при наведении*/
}

</style>

Затем добавляем скрипт вызова вкладок

<script type="text/javascript">
var myMessages = ['gol','gol1','gol2','gol3']; // Типы сообщений
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>

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог


Ну и НТМЛ-код куда следует внести всё,что душа пожелает.Устанавливается данный код если для одноразового применения,то непосредственно на страницу.Ну а если данный гаджет вас устраивает,то в любой гаджет НТМЛ.
<!-- Панели куда внести свой текст или -->
<div class="gol message">текст</div>
<div class="gol1 message">текст</div>
<div class="gol2 message">текст</div>
<div class="gol3 message">текст</div>
<!--конец панели -->
Ну а сами кнопки,которые будут вызывать появление вкладок-табов в тело статьи в подходящем месте.Закрытие вкладки происходит по клику в открывшееся окно.
<ul id="trigger-list">
<li><a href="#" class="trigger gol-trigger">Видео</a></li>
<li><a href="#" class="trigger gol1-trigger">Frank Duval</a></li>
<li><a href="#" class="trigger gol2-trigger">Музыка</a></li>
<li><a href="#" class="trigger gol3-trigger">Фото</a></li>
</ul>
<!-- Кнопки -->

Ничего сложного и сверх естественного здесь нет и установить jquery вкладки табы доступно всем.И обратите внимание,что данный вариант скри-ывает сколько медиа-контента на странице и тем не менее всегда доступен и работает в фоновом режиме.







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