Button uitschuif verticaal

Status
Niet open voor verdere reacties.
Hi,

Je zou met HTML die blokken kunnen maken, vervolgens met CSS de blokken wat opmaken en d.m.v.
een position absolute de blokken buiten beeld plaatsen, zonder dat je een scrollbar krijgt.

Ik gok onderstaande om hem buiten beeld te plaatsen:
Code: 
#blokje-1 {
  position: absolute;
  right: -200px;
}

Vervolgens kan je met jQuery een mouseenter en mouseout toevoegen. Misschien in combinatie met
een timeout om ervoor de zorgen dat je schermpje niet gelijk weggaat als je er vanaf gaat.
 
Hier een voorbeeld, hopelijk kan je ermee uit de voeten.

[js]<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#uitschuifblok{
position: fixed;
top:40%;
font-size: 0px;
}
#uitschuifblok > div{
border: 1px solid;
height: 100px;
margin: 0px;
padding: 5px;
display: inline-block;
vertical-align: top;
background-color: #FFFAAA;
font: 13px Arial;
}
</style>
</head>
<body>
<div id="uitschuifblok">
<div id="uitschuifblok_zichtbaar">
<span>Hover<br/>Hier<br/>Overheen!</span>
</div>
<div id="uitschuifblok_onzichtbaar">
<span>Dit is de content.<br/>Plaats hier wat je op het eerste gezicht onzichtbaar wilt hebben.</span>
</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var blokwidth = $("#uitschuifblok_onzichtbaar").outerWidth();
$("#uitschuifblok").css("right", "-" + blokwidth + "px");
$("#uitschuifblok").hover(function(){
$("#uitschuifblok").stop().animate({
right: 0
});
}, function(){
$("#uitschuifblok").stop().animate({
right: "-" + blokwidth + "px"
});
});
});
</script>
</body>
</html>[/js]

hover.gif
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan