منو بازشو با jQuery در طراحی سایت
کدهای jQuery به دلیل سهولت و نیز قابلیت های خاصی که در متحرک سازی دارند در طراحی سایت بسیار مورد توجه طراحان وب سایت قرار می گیرد. به آسانی با کدهای jQuery می توانیم منوهای زیبا را در طراحی سایت خود ایجاد نمایید و با قابلیت های اسکریپ های جاوا در زیبایی طراحی وب سایت خود بیافزایید و موجب توجه خاص کاربران سایت شوید که این عمل در سئو سایت شما تاثیر می گذارد.
با استفاده از کدهای jQuery شما می توانید منوهایی با المان های زیر ایجاد نمایید.
slideDown()
slideUp()
slideToggle()
در متد slideDown() پارامتر سرعت را می توانید با متغییرهای "slow", "fast", or milliseconds. مقداردهی نمایید. در زیر نحوه درج این کد را در طراحی سایت خود به نمایش می گذاریم.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
همان طور که نشان داده شده اسکریپ جاوا را در تگ head قرار می دهیم و سپس در جای مورد نظر در طراحی وب سایت خود اسکریپ را فراخوانی می نماییم.
متد slideUp() نیز به همین صورت در تگ head قرار می گیرد با تفاوت جزیی که در کدهای اسکریپ آن وجود دارد. در زیر کدهای لازم برای درج متد منو slideUp() در طراحی سایت را نمایش گذاشته ایم.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
منبع: منو بازشو با jQuery در طراحی سایت
