Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Слетает соединение с форумомавтор Logic Декабрь 1st 2023, 15:21
» Скачать иконки наград
автор Logic Декабрь 1st 2023, 11:28
» Поздравляю Danu Domirani с Днём рождения!
автор Дмитрий Зверев Ноябрь 24th 2023, 10:33
» Загрузка форума
автор Дмитрий Зверев Ноябрь 24th 2023, 10:16
» Проблемы на форумах 2х2 с открытием спойлера и ограничением html
автор Дмитрий Зверев Ноябрь 24th 2023, 10:13
» Кто знает, как послать модера в недруги?
автор kamsus Октябрь 27th 2023, 05:01
» Как удалить счетчики и баннеры на форуме
автор Of Сентябрь 19th 2023, 15:21
» Проблема загрузки и работы форума для админа
автор TK Сентябрь 19th 2023, 12:21
» инструкция с картинками по загрузке с мобильного
автор literrary Сентябрь 16th 2023, 10:09
» Редактирование поста
автор yudined Сентябрь 5th 2023, 02:42
Стеклянное меню
Страница 1 из 1
Стеклянное меню
автор Феникс Декабрь 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
Благодарности : 252
-
Похожие темы» Как можно закруглить углы у панели меню и выровнять разделы меню по одинаковой ширине?
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
» Как ввести меню "зачеркнутый текст" в меню быстрых постов?
» Удаление ненужных кнопок меню + Выдвигающиеся строки меню
» Меню с выпадающими меню подразделов в боковом виджете
» как из меню убрать тот или иной пункт) на верхнем меню)
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Facebook
ВКонтакте
