HOME | TRIVANDRUM MAILS | CRAZIEST PHOTO COLLECTION |FREE HTML EDITOR| WANT TO SUBMIT GUEST POST

Help me vote +1 on google plus button below!

×


How to Create Slide Out DIV Using CSS

Post views :-
This is the Tutorial How to Create Slide Out Box using CSS created in Pure CSS without using any other scripts. When user hovers mouse cursor over this menu then it slides out of the screen. You can put your own HTML codes inside the container of the Slide out menu to make it useful in different ways like notification menu, small contact form, Share buttons, Ratings system, Slide out Navigation menu etc. In this example I am giving a simple CSS Slide Out menu with an empty container.

Views:

How to add this Slide Out Box

1. To to Blogger Dashboard-Template-Edit HTML.
2. Don't forget to take backup of your Template
3. Search for ]]></b:skin> by using Ctrl+F
4. Add the CSS code just above it.
5. Then save template

CSS Code


.slide-main {
  position: fixed;
 top: 50px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-container {
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#dcdcdc;
  position: fixed;
 top: 50px;
  right: -270px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-main:hover {
right:270px;
}
.slide-main:hover .slide-container{
  right: 0;
}

After adding the CSS Code 

1. Go to Layout-Add a Gadget-HTML/Javascript
2. Paste the below code 
3. Save it and you are done

HTML Code


<div class="slide-main">
  <img src="http://bit.ly/12nBkTq" />
  <div class="slide-container">
  paste your main content code here 
  </div>
</div>

Note : You have to change the url in red with the url of you image and paste the content code in the html codes before saving the Gadget.

Related Topics



1 comment:

  1. പരീക്ഷിച്ചു.വിജയിച്ചു.നന്ദി.ആശംസകള്‍
    very use full.thank you..

    ReplyDelete

Copyright © 2013 Mirror of Knowledge Designed by Santosh Kumar
Sitemap - Privacy Policy - Link Exchange - Chat - Contact Us