Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Взломали форум и не мог войти, как админ. Чья-то шутка?автор dimslav Июнь 29th 2022, 21:06
» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Бестиарий Июнь 25th 2022, 10:24
» Система оплаты Skrill
автор Mierena Май 22nd 2022, 06:40
» Размещение рекламного кода в публикациях
автор Иван Зверинский Май 21st 2022, 14:30
» Хостинги картинок
автор Dreamsted Май 19th 2022, 10:36
» При создания форума небыло сказано имя пользователя
автор IceQueen Май 11th 2022, 21:39
» Не могу восстановить пароль пользователя
автор Aэsha Апрель 30th 2022, 14:43
» Похожие темы
автор irina27 Апрель 29th 2022, 22:11
» Как купить пакет Расширенный
автор Dana Domirani Апрель 29th 2022, 21:53
» Как исправить край окна редактора?
автор Феникс Апрель 23rd 2022, 17:11
Стеклянное меню
Стеклянное меню
автор Феникс Декабрь 14th 2015, 17:24
На глаза как-то попалось "стеклянное меню". Несколько раз проходил мимо и всё же решил найти ему применение. А именно удобный переход к необходимым сервисам, (J-P-G, YouTube, Prostopleer, PhotoShop-онлайн, MyFiles.Ru, Транслит, Яндекс-переводчик) которые всегда под рукой. На других движках не тестил, но на bb3 полет нормальный. На мой взгляд не плохая альтернатива ранее встраиваемому меню в редактор.
По умолчанию меню практически полностью скрыто за левым краем. И уже при приближении выскакивает ближайший к курсору ярлык
Так меню выглядит на странице полного ответа
Само меню (ставить в виджет).
Таблица цветов
ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript.
Название: любое. Чтобы он не конфликтовал с другими скриптами, поставьте галочку расположения "В темах".
Иконки к этому меню (шли в наборе) (48*48)
Другие иконки на ваш выбор.
По умолчанию меню практически полностью скрыто за левым краем. И уже при приближении выскакивает ближайший к курсору ярлык
Так меню выглядит на странице полного ответа
Само меню (ставить в виджет).
- Разметка 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)
Другие иконки на ваш выбор.
Феникс- Помощник
-
Сообщения : 1075
Возраст : 50
Регистрация : 2015-10-29
Благодарности : 251
-
Похожие темы» Как можно закруглить углы у панели меню и выровнять разделы меню по одинаковой ширине?
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Facebook
ВКонтакте
