GOOCODE - Find your code/scripts

3 We've seen a lot of pages on the right side floating effect, the earliest contact panel, couplet advertising, most of them are based on the dynamic effects of javascript implementation, and today I just need to share a combination of the right side of the floating effect by CSS DIV.


HTML
We hope that the suspension effect last load, it is generally placed at the end of the HTML page, we have established a .side-bar, which contains the online consultation, micro-channel (mouse slide effect pop-dimensional code), microblogging, and Email contact information and other content that we have to [a] label package.

<div class="side-bar"> 
	<a href="#" class="icon-qq">Online consult</a> 
	<a href="#" class="icon-chat">Skype<div class="chat-tips"><i></i><img style="width:100px;height:100px;" src="goocode.png" alt=""></div></a> 
	<a target="_blank" href="#" class="icon-blog">Twitter</a> 
	<a href="#" class="icon-mail">Mail</a> 
</div>	

CSS
We use CSS to complete the floating pop-up effect that is slid mouse. We prepare a picture right_bg.png, contains several elements of the icon, and then a corresponding content via background-position of each icon. We use position: fixed and set bottom and right values ​​will .side-bar fixed to the lower right corner, so no matter how the page scrolling, .side-bar will remain unchanged in the lower right position. It should be mentioned under ie6 require separate treatment under the fixed effects, but the article does not explain, give up ie6.

.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;} 
.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;} 
.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;} 
.side-bar a:hover {background-color: #669fdd;} 
.side-bar .icon-qq {background-position: 0 -62px;} 
.side-bar .icon-chat {background-position: 0 -130px;position: relative;} 
.side-bar .icon-blog {background-position: 0 -198px;} 
.side-bar .icon-mail {background-position: 0 -266px;} 

There is also a micro-channel icon mouse slide effects, when mouse hover, .chat-tips display property set to block, and set the position location, the code also contains an arrow CSS wording:

.side-bar .icon-chat:hover .chat-tips {display: block;} 
.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;} 
.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;} 
.chat-tips img {width: 138px;height: 138px;} 

A few simple lines of CSS code on the bottom right corner to complete a simple suspension effect, go and try it.