Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Похожая навигация (или список ссылок) уже есть на многих форумах, но я написал свой код, гораздо интереснее и проще :)

Блок ссылок может выглядеть вот так:


При наведении плавно подсвечивается и немного уплывает вбок.

Нам надо будет вставить один-единственный блок кода и поставить туда свои ссылки.

Вставить его можно будет в виджеты, в приветствие, в верх форума для myBB.

Сам код такой:

Светлая схема:
Код:

<!-- Ищите эти и другие коды на your.roll.tv -->
<style>
.nicenaviga a {
display: block;
background: #E2E2E2;
border-left: 5px #BBB solid;
margin-bottom: 1px;
padding: 2px 5px;
text-align: left;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
margin-right: 5px;
}
.nicenaviga a:hover {
margin-left: 5px;
margin-right: 0px;
background: #F3F3F3;
}
</style><div class="nicenaviga">
<a href="Ссылка 1">Текст ссылки 1</a>
<a href="Ссылка 2">Текст ссылки 2</a>
<a href="Ссылка 3">Текст ссылки 3</a>
</div>
Тёмная схема:
Код:

<!-- Ищите эти и другие коды на your.roll.tv -->
<style>
.nicenaviga a {
display: block;
background: #202020;
border-left: 5px #666 solid;
margin-bottom: 1px;
padding: 2px 5px;
text-align: left;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
margin-right: 5px;
}
.nicenaviga a:hover {
margin-left: 5px;
margin-right: 0px;
background: #313131;
}
</style><div class="nicenaviga">
<a href="Ссылка 1">Текст ссылки 1</a>
<a href="Ссылка 2">Текст ссылки 2</a>
<a href="Ссылка 3">Текст ссылки 3</a>
</div>

Думаю, с подстановкой своих ссылок проблем не возникнет. Если вам понадобится больше ссылок, дублируйте эту строку:
Код:
<a href="Ссылка 3">Текст ссылки 3</a>

Код можно использовать несколько раз на одной странице. Если используете как раз несколько - оставьте только один блок стилей, который заключён между тегами <style>; они выглядят в скопированном коде примерно вот так:
Код:
<style>
.nicenaviga a {
  ...
}
</style>

Другие можно удалить.

Рассмотрим код стилей, чтобы оформить блок ссылок по-своему (часть вырезана):
.nicenaviga a {
background: #202020; /* цвет фона */
border-left: 5px #666 solid; /* граница */
}
.nicenaviga a:hover {
background: #313131; /* цвет фона при наведении */
}

Без редактирования стилей блок со ссылками постарается заполнить всё имеющее пространство по ширине. Если вам это не надо, то после
Код:
.nicenaviga a {
Добавьте:
Код:
width: 200px;

Всё :)

(с) Your Roll. Туториал предоставлен блоггером и кибермагом Космо Мизраил Горынычем. Любая публикация данного материала без его разрешения запрещена.



Последний раз редактировалось: Космо (05.04.13 9:18), всего редактировалось 1 раз(а)

Посмотреть профиль

Лис

avatar
Лиса всея Сети.
>< Она так мило шевелиться при наведении:3


______________________________

Лисья нора:
Получите помощь для своей ролевой, сделайте заказ, это бесплатно.

Лис помогает:
❅ Пиар
❅ Акции
❅ Разработка мира
❅ Любая текстовая часть
❅ Помощь в разработке идеи


Посмотреть профиль

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

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