Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Феникс в Пн 14 Дек - 17:24

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

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




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




Само меню (ставить в виджет).
Разметка 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 &nbsp; {
&nbsp;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)







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

 





Феникс
 

Мужчина

Сообщения : 570
Возраст : 44
Регистрация : 2015-10-29
Благодарности : 112

Без предупреждений

http://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения