Как сдвинуть кнопку со стрелкой (выезжающий слайдер на css)?

Делаю слайдер аналогично этому
https://ruseller.com/lessons.php?rub=2&id=1082
и все работало как надо.

Но понадобилось изменить верстку (свойство position). (К сожалению, так было нужно.)
В результате кнопка со стрелкой (див) не смещается вместе с основным дивом (который появляется при наведении на эту кнопку).

Как сделать так, чтобы смещались и див и кнопка рядом, как будто она прикреплена к краю дива?
Мой код
https://jsfiddle.net/vb88mfzy/1/

---------------------------------------
Мой код (правила обязывают выкладывать и тут)
html
<div id="GRAPH1_container"></div><div class="GRAPH1_graph_menu_slider">
<div class="graph_menu_slider">
<div class="arrow_menu_button_1"><div class="arrow_right_menu_button_1_in"></div></div>
<div class="graph_menu_slider_inner">
<div class="graph_menu_content ui_panel_1">
1111
</div>
</div>
</div>
</div></div></div>


css
.graph_menu_slider {
z-index:2;
position: absolute; /*Вот что пришлось изменить*/
top: 50%;
left: 0;


-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

.graph_menu_slider_inner {
position: absolute;  /*Вот что пришлось изменить*/
left: -424px;
 margin-top:-18vh; 

-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.graph_menu_slider:hover {
left: 0px;

}
.graph_menu_slider:hover .graph_menu_slider_inner {
left: 0px;
}


.graph_menu_content
{
width:400px;
height:20vh;
border: 2px solid #F0F0F0 !important;
}



/* Ниже оформление*/

.ui_panel_1
{
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
vertical-align: middle;
}


.arrow_right_menu_button_1_in {
background: #0C7ECB;
width:1.8rem;
height:1.9rem;
content:'';
clip-path: polygon(0 34%, 50% 80%, 100% 34%, 80% 34%, 50% 60%, 20% 34%);
transform:  rotate(-90deg);
}


.arrow_menu_button_1{
border: 0.0625rem solid #00AEFF; /* 1px */
background: #171B23;
cursor:pointer;
width:2.0rem;
padding: 0.4rem;
text-decoration: none;
transition-property: background;
transition-duration: 100ms;
transition-timing-function: ease;
transition-delay: 0s; 
vertical-align: middle;
}
.arrow_menu_button_1:hover {
border: 0.0625rem solid #00AEFF; /* 1px */
background: #0E1015;
}
  • Вопрос задан
  • 257 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы