wysuwany slajder z boku

DEMO TUTAJ: http://blog.grabowski.ostrowwlkp.pl/demo/webmastering/panel3.html

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Jak zrobic wysuwany panel z przyciskiem „lubie to”</title>
<script type=”text/javascript” src=”http://blog.grabowski.ostrowwlkp.pl/demo/webmastering/jquery-1.7.1.min.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function() {
$(„#fejsik”).mouseover(function() {
$(this).stop().animate({
left: ‚0px’,
}, 300);
})
$(„#fejsik”).mouseout(function(){
$(this).stop().animate({
left: ‚-267’,
}, 200);
});

});
</script>
<style type=”text/css”>
* {margin:0;padding:0;} /*piszmy poprawnie :)*/
#fejsik {
display: block; /*pozycja blokowa*/
position: fixed; /*obrazek nieruchomy*/
z-index: 666; /*tak na wszelki wypadek*/
margin-top: 100px; /*maly odstep od gory*/
background-image: url(‚zapytaj.png’); /*plik tla*/
width: 267px; /*szerokosc*/
padding-right: 65px; /*odstep zawartosci od lewej krawedzi*/
/*laczna szerokosc 200+60 = 260px*/
height: 549px; /*wysokosc*/
padding-top: 5px; /*maly odstep od gory*/
/*laczna wysokosc obrazka 295+5 = 300px*/
left: -267px; /*ukrywamy 210px obrazka od prawej krawedzi*/
float: left; /*do prawej*/
/*zostaje 50px napisu „facebook”*/
}

</style>
</head>
<body>
<div id=”fejsik”>
<img src=”frame.png” style=”padding:20px;”/>
</div>

<div style=”text-align:center;font-weight:bold;”><a href=”http://blog.grabowski.ostrowwlkp.pl/webmastering/jak-zrobic-wysuwany-panel-z-przyciskiem-lubie-to”>Powrot do artykulu</a></div>
</body>
</html>

Advertisements

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s