Bu yazımda JQUERY, CSS ve HTML5 kullanarak aşağıdan yukarıya doğru kayan bir menü yaptım.
HTML KODLARI
---------------------------------
<!DOCTYPE HTML>
<html lang="tr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>KAYAN MENU</title>
<link rel="stylesheet" type="text/css" href="yanmenucss.css">
<script type="text/javascript" src="yanmenujs.js">
</script>
</head>
<body>
<div class="yanmenum">
<ul id="kayanmenu">
<li><a href="#">Konu 1</a></li>
<li><a href="#">Konu 2</a></li>
<li><a href="#">Konu 3</a></li>
<li><a href="#">Konu 4</a></li>
<li><a href="#">Konu 5</a></li>
<li><a href="#">Konu 6</a></li>
</ul>
<div>
</body>
</html>
CSS KODLARI
--------------------------
@charset "UTF-8";
body,aside{
margin:auto;
}
.yanmenum{
width:300px;
height:340px;
background-color:#dcdcdc;
border-radius:10px;
margin:10px;
float:left;
overflow:hidden;
}
ul#kayanmenu{
width:auto;
margin:0;
padding:0;
}
ul#kayanmenu li{
list-style:none;
width:auto;
height:100px;
background-color:#eee;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:100px;
text-align:center;
margin:10px;
margin-bottom:10px;
border-radius:10px;
}
JQUERY KODLARI
--------------------------
$(function(){
var toplamli = $("ul#kayanmenu li").length; //Toplam Liste Elemanı değerini buluyoruz.
var deger=0;
var yenideger=0;
$.kayanmenum = function(){
if(deger<toplamli) //Son elemana kadar
{
deger++;
yenideger = deger*110;
$("ul#kayanmenu").animate({marginTop: "-"+ yenideger +"px"},1000); //margin değererini değiştiriyoruz.
}
else{
deger=0;
yenideger = deger*110;
$("ul#kayanmenu").animate({marginTop: "-"+ yenideger +"px"},1000);
}
}
var kaydir = setInterval('$.kayanmenum()', 1000);
$(".yanmenum").hover(function(){
clearInterval(kaydir);//fonsiyonun çalışmasını durdurur.
},function(){
kaydir=setInterval('$.kayanmenum()',1000);
});
});
Hiç yorum yok:
Yorum Gönder