Implementation of toolbar by jquery
Css tutorial code
Ul {list-style: none; margin: 0; padding: 0 ;}
Ul li {line-height: 22px; border-bottom: 1px dashed # ccc; width: 400px ;}
Ul li a {display: block; position: relative ;}
Ul li span {display: block; width: 300px; height: 350px; background: # f7f7f7; border: 5px solid # eaeaea; position: absolute; z-index: 9 ;}
Iframe {border: none; width: 100%; height: 100%; margin: 0; padding: 0 ;}
Js Code
$ (Function (){
$ ('Ul A'). hover (function (){
$ (This ). after ('<span> <iframe src = "' + $ (this ). attr ('href ') +' "> </iframe> </span> ');
}, Function (){
$ ('Span '). fadeOut ('low', function () {$ (this). remove ()});
});
Html code
<Ul>
<Li>
<A href = "http: // bKjia. c0m"> Chinese students and professors in the United States are banned from jail. </a>
</Li>
<Li>
<A href = "http://down.bKjia. c0m"> Lady Gaga scale up and show your hips again </a>
</Li>
</Ul>
// Source code tutorial http://code.google.com/p/lovelong1/downloads/detail? Name1_jquery.wk.toolbar-1.0.0.7z & can = 2 & q = # makechanges
// Provide the jquery toolbar effect for each country
Http://www.pvmgarage.com/2009/12/nice-and-simple-toolbar-for-your-website-with-css3-and-jquery/
?>