Как правильно позиционировать кнопки вертикального меню ?

Question

[Артем Шеленговский]

Помогите пожалуйста новичку не могу ничего найти.
Я хочу сделать вертикальное меню сверху кнопка "наверх" снизу "вниз" между кнопками ненумерованный список со свойством overflow: hidden; в дальнейшем кнопки будут листать список вверх и вниз с помощью jquery.
Внизу приложена картинка с макетом желаемого результата.
Вопрос собственно по разметке и таблицам стиля.
И можно ли, как кнопку, использовать один из li? Или это принято делать на div?

<div class="submenu_left">
            	<div class="submenu_button" id="up_button"><a href="#"></a></div>
                <div class="submenu_button" id="down_button"><a href="#"></a></div>
               	<ul class="submenu_left">
					<li><a href="#">li 1</a></li>
					<li><a href="#">li 2</a></li>
					<li><a href="#">li 3</a></li>
					<li><a href="#">li 4</a></li>
					<li><a href="#">li 5</a></li> 
		</ul>
                 
			</div>

.submenu_left {
	position: absolute;
	background-color: white;
	width: 300px;
	height: 290px;
	float: left;
	overflow: hidden;}
	
.submenu_left ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;}

.submenu_left li a {
        float: left;
	display: block;
	width: 300px;
	padding: 10px 0px;
	margin: 5px 0px;}

.submenu_button {
	height: 15px;
	position: relative;
	overflow: hiddden;}

#up_button {
	background-color: #00F852;}
	
#down_button {
	background-color: #FFFD00;
	top: 260px;}

Answer 1

[Alexander Tartmin]

Хочу купить машину что бы колеса были резиновыми а крыша зелёная но в стакане у меня налит томатный сок в дальнейшем когда я буду нажимать на педали машина будет ездить в перёд и назад с помощью бензина.

Извините что язвлю, но сами то читали что написали? =)
Разницы на какой элемент нажимать и на какой вешать обработчик событий нету. Можно хоть на абзацах построить такое меню.

Вопрос собственно по разметке и таблицам стиля.

Так а где вопрос собственно? =) Попробовал Ваше код, выглядит не так как на картинке, с этим Вам помочь? jsfiddle.net/ro89xd4m

Comments

[Артем Шеленговский]

Ну да сумбурно написал) да мне нужно с этим помочь, поделитесь пожалуйста опытом.

[Alexander Tartmin]

@arbelian jsfiddle.net/fv2m2fhc/1 - это вариант с скролом вниз и вверх. Опаздываю на роботу, так что пока так бросаю, приду в офис и допишу Вам.

[Alexander Tartmin]

@arbelian jsfiddle.net/fv2m2fhc/3 дописал коментарии к коду, так понятней будет

[Артем Шеленговский]

Огромнейшее спасибо вы мне все подробно разжевали! :)

[Alexander Tartmin]

@arbelian вечером если у меня будут силы я всё же допишу до конца, пока можете сами попробовать допилить то, что Вам нужно.

Answer 2

[Юрий Лобанов]

Например, вот так
codepen.io/iiil/pen/HupDC
Как правильно — ответа нет, много способов, но так, как делаете Вы — не очень правильно. Зачем-то везде float, зачем-то везде relative и так далее.

Comments

[Артем Шеленговский]

Скажите в чем ошибки если можно. То что вы приложили мне понятно, но для того чтоб скрыть список кнопка вниз должна быть равна по высоте кнопке меню, не могли бы сказать еще как это делается если не сложно.

[Юрий Лобанов]

@arbelian но она у Вас же 15px. Ну и список и так скрыт, обратите внимание.