• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساختن منو با جی کوئری و css
#1
سلام آقایون . خسته نباشید.
منوی این سایت رو لطفا با فایر فاکس ببینید :
this site
من به این شکل کدش رو نوشتم :
کد js :
کد:
<script>
$(document).ready(function(){
  $("label").hover(function(){
     $("#box").animate({width:"50px"});
     },function(){
    $("#box").animate({width:"0px"});
    
  });
});
</script>
کد html :
کد:
<label >home</label>
<div id="box" style="background:url(1343573274_Home.png);height:50px;width:50px;margin:6px;">
</div>

این کد الان اون طور که میخوام کار میکنه . ولی نمیخوام همون ابتدا تصویر مشخص باشه ( البته باید نوشته رو مخفی و آشکار کنم ، ولی چون تند نوشتم فعلا برعکس اون سایت کار میکنه )
به خاطر همین از کد زیر استفاده کردم و visible رو hidden کردم ولی این اصلا کار نمیکنه. بنظرتون چه کار کنم ؟
کد:
<script>
$(document).ready(function(){
  $("label").hover(function(){
      $("#box").show();
     $("#box").animate({width:"50px"});
     },function(){
    $("#box").animate({width:"0px"});
    
  });
});
</script>

<label >home</label>
<div id="box" style="background:url(1343573274_Home.png);height:50px;width:50px;margin:6px; visibility:hidden">
</div>
قبلش هم خیلی ممنون .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
مقدار پیش فرض دایو box رو 50 پیکسل قرار دادی (width)
از اون طرف هم گفتی زمانی که ماوس روی label رفت پهنا 50 پیکسل و زمانی که از محدودش خارج شد 0 بشه

نقل قول:ولی نمیخوام همون ابتدا تصویر مشخص باشه
کد:
<div id="box" style="background:url(1343573274_Home.png);height:50px;width:0px;margin:6px;overflow:hidden;">
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#3
visible رو hidden کردی یعنی display رو none کردی؟

اگه آره که باید کار کنه...
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#4
(۱۳۹۱ مهر ۲۷, ۱۰:۵۱ ب.ظ)hamid_80386 نوشته: visible رو hidden کردی یعنی display رو none کردی؟

فک نکنم اینطوری باشه ها Tongue
[عکس: 6p9kd9bhgb7hu6wgcu3g.gif]
  پاسخ
تشکر شده توسط :
#5
جی کوئری رو display کار میکنه،
در واقع زمانی که از fadeOut یا باقی موارد استفاده میکنیم جی کوئری میاد و در نهایت display شی رو none میکنه.
دلایل زیادی برای این کارش وجود داره مثلا فرض کن اگر میخواست از visible استفاده کنه هنگام مخفی کردن اشیا، با وجود این کار فضای اشغال شده توسط شی تو صفحه باقی میموند و...
همون طور که تو CSS بین visible و display تفاوت وجود داره، تو جی کوئری هم به همین صورته.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : Reza pary_daryayi
#6
مرسی آقا احسان درست شد.فقط width رو صفر گذاشتم حل شد ، بدون show و overflow هم کار کرد.
کد:
<script>
$(document).ready(function(){
  $("label").hover(function(){
          $("#box").animate({width:"50px"});
     },function(){
    $("#box").animate({width:"0px"});
    
  });
});
</script>

<label style="background-color:#E9E9E4">home</label>
<div id="box" style="background:url(1343573274_Home.png);height:50px;width:0px;margin:6px;">
</div>
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#7
از همتون ممنون . ولی بنظرم اصلا منطق رو اشتباه رفتم ، چون اینطور اون منو ایجاد نمیشه . بیزحمت منو رو دوباره ببینید . انگار position عکس همراه با یک animate تغییر کرده .
خب میتونیم بگیم position وقتی hover میشه تغییر کنه ، ولی اینکه با animate اتفاق بیفته !!!!!!!!
من animate و position رو همزمان استفاده کردم نتیجه ی جالبی نداد .
بنظرتون چطوری ایجاد شده و منطقش چیه ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#8
اخه تو میخوایی تصویر نشون داده نشه!
اون منو که به این صورته، ایتم هاش کامل نمایش داده شدن.
نقل قول:خب میتونیم بگیم position وقتی hover میشه تغییر کنه ، ولی اینکه با animate اتفاق بیفته !!!!!!!!
این کارو میتونی انجام بدی یا میتونی بذاری بعد از تموم شدن animate پوزیشن تغییر کنه
غیر از پوزیشن، میتونی از margin هم استفاده کنی یا اینکه تصویرو مقداری ریسایز کنی
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#9
نقل قول:اخه تو میخوایی تصویر نشون داده نشه!
اون برای وقتی بود که منطقش رو اشتباه رفته بودم . پست قبلی هم گفتم.
نقل قول:ین کارو میتونی انجام بدی یا میتونی بذاری بعد از تموم شدن animate پوزیشن تغییر کنه
غیر از پوزیشن، میتونی از margin هم استفاده کنی یا اینکه تصویرو مقداری ریسایز کنی
اینطور هم امتحان کردم ، خیلی خوشگل نشد
میدونید منطقش فکر نمیکنم این باشه که گفتم ‍!!Blush
چند راه رو امتحان کردم ، مثل اون نشد. . بازم امتحان میکنم .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#10
حداقل دقیقا همون منو رو هر جور که میتونی پیاده کن، سورسش رو بذار.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان