Стеклянное меню

автор **Феникс** Декабрь 14th 2015, 17:24

На глаза как-то попалось "стеклянное меню". Несколько раз проходил мимо и всё же решил найти ему применение. А именно удобный переход к необходимым сервисам, (J-P-G, YouTube, Prostopleer, PhotoShop-онлайн, MyFiles.Ru, Транслит, Яндекс-переводчик) которые всегда под рукой. На других движках не тестил, но на bb3 полет нормальный. На мой взгляд не плохая альтернатива ранее встраиваемому меню в редактор.

По умолчанию меню практически полностью скрыто за левым краем. И уже при приближении выскакивает ближайший к курсору ярлык
Стеклянное меню 0663059001450099512

Так меню выглядит на странице полного ответа
Стеклянное меню 0952121001450063141

Само меню (ставить в виджет).

Разметка HTML:

Код:: <ul id="navigation"> <li class="home"> <a title="Хостинг картинок и изображений" target="_blank" href="http://j-p-g.net/"></a> </li> <li class="about"> <a title="Yuotube" target="_blank" href="http://www.youtube.com/upload"></a> </li> <li class="search"> <a title="Музыка онлайн" target="_blank" href="http://prostopleer.com/"></a> </li> <li class="photos"> <a title="Фоторедактор онлайн" target="_blank" href="http://pixlr.com/editor/?loc=ru"></a </li> <li class="rssfeed"> <a title="Файловый хостинг" target="_blank" href="http://my-files.ru/"></a> </li> <li class="podcasts"> <a title="Транслит" target="_blank" href="http://translit.ru/"></a> </li> <li class="contact"> <a title="Яндекс переводчик" target="_blank" href="https://translate.yandex.ru"></a> </li> </ul>

Таблица цветов

CSS:

Код:: ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index: 999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#AEE0FF; background-repeat:no-repeat; background-position:center center; border:1px solid #32A1DC; -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; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(http://i81.servimg.com/u/f81/16/54/26/99/photog10.png); } ul#navigation .about a   {  background-image: url(http://i81.servimg.com/u/f81/16/54/26/99/youtub10.png); } ul#navigation .search a { background-image: url(http://i81.servimg.com/u/f81/16/54/26/99/ilike10.png); } ul#navigation .podcasts a { background-image: url(http://i81.servimg.com/u/f81/16/54/26/99/13717010.png); } ul#navigation .rssfeed a { background-image: url(http://j-p-g.net/if/2015/12/07/0882050001449522412.png); } ul#navigation .photos a { background-image: url(http://i81.servimg.com/u/f81/16/54/26/99/palett10.png); } ul#navigation .contact a { background-image: url(http://j-p-g.net/if/2015/12/13/0224122001449980871.png); }

ПА - Модули - HTML & JAVASCRIPT - Управление кодами 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); ;} ;); });

Иконки к этому меню (шли в наборе) (48*48)

Другие иконки на ваш выбор.