幻灯片输入html元素

Question

我正在寻找类似“滑动抽屉”的东西 - 但它们都跨越页面的整个高度。我希望幻灯片输入只占用它所需的空间 - 而不是覆盖整个页面。我也用类似的线路搜索汉堡包菜单。

我想我发现了我需要的元素。请参考下面的截图。

我的问题是： 什么是被调用的元素，以便我可以搜索和开发我自己的版本。任何指针都将是一个很好的帮助。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;