Навигация по библиотеке
Ссылки "Бестиарий", "Список богов" и "Распространенные расы" ведут на внешние ресурсы со справочниками. Пользуйтесь фильтрами.
Основные фильтры для списка богов по пантеонам: "фаэрунскй пантеон" и пантеон вашей расы, если он есть.
[html]<script>
let currentlyOpenDropdown = null; // Move the variable outside to track the currently open dropdown
document.querySelectorAll('.menu').forEach(menu => {
const dropdown = menu.querySelector('.dropdown');
// Function to show dropdown
function showDropdown() {
dropdown.style.display = 'flex';
dropdown.style.pointerEvents = 'auto'; // Make it clickable
dropdown.style.opacity = '0';
dropdown.style.transform = 'translateY(-10px)';
setTimeout(() => {
dropdown.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
dropdown.style.opacity = '1';
dropdown.style.transform = 'translateY(0)';
}, 10);
}
// Function to hide dropdown
function hideDropdown(dropdownElement) {
dropdownElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
dropdownElement.style.opacity = '0';
dropdownElement.style.transform = 'translateY(-10px)';
dropdownElement.style.pointerEvents = 'none'; // Make it non-clickable
setTimeout(() => {
dropdownElement.style.display = 'none';
}, 300);
}
// Toggle dropdown on menu click
menu.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent click from bubbling up
// If there's an open dropdown, close it before opening another one
if (currentlyOpenDropdown && currentlyOpenDropdown !== dropdown) {
hideDropdown(currentlyOpenDropdown);
}
// Toggle the current dropdown
if (dropdown.style.display === 'flex') {
hideDropdown(dropdown);
currentlyOpenDropdown = null; // Reset currently open dropdown
} else {
showDropdown();
currentlyOpenDropdown = dropdown; // Set the newly opened dropdown
}
});
});
// Close dropdown if clicking outside the menu
document.addEventListener('click', (event) => {
if (currentlyOpenDropdown) {
const menu = currentlyOpenDropdown.closest('.menu');
if (!menu.contains(event.target)) {
hideDropdown(currentlyOpenDropdown);
currentlyOpenDropdown = null; // Reset if clicked outside
}
}
});
</script>
<style>
/* wrapper */
.nav-wrap {
min-height: 400px;
width: 100%;
}
.nav {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
display: flex;
gap: 14px;
position: relative;
max-width: 600px;
align-items: start;
justify-content: space-between;
flex-wrap: wrap;
}
/* main button */
.menu {
position: relative;
}
.menu-btn {
background-color: #1d2846;
color: white;
padding: 10px 30px;
font-family: "Philosopher";
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
border: solid 1px #704a18;
transition: background-color 0.3s ease;
}
.menu-btn:hover {
background-color: #1d2733;
}
/* dropdown menu */
.dropdown {
position: absolute;
top: 100%;
left: -35%;
border-radius: 4px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
width: 240px;
flex-direction: column;
padding: 8px 10px;
text-align: left;
background: url(https://i.vgy.me/9PBO1F.png) no-repeat top center;
border-color: var(--font-accent-two-color);
border-width: 4px 1px 1px 1px;
border-style: solid;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
display: none;
pointer-events: none;
}
.dropdown a {
padding: 10px 20px;
text-decoration: none;
color: #333;
font-family: "Helvetica";
font-size: 15px;
display: block;
transition: color 0.3s ease;
}
.dropdown a:hover {
color: #704a18;
}
/* long menu for classes */
.botm-menu {
position: relative;
min-width: 100%;
}
.botm-menu .menu-btn {
width: 100%;
}
.long-drop {
left: 0;
width: 580px;
max-height: 240px;
flex-wrap: wrap;
}
/* Media queries for smaller screens */
@media screen and (max-width: 540px) {
.nav {
position: static;
transform: none;
max-width: 100%;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.menu-btn {
width: 94vw;
margin-left: 5px;
text-align: center;
padding: 10px 0;
}
.dropdown {
left: 0;
width: 100%;
max-width:90vw;
box-shadow: none;
}
.long-drop {
width: 99%;
max-height: 360px;
}
.botm-menu .menu-btn {
width: 94vw;
margin-left: 5px;
}
/* Ensure the nav doesn't go off the screen */
.nav-wrap {
min-height: 850px;
width: 100%;
padding: 0 10px;
}
}
</style>
<div class="nav-wrap">
<div class="nav">
<div class="menu">
<button class="menu-btn">История</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=11">Сотворение мира</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p16">Древнейшая история</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p17">Эпоха драконов и гигантов</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p18">Владычество эльфов</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p19">Войны Короны</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p20">Времена Оснований</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p21">Эпоха Человечества</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p22">Эпоха Переворотов </a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=11#p23">Нынешний век</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Магия</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p10">Природа магии</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p10">Источники магических способностей</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p12">Школы магии и круги заклинаний</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p51">Арканная и божественная магия</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p51">Фамильяры и животные-компаньоны</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p11">Магические предметы</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=9#p130">Ки и псионика</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Cущества</button>
<div class="dropdown">
<a href="https://dnd.su/race/?source=VGM+MTF+PH">Распространенные расы</a>
<a href="https://dnd.su/bestiary/">Бестиарий</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Божества (WIP)</button>
<div class="dropdown">
<a href="#">FAQ о богах</a>
<a href="#">Пантеоны</a>
<a href="https://ttg.club/gods">Список божеств</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Календарь</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=10">Фаэрунский календарь</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=10#p14">Праздники</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Организации</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p168">Арфисты</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p169">Альянс Лордов</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p170">Зентарим</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p184">Культ Дракона</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p185">Красные Волшебники Тэя</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=39#p189">Теневые воры Амна</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">География</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=51">Общая информация и карты</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p512">Побережье Мечей</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p515">Уотердип</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p516">Земли Интриги</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p1245">Анарох</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p2217">Андердарк</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=51#p1615">Долина Ледяного Ветра</a>
</div>
</div>
<div class="menu">
<button class="menu-btn">Другое</button>
<div class="dropdown">
<a href="https://forgotten-realms.ru/viewtopic.php?id=44">Дополнительные материалы</a>
</div>
</div>
<div class="botm-menu menu">
<button class="menu-btn">Классы</button>
<div class="dropdown long-drop">
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p25">Барды</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p26">Варвары</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p27">Воины</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p28">Волшебники</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p29">Друиды</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p30">Клерики</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p145">Избранные души</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p31">Монахи</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p32">Паладины</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p33">Плуты</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p34">Псионики</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p35">Следопыты</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p36">Чародеи</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p37">Чернокнижники</a>
<a href="https://forgotten-realms.ru/viewtopic.php?id=12#p38">Шаманы</a>
</div>
</div>
</div>[/html]
[hideprofile]