<div id="tabs">
<!-- блок подменю -->
<div id="submenu">
<!-- под кнопкой игра -->
<div id="game" class="submenutext">
<!-- блок новости -->
<div id="news1">
<div id="zag">
Неигровые новости:
</div>
<div id="text">
⁃ добавлены разделы для любителей дегустации пива. Ознакомьтесь с ними в данном разделе, может быть вы сможете обрести новое хобби! <br>
⁃ Сменилась погода и было выбрано название сезона: Зима Чавкающего Снега
</div>
</div>
<div id="news2">
<div id="zag">
Игровые новости:
</div>
<div id="text">
⁃ в клан Солнцекошек пришлый одиночка принёс блох. Львы до сих пор борются с их нашествием <br>
⁃ Тигры и горные кошки поймали огромного яка: чтобы он не сгнил, ели его два клана сразу. <br>
⁃ Землетрясение прогремело в тропических горах. Вольные кошки могут исследовать местность по правилам ивента. <br>
⁃ Пестрокошки плохо молились духам и были наказаны: молния сожгла лес колючих деревьев <br>
</div>
</div>
<!-- конец блока новости -->
<!-- блок объявление и ссылки -->
<div id="ad_link">
<!-- блок объявление -->
<div id="ad">
<div id="zag">
Объявления:
</div>
<div id="text">
⁃ в акциях появилось несколько новых предложений от амс. Нам нужна ваша помощь! <br>
⁃ погода на этот месяц определена, а какая будет в следующем? Пишите в этой теме свои пожелания <br>
⁃ Проходит ивент. Подробнее читайте тут <br>
⁃ Проголосуйте за награды!<br>
</div>
</div>
<!-- конец блока объявление-->
<!-- блок ссылки -->
<div id="link">
<div id="zag">
Полезные ссылки:
</div>
<div id="link_text">
<a href="#"><span>⁃ Самая важная ссылка для каждого игрока - это ссылка на Правила. Не забывайте регулярно освежать память. </span></a><br>
<a href="#"><span> ⁃ Новичкам стоит ознакомиться с Лором и навигацией по сайту, чтобы быстро влиться в поток. </span></a><br>
<a href="#"> <span>⁃ Часто задаваемые вопросы тут. Прочитайте тему, это может помочь Вам быстро разобраться с проблемой. </span></a><br>
</div>
</div>
<!-- конец блок ссылки -->
</div>
<!-- конец блока объявления и ссылки -->
</div>
<!-- конец под кнопкой игра -->
<!-- блок помощь -->
<div id="help" class="submenutext">
<div id="help_pic">
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про гепардов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про пум/ирбисов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про тигров</span></a>
<br>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про ягуаров</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про львов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про леопардов</span></a>
</div>
</div>
<!-- конец блока помощь -->
</div>
<!-- конец блока подменю -->
<!-- колонка меню -->
<div id="menu">
<span alt="#game" style="cursor: pointer;">Игра</span><br>
<span alt="#help" style="cursor: pointer;">Помощь</span>
</div>
<!-- конец колонки меню -->
</div>
<style>
#tabs {
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/39055.png);
border-image-slice: 35 190 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
width: 100%;
max-height: 160px;
margin: 0px 0;
padding: 2%;
z-index: 1;
}
#menu, #submenu {
display: table-cell;
vertical-align: top;
}
#menu {
margin: -10%;
padding: 3% 0% 3% 0%;
width: 60%;
}
#menu span {
display: block;
text-align: center;
margin: 10% -5%;
padding: 3% 0% 10% 0%;
line-height: 25px;
width: 100%;
font-size: 15px;
font-weight: bold;
position: relative;
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
border-image-slice: 55 200 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
border-image-outset: 2px 10px 2px 10px;
z-index: 2;
}
#menu .active {
color: #efe1c9;
}
#menu span:hover {
color: #ffffff;
}
#submenu {
margin-left: 3%;
width: 100%;
}
.submenutext {
position: relative;
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
border-image-slice: 55 200 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
border-image-outset: 10px;
z-index: 2;
height: 125px;
padding: 1%;
margin: 1%;
width: 92%;
}
#game {
position: relative;
overflow-y: auto;
height: 125px;
}
#news1 {
position: relative;
display: table-cell;
overflow-y: auto;
height: 125px;
padding: 3%;
margin: 3%;
}
#news2 {
position: relative;
display: table-cell;
overflow-y: auto;
height: 125px;
padding: 3%;
margin: 3%;
}
#ad_link {
display: table-cell;
height: 125px;
}
#ad {
display: table-row;
height: 60px;
overflow-y: auto;
padding: 3%;
}
#link {
display: table-row;
height: 60px;
overflow-y: auto;
padding: 5% 3% 3% 3%;
}
#zag {
text-align: center;
font-family: 'Comic CAT';
text-transform: lowercase;
padding-top: 2%;
font-size: 15px!important;
color: #0f120b;
}
#text, #link_text {
text-align: left;
padding-top: 1%;
font-family: 'Helvetica';
text-transform: lowercase;
font-size: 10px!important;
color: #000000;
}
#link_text a {
color: #33391e;
}
#help_pic {
text-align: center;
overflow-y: auto;
height: 125px;
}
#help_pic a {
display: inline-block;
margin: 10px;
}
#help_pic a img {
display: block;
width: 25%;
height: 25%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#submenu div.submenutext").hide();
$("#menu span:first").addClass("active").show();
$("#submenu div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("active");
$(this).addClass("active");
$("#submenu div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>