ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Поисковой ресурс

Проект от команды FD

Спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Большая новость! Восстановление потерянного контента, уход одного админа и новое правило - обо всём читайте по ссылке.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Выделение активных пунктов меню (JS, CSS)

Сообщений 1 страница 2 из 2

1

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Пример как это реализовано на текущем проекте">
  <div id="icon"></div>
  <img src="https://forumupload.ru/uploads/0007/e3/f7/6822/445205.png" class="postimg">
</a>

<div id="cover-block">
Дата: 03.04.2022<br>
Авторы: <a href="/profile.php?id=6774" target="_blank">satsana</a>, <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный скрипт<br>
Платформа: MyBB <br>
Описание: Скрипт и css-код, позволяющие прописать отдельный стиль для "активных" пунктов меню навигации, пользовательского меню, меню профиля и в меню в администрировании.
</div>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

КОД И ОПИСАНИЕ
Скрипт от satsana

Устанавливается в Администрирование - Формы - Html-верх.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Ставим скрипт и прописываем стили на CSS в Администрирование - Свой стиль. Например:

Код:
#pun-navlinks li.active a,
#pun-ulinks li.active a {
    color: red;
}

Недостаток: невозможно сделать выделение "активным" пункта "Администрирование".
Плюс: делает возможным выделять "активными" пункты в пользовательском меню.

CSS-код от Герда

Оформление активных кнопок в меню навигации, в навигации профиля и админки + эффект при наведении. Ставится к остальным CSS-кодам в Администрирование - Свой стиль.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

В коде подписано что выделяется в меню. Вы можете увидеть несколько раз перечислены пункты меню - это не ошибка. Например, это строчка означает что пункт в меню "Регистрация" выделен активным на странице где указывается логин, имейл и так далее, то есть непосредственно при регистрации:

#pun-regrules #pun-navlinks li#navregister span, /*Регистрация*/

Эта строчка тоже сделает пункт "Регистрация" активным, но уже при чтении правил:

#pun-register #pun-navlinks li#navregister span, /*Регистрация*/

То есть:

#pun-viewforum #pun-navlinks li#navindex span, /*Форум*/

Красным - кодовое название страницы;
Зелёным - пункт в меню.

Если у вас есть страницы и дополнительные пункты в меню, то их тоже можно сделать активными. Например:

#pun-navlinks #navextra3 a span

Это ставится через <style></style> на самих страницах. 

В меню навигации и в админке немного проще, тут можно обойтись одной строчкой, так как есть код, обозначающий активную страницу: li.isactive a

В меню навигации такого, увы, нет.

Пользовательское меню таким способом настроить не получится.

Если коротко - скрипт от Сатсаны более универсальный и простой, css-код от Герды более сложный, но в то же время гибкий. На текущем форуме используется именно решение от Герды. Выбирайте какое подходит именно вам и настраивайте на свой вкус.

Коды и пояснения могут показаться запутанными, так как нет универсального решения, каждый может настроить по-своему. Поэтому для использования этих кодов рекомендуется иметь хотя бы базовые знания CSS. 

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

2

Попробовала у себя эту штуку - поставила сатсанин скрипт - работает! Единственное, скрипт не предусматривает выделение русфф-страниц "Награды" и "Уведомления" активными. Но это мелочи, так вещь хорошая!

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляй ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удали символы: "http://", "https://" или "www."