Pewnie nie raz, nie dwa widziałeś jak zrobić Like Box na stronę www, ja też, ale postanowiłem i tak napisać swój i nawet działa na Internet Explorer 8 🙂
Jak nie wierzysz, to wystarczy że wpiszesz adres mojej strony http://karol-drag.eu w Internet Explorer 8 lub nowszej przeglądarce. A w razie gdy by skrypt box nie zadziałał prawidłowo dajcie znać w komentarzach wraz ze screenem i wersją przeglądarki.
Wracając do boxa najpierw tworzymy DIV-y które będą odpowiadać za boxa. Jeden box będzie składać się z 3 DIV-ów.
Pierwszy nazwiemy sobie „box”, będzie to główny DIV, w nim damy dwa DIV-y, pierwszy odpowiadający za napis lub obrazek, po najechaniu którego wysunie się box, nazwiemy go „box_submit”, a trzeci zawierający treść boxa, który nazwiemy sobie „box_tresc”.
<div id=”box_submit”></div>
<div id=”box_tresc”> Zawartość boxa po rozwinięciu </div>
</div>
Teraz tworzymy sobie obrazek w programie graficznym do „box_submit”, ja wykonałem sobie przykładowo taki jak na obrazku po lewej dla facebook-a.
Teraz tworzymy kod CSS, odpowiadający za ułożenie DIV-ów, ale nie będę już tego opisywał bo to powinno być jasne:
width: 280px;
height: 300px;
top: 200px;
right: -260px;
position: fixed;
z-index: 99999;
}
#box_submit {
width: 20px;
height: 100px;
background: #35619f;
float: left;
border-radius: 10px 0px 0px 10px;
background: url(box2.png);
}
#box_tresc {
width: 250px;
height: 260px;
background: #FFF;
float: right;
border-radius: 0px 0px 0px 10px;
padding: 5px;
}
No i teraz potrzebujemy wykonać animacje wysuwania DIV-a po najechaniu na niego i schowania po zsunięciu kursora. Do tego celu potrzebujemy jQuery i dlatego musimy dodać bibliotekę jQuery do naszej strony dodając poniższy kod pomiędzy <head>…</head>:
Gdy już to mamy dodajemy kod animacji:
$(’#box_submit, #box_tresc’)
.mouseover(function(){
$(’#box’).stop().animate({right: „0px”}, 500);
})
.mouseout(function(){
$(’#box’).stop().animate({right: „-260px”}, 500);
})
});
Gdzie mouseover odpowiada za wykonanie animacji po najechaniu, a mouseout, po zsunięciu kursora z DIV-a. Animacja ustawiona jest tylko dla odległości od prawej krawędzi, 0px gdy box ma się wysunąć i -260px gdy box się schowa.
Dlaczego -260px, a nie -280px?
Ponieważ dhowiemy tylko „box_tresc”, a „box_submit” musi być widoczny.
Efekt końcowy wygląda tak jak na mojej stronie 🙂
Więcej o funkcjonalności .animate() znajdziesz na http://api.jquery.com/animate/.
W razie problemów bądź pytań piszcie komentarze lub na maila.
