Your Roll

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


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

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

Космо

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


Как вы видите, в неё можно напихать немало ссылок, и можно добавить сразу несколько таких навигаций.

Для начала нам надо будет добавить в CSS нашего форума вот этот код:
Для светлых скинов:
Код:
.mininav {
display: table;
background: #E2E2E2;
border-radius: 6px;
font-size: 12px;
line-height: 18px;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
border: 5px solid transparent;
}
.mininav a {
display: block;
overflow: hidden;
height: 0px;
transition: 1s ease all;
-o-transition: 1s ease all;
-moz-transition: 1s ease all;
-webkit-transition: 1s ease all;
}
.mininav:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.mininav:hover a {
height: 18px;
}
.mininavhold {
position: relative;
height: 28px;
z-index: 5;
}
Для тёмных скинов:
Код:
.mininav {
display: table;
background: #444;
border-radius: 6px;
font-size: 12px;
line-height: 18px;
transition: 0.5s ease all;
-o-transition: 0.5s ease all;
-moz-transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;
border: 5px solid transparent;
}
.mininav a {
display: block;
overflow: hidden;
height: 0px;
transition: 1s ease all;
-o-transition: 1s ease all;
-moz-transition: 1s ease all;
-webkit-transition: 1s ease all;
}
.mininav:hover {
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.mininav:hover a {
height: 18px;
}
.mininavhold {
position: relative;
height: 28px;
z-index: 5;
}

Для обладателей форума на forumotion - движка punBB - надо будет также добавить вот это:
Код:
.pun table .tcl {
overflow: visible;
}

Код самой навигации можно вставить в любое место, где поддерживается HTML. Сам код такой:
Код:
<div class="mininavhold"><div class="mininav">
<b>название навигации</b> ▼
<a href="ссылка 1">текст ссылки 1</a>
<a href="ссылка 2">текст ссылки 2</a>
<a href="ссылка 3">текст ссылки 3</a>
</div></div>

Ссылок можно добавлять сколько угодно. Единственное ограничение - это не надо делать слишком длинных названий. В идеале - не более восьми слов, иначе на небольших экранах/узких дизайнах название ссылки будет немного обрезаться.

Если вы ставите навигацию как на скрине - после описания форума - нелишним будет перед навигацией сделать пропуск:
Код:
<br /><br />

Кстати, фон навигации указывается тут (ненужное вырезано - я верю, вы найдёте :) ):
.mininav {
background: #444;
}

Всё В)

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



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


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
Спасибо, пригодится для ссылок в описании форумов ;)

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

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

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