Jquery ile üstüne gelince açılan menü örnekleri slideDown
Örnek 1 : slidetoggle
html :
<a href="#" class="buton">Gizle/Göster</a>
<div class="kayar"> <a target="alttakiframe" href="http://ooo.com">link</a>
</div>
<br>
<iframe name="alttakiframe"></iframe>
css:
.kayar {
position:absolute;
height:200px;
background-color:#d3d3d3;
padding:5px;
margin-top:0px;
width:300px;
border:0px solid #fff;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius:3px;
font-family:verdana;
font-size:10px;
}
.buton {
display:none;
font-family:verdana;
background-color:#d3d3d3;
padding:5px;
color:#000;
text-decoration:none;
border:1px solid #000;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius:3px;
width:100px;
}
Java:
$(document).ready(function () {
$(".kayar").hide();
$(".buton").show();
$('.buton').mouseover(function () {
$(".kayar").slideDown();
});
$('.kayar').mouseout(function () {
$(".kayar").slideUp();
});
});
html :
<a href="#" class="buton">Gizle/Göster</a>
<div class="kayar"> <a target="alttakiframe" href="http://ooo.com">link</a>
</div>
<br>
<iframe name="alttakiframe"></iframe>
css:
.kayar {
position:absolute;
height:200px;
background-color:#d3d3d3;
padding:5px;
margin-top:0px;
width:300px;
border:0px solid #fff;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius:3px;
font-family:verdana;
font-size:10px;
}
.buton {
display:none;
font-family:verdana;
background-color:#d3d3d3;
padding:5px;
color:#000;
text-decoration:none;
border:1px solid #000;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius:3px;
width:100px;
}
Java:
$(document).ready(function () {
$(".kayar").hide();
$(".buton").show();
$('.buton').mouseover(function () {
$(".kayar").slideDown();
});
$('.kayar').mouseout(function () {
$(".kayar").slideUp();
});
});
Yorumlar
Yorum Gönder