Форум
Сейчас мы сделаем примерно такую навигацию:
Как вы видите, в неё можно напихать немало ссылок, и можно добавить сразу несколько таких навигаций.
Для начала нам надо будет добавить в CSS нашего форума вот этот код:
Для обладателей форума на forumotion - движка punBB - надо будет также добавить вот это:
Код самой навигации можно вставить в любое место, где поддерживается HTML. Сам код такой:
Ссылок можно добавлять сколько угодно. Единственное ограничение - это не надо делать слишком длинных названий. В идеале - не более восьми слов, иначе на небольших экранах/узких дизайнах название ссылки будет немного обрезаться.
Если вы ставите навигацию как на скрине - после описания форума - нелишним будет перед навигацией сделать пропуск:
Кстати, фон навигации указывается тут (ненужное вырезано - я верю, вы найдёте
):
Всё
(с) Your Roll. Туториал предоставлен блоггером и кибермагом Космо Мизраил Горынычем. Любая публикация данного материала без его разрешения запрещена.
Как вы видите, в неё можно напихать немало ссылок, и можно добавить сразу несколько таких навигаций.
Для начала нам надо будет добавить в 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 раз(а)
