Код:
<!--HTML-->
<ul class="menu">
<li tabindex="1">
<span class="title">JANUARY</span>
<div class="content"><align=center>ИГРЫ ТУТ НЕ БЫЛО</align>
</div>
</li>
<li tabindex="1">
<span class="title">FEBRUARY</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">MARCH </span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">APRIL</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">MAY</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">JUNE</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">JULY</span>
<div class="content">
<a href="http://young.f-rpg.ru/viewtopic.php?id=184#p13182">[017] what doesn't kill you makes you stronger</a> - 6 июля, 17:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=160#p10615">[013] the future seems to stay unknown</a> - 10 июля, ~ 14:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=101#p4743">[009] interlacing</a> 13 июля, ~ 13:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=156#p10492">[012] hunting for information is never easy</a> - 21 июля, 0:00<br>
</div>
</li>
<li tabindex="1">
<span class="title">AUGUST</span>
<div class="content">
<a href="http://young.f-rpg.ru/viewtopic.php?id=82#p3239">[005] deja vu</a> - 12 августа 2024, ~ 18:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=211#p16586">[020] many shades of black</a> - 17 августа, 18:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=190#p14070">[018] butterflies and hurricanes</a> - 19 сентября, ~ 22:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=194#p14379">[019] you are an idiot, dattebayo</a> - 19 августа, ~ 23:30<br>
</div>
</li>
<li tabindex="1">
<span class="title">SEPTEMBER</span>
<div class="content">
<a href="http://young.f-rpg.ru/viewtopic.php?id=268#p20760">[025] burn the pages</a> - 4 сентября, 12:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=320#p26173">[035] Human emotion</a> 5 сентября, 14:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=231#p17040">[021] Retrospect</a> - 5 сентября, ~ 19:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=256#p19559">[023] bad habits</a> - 5 сентября, 20:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=294#p23419">[028] help is on the way</a> - 5 сентября, ~ 0:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=253#p19262">[022] come back to me</a> - 7 сентября, 02:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=272#p21454">[026] hey, do you want some boobs?</a> - 10 сентября, 20:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=308#p25229">[033] Houston, we have a problem</a> - 11 сентября, 15:20<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=302#p24527">[032] Why so serious, big bro?</a> - 12 сентября, ~ 10:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=295#p23448">[029] Will we all just burn like fire</a> - 12 сентября, 12:30<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=300#p24189">[031] Run for your life</a> - 15 сентября, 15:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=311#p25451">[034] accidental impacts</a> - 19 сентября, 8:00<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=351#p32008">[037] Not coming home</a> - 20 сентября, 17:50 <br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=296#p23449">[030] You will never know</a> - 23 сентября, 9:10<br>
<a href="http://young.f-rpg.ru/viewtopic.php?id=291#p23279">[027] Bad books are worse than useless</a> - 27 сентября, 17:20<br>
</div>
</li>
<li tabindex="1">
<span class="title">OCTOBER</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">NOVEMBER</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
<li tabindex="1">
<span class="title">DECEMBER</span>
<div class="content">ИГРЫ ТУТ НЕ БЫЛО</div>
</li>
</ul>
<script>
(function(){
// Добавялем кнопку закрытия каждому блоку
$('.menu .content').append('<span class="close">x</span>');
// Выводим окно
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Сбрасываем все
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего
$('.menu li').click(function() {
showContent($(this));
});
// Содержание будет также выводиться с помощью нажатия клавиши ENTER
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// Когда нажат верхний правый элемент, сбрасываем все
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Также сброс происходит по нахатию клавиши ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
</script>
