Исчезающие иконки/кнопки

Качественная разработка на jQuery - прячущиеся неподвижные иконки. Это можно отнести к меню, и прицепить таким образом элементы навигации блога или кнопки социальных сетей к краю страницы. Работает на любом нормальном движке для блога.

←Демо можно увидеть прямо здесь, по левому краю страницы.

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

И так, поехали..
Стили:

<style>
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
}
ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}
ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(http://1.bp.blogspot.com/-C7BB0MuFZGk/TrJRNwDxFUI/AAAAAAAAG1A/VIfy96kRC8M/s1600/Home.png);
}
ul#navigation .about a      {
    background-image: url(http://4.bp.blogspot.com/-5rUPKTcLT5c/TrJROTKWkCI/AAAAAAAAG1M/_mYnK6C2eMY/s1600/Info2.png);
}
ul#navigation .search a      {
    background-image: url(http://2.bp.blogspot.com/-lOh2s7TIO7Q/TrJRThHzPjI/AAAAAAAAG1k/b_Zt6z5MvAo/s320/Search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://4.bp.blogspot.com/-szHYjpFClyA/TrJRN0PM4DI/AAAAAAAAG0w/hV8L8QY2m4w/s1600/Discuss.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://1.bp.blogspot.com/-xzeJpEvJ_W4/TrJROj2OhnI/AAAAAAAAG1Y/2a6U5c1jn0M/s1600/Rss%2B1.png);
}
ul#navigation .photos a     {
    background-image: url(http://3.bp.blogspot.com/-7GpO2CJ7Ec4/TrJRTyxPmsI/AAAAAAAAG1s/AoqzR31tgEI/s1600/Wordpress.png);
}
ul#navigation .contact a    {
    background-image: url(http://3.bp.blogspot.com/-5yUl1Npgz7c/TrJRNswY8UI/AAAAAAAAG0o/tvfqzl3XOPA/s1600/Cart.png);
}
</style>

Таблицу стилей можно условно разделить на две части:
первая заведует общим видом меню кнопок
вторая (начиная с ul#navigation .home a) иконками в этом меню
Я брал произвольные иконки. Поставьте более подходящие свои. Примерно подходящий размер - 64х64.
Чтобы сдвинуть разом все иконки, поставьте в ul#navigation в top: 10px; своё значение в пикселях.

Скрипт анимации:

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

Положение исчезающих элементов регулируется в .animate({'marginLeft':'-85px'}

Html код:

<ul id="navigation">
 <li class="home"><a title="Домой"></a></li>
 <li class="about"><a title="О сайте"></a></li>
 <li class="search"><a title="Поиск"></a></li>
 <li class="photos"><a title="Фото"></a></li>
 <li class="rssfeed"><a title="Подписка"></a></li>
 <li class="podcasts"><a title="Подкасты"></a></li>
 <li class="contact"><a title="Связь"></a></li>
</ul>

Обратите внимание, что каждая ссылка на кнопку привязана к своему классу. Если надумаете у последних изменить название, тоже самое нужно будет сделать и в стилях.
Чтобы привязать ссылку к кнопке (например, ссылка страницы своего блога) просто поставьте атрибут href для тега a. Например: a title="Домой" href="http://ваша=ссылка".

Автор идеи.

А что ещё интересного?
Виджет твиттера для блога