slide in-out html element

Question

Я ищу что-то вроде «скользящего выдвижного ящика» - однако все они охватывают всю высоту страницы. Я хотел бы, чтобы слайд-в-вом просто занимал необходимое пространство - и не охватывают всю страницу. Я также googled для меню гамбургера на аналогичных линиях.

Я предполагаю, что узнал элемент, который мне нужен. Пожалуйста, обратитесь к скриншоту ниже.

Мой вопрос: Что называется элементом, чтобы я мог искать и разрабатывать свою собственную версию. Любой указатель будет большой помощью.

https://www.templatemonster.com/blog/responsive-sliding-drawer-menu-lightbox-effect/

Answer 1

пытается это

[demo]

HTML

<div class="slideOutTab"> 
    <a href="http://facebook.com">Like Us on Facebook</a> 
</div> 

CSS

div.slideOutTab { 
    position: fixed; 
    width: 150px; 
    height: 43px; 
    top: 200px; 
    left: -107px; 
} 

div.slideOutTab a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    text-indent: -999em; 
    background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat; 
} 

div.slideOutTab a:hover { 
    background-position: 0 -43px; 
} 

Answer 2

Вы можете искать: Скользящие панели, фиксированная панель положение, фиксированная Скользящая панель

По крайней мере, вы можете начать с этих терминов поиска и найти больше вещей, как вы глубже вникать примеры.

Я сделал 2-минутный поиск с использованием вышеуказанных условий, и я нашел много примеров, которые могут вам помочь. Дать ему шанс!

Answer 3

Попробуйте с pure css

div.slideOutTab { 
 
    position: fixed; 
 
    width: 150px; 
 
    height: 43px; 
 
    top: 100px; 
 
    left: -107px; 
 
    transition-duration:1s; 
 
    -ms-transition-duration:1s; 
 
    -webkit-transition-duration:1s; 
 
    -moz-transition-duration:1s; 
 
} 
 

 
div.slideOutTab a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    text-indent: -999em; 
 
    background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat; 
 
} 
 

 
div.slideOutTab:hover { 
 
    background-position: 0 -43px; 
 
    left:0; 
 
}

<div class="slideOutTab"> 
 
    <a href="http://facebook.com">Like Us on Facebook</a> 
 
</div>