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

Скачать исходники для статьи можно ниже

Изначально хотел добавить на сайт блок, который будет выдвигаться, выпадать сверху, но чтобы он был узкий, а не на всю страницу, как рассказывается на большинстве сайтов, которые я нашел через поисковики.

Полазив по интернету наткнулся на скрипт, который позволяет вставить выдвигающийся блок с любой стороны сайта!

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

Источник скрипта англоязычный сайт:

http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

Демо пример можно посмотреть тут:

http://www.building58.com/examples/tabSlideOut.html

Пример рассмотренный на нем позволяет сделать блок слева, поэтому будем его корректировать (чтобы блок был у нас сверху), а главное вставлять его на сайт, функционирующий на движке WordPress!

1. Подключаем скрипт и инициализируем его функцию.

Для этого заходим в панель управления вашим сайтом, далее в левом меню выбираем пункт “Внешний вид” и подпункт “Редактор”, слева в списке шаблонов выбираем файл header.php.

Теперь находим в нем тег </head> и вставляем перед ним следующие строчки кода:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="<a>text/javascript</a>"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script>
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //класс элемента вкладки
            pathToTabImage: 'http://www.building58.com/examples/images/contact_tab.gif', //путь к изображению "обязательно"
            imageHeight: '122px',                      //высота изображения "обязательно"
            imageWidth: '40px',                      //ширина изображения "обязательно"
            tabLocation: 'left',                      //сторона на которой будет вкладка top, right, bottom, или left
            speed: 300,                               //скорость анимации
            action: 'click',                          //опции=: 'click' или 'hover', анимация при нажатии или наведении
            topPos: '200px',                          //расположение от верхнего края/ использовать если tabLocation = left или right
            fixedPosition: false                      //опции: true сделает данную вкладку неподвижной при скролле
        });

    });

    </script>

И сохраняем файл.
2. Вставляем блок
Для этого в “Редкаторе” (Панель управления сайтом – Внешний вид – Редактор) в списке шаблонов выбираем файл footer.php и ищем в его коде следующий тег, после перед ним вставляем следующие строчки:

<div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Content</a>
        <h3><span lang="ru">Контакты </span></h3>
		<br /><span lang="ru">Сюда можете вставить все что угодно :)<br />
		<br />
		Даже форму!</span></div>

3. Осталось добавить стили оформления для данного блока.

Для этого в “Редкаторе” (Панель управления сайтом – Внешний вид – Редактор) в списке шаблонов выбираем файл style.css и вставляем в самый низ его кода следующие строчки:

.slide-out-div {
       padding: 20px;
        width: 250px;
        background: #f2f2f2;
        border: #29216d 2px solid;

    }

Все готово!

У нас получилось также как в демо примере, теперь же будем менять расположение блока, вставив его наверх и изменим его расположение, а также ширину и высоту.

Для этого возвращаемся к пункту 1, в котором мы подключали скрипт и меняем строчку:

tabLocation: 'left',

На

tabLocation: 'top',

И наш блок удачно перемещается наверх.
Но он будет находится слева, мне например это не нравиться и я хочу сместить его влево, например на 700 px, а для этого нам нужно поменять строчку:

topPos: '200px',

На

leftPos: '700px',

Теперь наш блок удачно перемещается на 700 px влево.

Далее давайте уменьшим его ширину и укажем для него высоту, например в 600 px.
Для этого переходим к пункту 3 и поменяем в нем строчку:

width: 250px;

на

width: 100px;

Тем самым мы уменьшили ширину блока до 100 px.
И добавим высоту блоку, для этого добавим в код следующую строчку:

height: 600px;

Осталось только изменить картинку кнопки и ее размеры для вызова блока.
Для этого возвращаемся опять к пункту 1 и меняем следующие строчки кода в зависимости от размеров вашей будущей кнопочки.

pathToTabImage: 'http://www.building58.com/examples/images/contact_tab.gif', //путь к изображению "обязательно"
            imageHeight: '122px',                      //высота изображения "обязательно"
            imageWidth: '40px',                      //ширина изображения "обязательно"

Вот теперь все!

Вот как это будет выглядеть:

Демо пример можно посмотреть тут:

http://mnogoblog2.16mb.com/

PS: Также можно без особых проблем создать выдвигающийся блок с помощью CSS слева или справа (как расположить его сверху с помощью данного кода, к сожалению, я не смог узнать), для этого прочтите вот эту статью:
http://ruseller.com/lessons.php?rub_id=2&id=1082

Еще хотелось бы отметить, что есть сайты, которые доработали или модифицировали код, описанный в данной статье, например:
Демо-пример:
http://demo.kahimyang.info/cgi-cpp/slideout.html
О том как это сделать читайте тут:
http://kahimyang.info/kauswagan/howto_blogs/717-customizing_and_using_jquery_tabslideout_plugin