幻燈片輸入html元素

我正在尋找類似「滑動抽屜」的東西 - 但它們都橫跨頁面的整個高度。我希望幻燈片輸入輸出只佔用它所需的空間 - 並且沒有覆蓋整個頁面。我也用類似的方式搜索漢堡包菜單。幻燈片輸入html元素

我猜我發現了我需要的元素。請參考下面的截圖。

我的問題是：什麼是元素調用，以便我可以搜索和開發自己的版本。任何指針都將是一個很大的幫助。

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

來源

2016-12-29 Soumya

這是格設置爲固定CSS位置。 –

嘗試這種

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

來源

2016-12-29 10:18:20 falguni

爲什麼要使用Jquery？ –

你可以搜索：滑動面板，定位面板，固定滑動面板

至少可以從這些搜索詞開始，找到更多的東西，你深入鑽研例子。

我使用上述術語進行了2分鐘的搜索，並且找到了很多可以幫助您的例子。試一試！

來源

2016-12-29 10:30:38

這真的幫了我的忙。謝謝。 – Soumya

嘗試用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>

來源

2016-12-29 10:59:47

您片段中的示例不在屏幕中。 –

@AndrewBone對不起，親愛的（回滾）。我沒有看到 –

幻燈片輸入html元素

回答

相關問題