Как сделать многослойный боковой блок с кнопками?

Question

[AlexandrEvil]

Доброго времени суток!
Имеется код и стиль для боковой панели с 1 кнопкой. как реализовать на ней более 1 кнопки. при наведении на которые менялись бы панели с информацией я не знаю, мои кривые руки делают мешанину))) Помогите пожалуйста)...

spoiler

<div class="eventsblock">
							<div class="eventsblockhover">Events</div>
								<div class="box-style2">
									<div class="title2">

									</div>
									<p style="margin: 0 auto; display: block; text-align: center;">Server Time : <span id="ServerTime">19:50:42  Feb 8</span></p>
									<div class="entry">
										<div id="events">
<div style="clear:both;"></div>
										<div><span>Blood Castle</span><small id="event1">00s</small></div><div><span>Devil Square</span><small id="event2">9m 19s</small></div><div><span>Chaos Castle</span><small id="event3">1h 24m 19s</small></div><div><span>Doppel Ganger</span><small id="event4">54m 19s</small></div><div><span>Arca War</span><small id="event5">3d 1h 9m 19s</small></div><div><span>Castle Siege</span><small id="event6">5d 23h 9m 19s</small></div><div><span>Last Man Standing</span><small id="event7">39m 19s</small></div><div><span>Golden Invasion</span><small id="event8">39m 19s</small></div><div><span>Scramble Words</span><small id="event9">54m 19s</small></div></div>
										<script type="text/javascript">
											$(document).ready(function () {
												App.getEventTimes();
											});
										</script>
									</div>
								</div>
							</div>

.eventsblock {    
border: 1px solid #828282;
	max-width: 270px;
	width: 100%;
	background: ##29292c;
	position: fixed;
	left: -270px;
	top: 50%;
	z-index: 100;
	padding: 20px;
	transform: translate(0%,-50%);
	transition: 0.5s;    
background: url(../images/fon-account-bg.jpg) repeat;
}

.eventsblockhover {
    border: 1px solid #828282;
    border-radius: 0px 0px 5px 5px;
    position: absolute;
    right: -85px;
    position: absolute;
    right: -88px;
    top: 43px;
    background: #000;
    padding: 13px 27px 13px 27px;
    color: #C0C0C0;
    transform: rotate(-90deg);
    letter-spacing: 3px;
    display: block;
    font-size: 16px;
    font-family: 'Lucida Sans Unicode';
    text-transform: uppercase;
    background: url(../images/fon-account-bg.jpg) repeat;
}

.eventsblock:hover  {
	left: 0px;
	transition: 0.5s;
}

.eventsblock h2 {
	color: #fff;
}

Пример того что хотелось бы:
https://jsfiddle.net/8dtw20pe/

Answer 1

[MamaLuyba]

Лучше, конечно, код куда-нибудь закидывать, что визуализация была. Никто в простыне кода разбираться особо не будет. Без негатива.

А в чем сложность? Делаешь разметку: слева меняющаяся инфа, справа - кнопки. У кнопок задаешь поворот текста, чтобы было сверху вниз. Ну и вешаешь на них onmouseover. В этом событии получаешь id кнопки, и в соответствии с ним меняешь инфу на нужную.

Comments

[AlexandrEvil]

Сделал что смог. обновил свой пост!

[MamaLuyba]

AlexandrEvil, да, тут уже посложнее функционал. Но всё равно - советы те же + надо transition задать, чтобы при наведении плавно менялась ширина.
А так - готовое решение вряд ли тут кто-то напишет - слишком большой объем работы.