/
  • ساختن منو با جی کوئری و css

  • صفحه‌ها (2):
  • ارسال پاسخ   امتیاز موضوع:
    • 0 رأی - میانگین امیتازات: 0
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی ساختن منو با جی کوئری و css
    نویسنده پیام
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 615
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 724
    ( 204 تشکر در 116 ارسال )
    ارسال: #1
    ساختن منو با جی کوئری و css
    سلام آقایون . خسته نباشید.
    منوی این سایت رو لطفا با فایر فاکس ببینید :
    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>
    قبلش هم خیلی ممنون .
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ مهر ۲۷ ۰۸:۳۴ عصر، توسط pary_daryayi.)
    ۱۳۹۱ مهر ۲۷ ۰۸:۳۲ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    undefined آفلاین
    احسان
    *****

    ارسال‌ها: 2,113
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 1995
    ( 2058 تشکر در 1210 ارسال )
    ارسال: #2
    RE: ساختن منو با جی کوئری و css
    مقدار پیش فرض دایو box رو 50 پیکسل قرار دادی (width)
    از اون طرف هم گفتی زمانی که ماوس روی label رفت پهنا 50 پیکسل و زمانی که از محدودش خارج شد 0 بشه

    نقل قول: ولی نمیخوام همون ابتدا تصویر مشخص باشه
    کد:
    <div id="box" style="background:url(1343573274_Home.png);height:50px;width:0px;margin:6px;overflow:hi​dden;">
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    (آخرین ویرایش در این ارسال: ۱۳۹۱ مهر ۲۷ ۰۹:۲۴ عصر، توسط undefined.)
    ۱۳۹۱ مهر ۲۷ ۰۹:۲۴ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    hamid_80386 آفلاین
    حمید عباسی
    ***

    ارسال‌ها: 1,510
    تاریخ عضویت: ۱۳۹۰ بهمن ۱۶
    اعتبار: 62
    تشکرها : 1216
    ( 1253 تشکر در 748 ارسال )
    ارسال: #3
    RE: ساختن منو با جی کوئری و css
    visible رو hidden کردی یعنی display رو none کردی؟

    اگه آره که باید کار کنه...
    __________________________________________________________________________
    هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
    ۱۳۹۱ مهر ۲۷ ۰۹:۵۱ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    masoudmanson آفلاین
    MiM Me3 MeTaL
    ****

    ارسال‌ها: 374
    تاریخ عضویت: ۱۳۹۰ تير ۱۱
    اعتبار: 22
    تشکرها : 541
    ( 356 تشکر در 179 ارسال )
    ارسال: #4
    RE: ساختن منو با جی کوئری و css
    (۱۳۹۱ مهر ۲۷ ۰۹:۵۱ عصر)hamid_80386 نوشته شده توسط:  visible رو hidden کردی یعنی display رو none کردی؟

    فک نکنم اینطوری باشه ها Tongue
    __________________________________________________________________________
    [تصویر:  6p9kd9bhgb7hu6wgcu3g.gif]
    ۱۳۹۱ مهر ۲۷ ۱۰:۴۸ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    undefined آفلاین
    احسان
    *****

    ارسال‌ها: 2,113
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 1995
    ( 2058 تشکر در 1210 ارسال )
    ارسال: #5
    RE: ساختن منو با جی کوئری و css
    جی کوئری رو display کار میکنه،
    در واقع زمانی که از fadeOut یا باقی موارد استفاده میکنیم جی کوئری میاد و در نهایت display شی رو none میکنه.
    دلایل زیادی برای این کارش وجود داره مثلا فرض کن اگر میخواست از visible استفاده کنه هنگام مخفی کردن اشیا، با وجود این کار فضای اشغال شده توسط شی تو صفحه باقی میموند و...
    همون طور که تو CSS بین visible و display تفاوت وجود داره، تو جی کوئری هم به همین صورته.
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۱ مهر ۲۷ ۱۱:۴۵ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : Reza pary_daryayi
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 615
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 724
    ( 204 تشکر در 116 ارسال )
    ارسال: #6
    RE: ساختن منو با جی کوئری و css
    مرسی آقا احسان درست شد.فقط 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>
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    ۱۳۹۱ مهر ۲۸ ۰۲:۳۷ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 615
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 724
    ( 204 تشکر در 116 ارسال )
    ارسال: #7
    RE: ساختن منو با جی کوئری و css
    از همتون ممنون . ولی بنظرم اصلا منطق رو اشتباه رفتم ، چون اینطور اون منو ایجاد نمیشه . بیزحمت منو رو دوباره ببینید . انگار position عکس همراه با یک animate تغییر کرده .
    خب میتونیم بگیم position وقتی hover میشه تغییر کنه ، ولی اینکه با animate اتفاق بیفته !!!!!!!!
    من animate و position رو همزمان استفاده کردم نتیجه ی جالبی نداد .
    بنظرتون چطوری ایجاد شده و منطقش چیه ؟
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    ۱۳۹۱ مهر ۲۸ ۰۹:۳۲ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    undefined آفلاین
    احسان
    *****

    ارسال‌ها: 2,113
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 1995
    ( 2058 تشکر در 1210 ارسال )
    ارسال: #8
    RE: ساختن منو با جی کوئری و css
    اخه تو میخوایی تصویر نشون داده نشه!
    اون منو که به این صورته، ایتم هاش کامل نمایش داده شدن.
    نقل قول: خب میتونیم بگیم position وقتی hover میشه تغییر کنه ، ولی اینکه با animate اتفاق بیفته !!!!!!!!
    این کارو میتونی انجام بدی یا میتونی بذاری بعد از تموم شدن animate پوزیشن تغییر کنه
    غیر از پوزیشن، میتونی از margin هم استفاده کنی یا اینکه تصویرو مقداری ریسایز کنی
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۱ مهر ۲۹ ۱۱:۰۸ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 615
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 724
    ( 204 تشکر در 116 ارسال )
    ارسال: #9
    RE: ساختن منو با جی کوئری و css
    نقل قول: اخه تو میخوایی تصویر نشون داده نشه!
    اون برای وقتی بود که منطقش رو اشتباه رفته بودم . پست قبلی هم گفتم.
    نقل قول: ین کارو میتونی انجام بدی یا میتونی بذاری بعد از تموم شدن animate پوزیشن تغییر کنه
    غیر از پوزیشن، میتونی از margin هم استفاده کنی یا اینکه تصویرو مقداری ریسایز کنی
    اینطور هم امتحان کردم ، خیلی خوشگل نشد
    میدونید منطقش فکر نمیکنم این باشه که گفتم ‍!!Blush
    چند راه رو امتحان کردم ، مثل اون نشد. . بازم امتحان میکنم .
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ مهر ۲۹ ۰۱:۵۲ عصر، توسط pary_daryayi.)
    ۱۳۹۱ مهر ۲۹ ۰۱:۵۲ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    undefined آفلاین
    احسان
    *****

    ارسال‌ها: 2,113
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 1995
    ( 2058 تشکر در 1210 ارسال )
    ارسال: #10
    RE: ساختن منو با جی کوئری و css
    حداقل دقیقا همون منو رو هر جور که میتونی پیاده کن، سورسش رو بذار.
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۱ مهر ۲۹ ۰۲:۱۰ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    « قدیمی تر | تازه‌ تر »

  • صفحه‌ها (2):
  • ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS