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

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

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

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

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

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Короткий вопрос по мобильной версии
автор IceQueen Январь 24th 2020, 14:58

» Проблема с изображениями
автор TAIRU Январь 23rd 2020, 17:06

» Кто сейчас на форуме вверху на главной
автор IceQueen Январь 21st 2020, 19:53

» Покупка кредитов для продления пакета
автор Иллар Лир Январь 20th 2020, 16:56

» пропали кнопки вверх-вниз
автор rodniksveta Январь 20th 2020, 12:17

» ищу админа для своих форумов
автор Dana Domirani Январь 19th 2020, 17:55

» Текс выползает на иконки форума
автор Michael McGlynn Январь 18th 2020, 02:03

» Проблема на проблеме
автор Dana Domirani Январь 17th 2020, 02:21

» Пропала шапка форума
автор shadowlady Январь 16th 2020, 21:32

» 1800 секунд до отправки следующего сообщения
автор Dana Domirani Январь 16th 2020, 17:53

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

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

Сообщение автор Феникс в Декабрь 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 &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)

Стеклянное меню 0493753001450051610 Стеклянное меню 0493905001450051610 Стеклянное меню 0493974001450051610 Стеклянное меню 0494041001450051610 Стеклянное меню 0494105001450051610 Стеклянное меню 0494169001450051610 Стеклянное меню 0494238001450051610





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

Стеклянное меню 0948993001450060581 Стеклянное меню 0949152001450060581 Стеклянное меню 0949297001450060581 Стеклянное меню 0949362001450060581 Стеклянное меню 0949431001450060581 Стеклянное меню 0949495001450060581 Стеклянное меню 0949562001450060581 Стеклянное меню 0949980001450060581 Стеклянное меню 0950055001450060581 Стеклянное меню 0395827001450061045




Феникс
Феникс
Помощник
Помощник

Мужчина

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

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

https://dayana.forum2x2.ru/

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

Вернуться к началу


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