Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Форум медленно открывается. Что делать?автор literrary Вчера в 19:11
» сделать иконку ЛС-ссылку в профиле( Invision) в темах
автор literrary Вчера в 14:00
» адаптировать туториал пользователи в статистике по времени на invision
автор literrary Январь 30th 2023, 21:36
» заменить ЧаВо в навигации
автор literrary Январь 30th 2023, 18:58
» невозможно загрузить смайлик ни один
автор literrary Январь 30th 2023, 18:56
» добавить пользователя в недруги
автор literrary Январь 27th 2023, 22:54
» Перевод форума на другой язык.
автор Ilya Январь 27th 2023, 19:25
» сделать снижение к navstrip (к тексту) окна браузера
автор literrary Январь 25th 2023, 13:03
» Новое управление смайликами в Панели Администратора
автор Luz Январь 24th 2023, 13:50
» Техническое обслуживание, запланированное на 31 января 2023 г.
автор Luz Январь 23rd 2023, 13:01
Стеклянное меню
Стеклянное меню
автор Феникс Декабрь 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
Возраст : 51
Регистрация : 2015-10-29
Благодарности : 251
-
Похожие темы» Как можно закруглить углы у панели меню и выровнять разделы меню по одинаковой ширине?
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Facebook
ВКонтакте
