Blogger не для чайников: BoxyMenu

BoxyMenu - весёлые подвижные квадраты с ссылками, которые можно использовать как для навигации, так и в качестве альтернативы/дополнения к облаку тегов (либо в рекламных целях и т.д.).
Работает так: в виджете появляется полоска с надписями (у меня это "скрипты", "виджеты" и "фигня"), при нажатии/касании на любую появляется список ссылок и кнопка для их закрепления на странице.

Демо прилагается ↓

Установка ↓

1) jQuery
2) Скрипт меню и стили качаем отсюда (картинки положены на пикасу):
boxymenu.js
boxymenu.css
3) "Настроченый скрипт":

<script type="text/javascript">
        $(document).ready(function () {
            $('#menu-wrapper').boxymenu();
        });
    
</script>

И HTML код, куда забиваются все "тексты" и/или ссылки:

<div id="menu-wrapper">
<ul class="boxy-menu">
<li>
<div class="boxy-menu-item-top">
Скрипты -)</div>
<div class="boxy-menu-item-bottom">
Дофига скриптов можно найти в <a href="http://blogger.omg-linux.ru/search/label/jquery" target="_blank">этой ветке блога</a> или в <a href="http://blogger.omg-linux.ru/search/label/js" target="_blank">этой</a> -).</div>
</li>
<li>
<div class="boxy-menu-item-top">
Виджеты</div>
<div class="boxy-menu-item-bottom">
По блогспотовским виджетам <a href="http://blogger.omg-linux.ru/search/label/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B" target="_blank">штудируем этот материал</a>.</div>
</li>
<li>
<div class="boxy-menu-item-top">
Фигня</div>
<div class="boxy-menu-item-bottom">
Откровенно поленился сюда что-либо придумывать!</div>
</li>
</ul>
</div>

Все коды можно скопипастить (кроме ссылки на библиотеку jQuery) в html/javascript виджет, или первые три пункта поместить в раздел шаблона <head></head>. Естественно, что понадобится хостинг, типа Dropbox или code.google.com.

Что касается внешнего вида, то можно сделать хоть один блок, хоть десять, и как угодно разукрасить. Стили редактируются в файле boxymenu.css.
Тонкости:
.boxy-menu - отвечает за всю полосу квадратов (по умолчанию прописана ширина в 600 пикселей)
.boxy-menu > li.menuitem - цвет квадратов (у меня стоит белый)
.boxy-piece - это цвет собирающихся квадратов при загрузки страницы (оставил в демо для наглядности).

Разработчик.

BoxyMenu

2 комментария: