من یک رویاساز

یک روش برای انتقال کاربر به بالا و پایین سایت استفاده از anchor هستش . خوب زیاد از نظر ظاهری جالب نیست . اینبار می خوایم با استفاده از جی کوئری وقتی کاربر بر روی کلید بالا و یا پایین کلیک می کنه صفحه رو به آرامی و نرمی اسکرول کنیم تا به بالا یا پایین صفحه بره .دو کلید در سمت چپ پایین صفحه فیکس کردیم که با کلیک بر روی اونها صفحه به سمت بالا و پایین اسکرول می شه .

برای این کار در کنار JQuery نیاز به یک پلاگین کوجیک هم داریم که توی سورس هستش .
خوب اول باید یک صفحه با متن بلند داشته باشیم تا نتیجه کار رو خوب نشون بده . بعد از اضافه کردن رفرنس به JQuery و پلاگین در قسمت Head ، کد اسکریپت زیر رو وارد می کنیم :

<script src="jquery.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
<script>$(function(){
var $elem=$('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');

$(window).bind('scrollstart',function(){
$('#nav_up,#nav_down').stop().animate({'opacity:'0.2'});
});
$(window).bind('scrollstop',function(){
$('#nav_up,#nav_down').stop().animate({'opacity:'1'});
});

$('#nav_down').click(
function(e){
$('html,body').animate({scrollTop:$elem.height()},800);
}
);
$('#nav_up').click(
function(e){
$('html,body').animate({scrollTop:'0px'},800);
}
);

در کد بالا Content نام المنتی هستش که محتوایی که قراره اسکرول بشه داخل اون قرار داره . افکت جالبی که در اینجا وجود داره اینه که در حین انجام  اسکرول  کلید های بالا و پایین محو می شن .
وقتی که کاربر بر روی کلید پایین کلیک می کنه با استفاده از تابع Animate مقدار ScrollTop المنت والد برابر با ارتفاع Content میشه .  و برای برگشت به بالا مقدار ScrollTop برابر ۰ قرارش می دیم . که البته هر مقدار دیگه ای هم می تونه باشه .
+ دمو
+ سورس

به دلایل زیادی از منوی Asp.net خوشم نمیاد . استفادش از table ، مشکل داشتن با سمت نمایش Sub menu های پایین تر از سطح دوم . سخت بودن استایل دهی و … من رو کاملاً از استفاده از اون منصرف کرد. برای همین امروز تصمیم گرفتم که خودم یه منو ( دموی منو ) با استفاده از CSS و JQuery بسازم .

منوی ساده ایست ولی خوب قابلیت اضافه کردن افکت ها رو داره . خوبیش هم اینه که براش مهم نیست از چندتا سطح تشکیل شده . با مرورگرهای فایرفاکس ، کروم و اپرا حتماً کار می کنه . IE 6 رو تست نکردم ( ولش کن ) . روی IE7 به بعد هم کار می کنه .

خوب ، برای ساختن این منو مثل همیشه از لیست استفاده کردم . و برای نمایش سطوح از JQuery .

1- تگ های HTML

محتوای HTML مون از یک div با نام Menu و چند لیست تو در تو ( که همون منو باشه ) تشکیل شده . برای هر زیر سطح یک لیست تعریف شده . برای ul سطح اول یه کلاس به نام Static و برای سطوح بعدی کلاسی به نام Dynamic تعریف شده .

<div id="Menu">
<ul>
	<li><a href="#">آیتم یک</a></li>
	<li class="HasSub"><a href="#">آیتم دو</a>
<ul class="Dynamic">
	<li class="HasSub"><a href="#">زیر آیتم یک</a>
<ul class="Dynamic">
	<li><a href="#">زیر آیتم سه</a></li>
	<li><a href="#">زیر آیتم چهار</a></li>
</ul>
</li>
	<li><a href="#">زیر آیتم دو</a></li>
</ul>
</li>
	<li><a href="#">آیتم سه</a></li>
	<li><a href="#">آیتم چهار</a></li>
</ul>
</div>

2- استایل های CSS

برای کلاس Dynamic بصورت پیش فرض display:none قرار داده شده . مقدار margin-right آن به اندازه عرض منو و برای اینکه سطح پایین تر در زمان نمایش هم سطح Parent خود باشد Margin-top نیز برابر با -۴۲ ( ارتفاع هر آیتم به علاوه ۲ پیکسل border بالا و پایین ) تعیین شده است . برای آیتم هایی هم که دارای زیر منو هستن یک کلاس به نام HasSub تعریف شده که در اون می شه یک نشانگر برای مشخص کردن داشتن زیر منو قرار داد ( بصورت بکگراند آیتم ) .

<style>
        body
        {
            direction:rtl;
        }
    #Menu
{
    display:block;
    width:170px;
    border:solid 1px #ccc;

}
#Menu ul
{
     list-style:none;
     width:100%;
     margin:0px;
     padding:0px;
}
#Menu ul.Dynamic
{
     margin-right:171px;
     display:none;
     margin-top:-42px;
     border-top:solid 1px #ccc;
     border-left:solid 1px #ccc;
}

#Menu li
{
      display:block;
      height:40px;
      width:100%;
      border-top:solid 1px #fff;
      border-bottom:solid 1px #E1E1E1;
      background-color:#F7F7F7;
}

#Menu li:hover
{
    background-color:#f1f1f1;
}

#Menu li.HasSub
{
   background-image:url(HasSubArrow.png);
   background-position:10px center;
   background-repeat:no-repeat;
}

#Menu li a
{
    display:block;
    height:2em;
    color:#808080;
    font-family:'b koodak';
    font-size:1em;
    padding-right:10px;
    padding-top:.5em;
}

#Menu li a:hover
{
    color:#000;
}

    </style>

تا اینجای کار منو آماده است اما برای اینکه با قرار گرفتن بر روی آیتم والد زیرمجموعه اون نمایش داده بشه من از JQuery کمک گرفتم .

۳- JQuery

فقط یک تابع هست که در زمانی که نشانگر ماوس بر روی آیتم هایی که دارای کلاس HasSub هستن قرار می گیره میاد و اولین ul زیرمجموعه اون آیتم والد رو به صورت FadeIn نمایش میده . برای این گفتم اولین ul چون اگر این رو تعیین نمی کردم تمام زیرمجموعه ها در تمام سطوح متعلق به اون آیتم والد نمایش داده می شه.

<script type="text/javascript">
$(document).ready( function(){

    $('.HasSub').hover(function(){
        $(this).find('ul:first').fadeIn(500);

    },function(){

    $(this).find('ul:first').fadeOut(500);

    });
});
</script>

همین . خیلی ساده تر از اون چیزی بود که فکرشو می کردم .

کد منو رو هم می تونین از اینجا بردارین .

استیو جابز درگذشت ….

حرفی نمیشه زد …

روحش شاد .