CODEWITHSUNDEEP
htmlcss
Soumya
Soumya

Reputation: 893

slide in-out html element

I am searching for something like a "sliding drawer" - however they all span across the entire height of the page.I would like the slide in-out to just occupy the space it needs - and not cover the entire page.I also googled for hamburger menu on similar lines.

I guess I found out the element which I need.Please refer the screenshot below.

My ask is : What is the element called so that I can search and develop my own version of it.Any pointer will be a great help.

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

enter image description here

Upvotes: 2

Views: 1587

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8409

Try with 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>

Upvotes: 0

George Antonakos
George Antonakos

Reputation: 748

You can search for: Sliding panel, fixed position panel, fixed sliding panel

At least you can start from those search terms and find more stuff as you delve deeper into the examples.

I made a 2 minute search using the above terms and I found a lot of examples that might help you. Give it a shot!

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

trying this

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

Upvotes: 1

Related Questions