نمایش نتایج: از شماره 1 تا 3 , از مجموع 3

موضوع: طراحی منو Dropdownبا jQuery

  1. #1
    کاربر سایت

    آخرین بازدید
    چهارشنبه ۲۷ خرداد ۹۴ [ ۱۱:۲۶]
    محل سکونت
    تهران
    نوشته ها
    97
    امتیاز
    1,193
    سطح
    1
    Points: 1,193, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 16.0%
    دستاوردها:
    Tagger Second Class3 months registered1000 Experience Points
    سپاس ها
    0
    سپاس شده 11 در 11 پست

    طراحی منو Dropdownبا jQuery

    ایجاد منو یکی از مهم ترین فاکتور ها در طراحی سایت می باشد. علاوه بر بحث زیبایی، در منو می بایست لینک دهی مناسب صفحات سایت گنجانده شود. JQuery یکی از زبان های پرکاربرد در ایجاد منو می باشد و این امکان را فراهم می آورد که به آسانی منوی زیبایی را در طراحی وب سایت خود بگنجانید. در اینجا مثالی از ایجاد منو با استفاده از زبان JQuery درج شده است.


    منوی Dropdown قابلیت پنهان نمودن زیر منوها ونیز استفاده از استایل های و ایفکت های زیبا را دارد. در ایجاد این منو از زبان های html. ، css و JQuery استفاده شده است. ابتدا کد html لازمه را به نمایش می گذاریم.








    <ul class="myMenu">


    <li><a href="#">menu item 1</a></li>


    <li><a href="#">menu item 2</a>


    <ul>


    <li><a href="#">sub menu item 1</a></li>


    <li><a href="#">sub menu item 2</a></li>


    <li><a href="#">sub menu item 3</a></li>


    </ul>


    </li>


    <li><a href="#">menu item 3</a>


    <ul>


    <li><a href="#">sub menu item 1</a></li>


    <li><a href="#">sub menu item 2</a></li>


    <li><a href="#">sub menu item 3</a></li>


    </ul>


    </li>


    <li><a href="#">menu item 4</a></li>


    <li><a href="#">menu item 5</a></li>


    </ul>





    حال استایل ها و کد css این منو را درج می نماییم.






    /*style the main menu*/
    .myMenu {
    margin:0;
    padding:0;
    }


    .myMenu li {
    list-style:none;
    float:left;
    font:12px Arial, Helvetica, sans-serif #111;
    }


    .myMenu li a:link, .myMenu li a:visited {
    display:block;
    text-decoration:none;
    background-color:#09F;
    padding: 0.5em 2em;
    margin:0;
    border-right: 1px solid #fff;
    color:#111;
    }


    .myMenu li a:hover {
    background-color:#0CF;
    }


    /*style the sub menu*/
    .myMenu li ul {
    position:absolute;
    visibility:hidden;
    border-top:1px solid #fff;
    margin:0;
    padding:0;
    }


    .myMenu li ul li {
    display:inline;
    float:none;
    }


    .myMenu li ul li a:link, .myMenu li ul li a:visited {
    background-color:#09F;
    width:auto;
    }


    .myMenu li ul li a:hover {
    background-color:#0CF;
    }





    توجه داشته باشید که در زیر منوها visibility:hidden تنظیم شده است بدین منظور که زیر منوها قابلیت پنهان شدن داشته باشند.حال می بایست کد jQuery لازم برای ایجاد این منو در طراحی سایت خود وارد نمایید. این قطعه کد را در بخش head صفحه سایت خود اضافه نمایید.





    <script type="text/j-avascript" src="/demo/jquery.js"></script>



    و حال قطعه کد زیر را در بخش head و در زیر قسمتی که فایل را اضافه نموده اید درج نمایید.







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


    //our code will go here


    });
    </script>


    $('.myMenu > li').bind('mouseover', openSubMenu);





    function openSubMenu() {
    $(this).find('ul').css('visibility', 'visible');
    };











    $('.myMenu > li').bind('mouseout', closeSubMenu);
    And then add the new function:




    function closeSubMenu() {
    $(this).find('ul').css('visibility', 'hidden');
    };





    با درج کدهای بالا در طراحی سایت خود، یک منوی Dropdown خواهید داشت و با تغییر کدهای css می توانید استایل مورد نظر خود را پیاده سازی نمایید. زیبایی صفحه وب سایت موجب جلب نظر کاربر می شود و در نتیجه آن در سئو سایت بسیار اثرگذار می باشد.


    منبع:[برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]

  2. #2
    کاربر سایت

    آخرین بازدید
    شنبه ۱۶ آذر ۹۸ [ ۰۵:۱۲]
    سن
    29
    نوشته ها
    11
    امتیاز
    401
    سطح
    1
    Points: 401, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 57.0%
    دستاوردها:
    3 months registered250 Experience Points
    سپاس ها
    0
    سپاس شده 3 در 3 پست

    ارور 404

    نقل قول نوشته اصلی توسط elham1388 نمایش پست ها
    ایجاد منو یکی از مهم ترین فاکتور ها در طراحی سایت می باشد. علاوه بر بحث زیبایی، در منو می بایست لینک دهی مناسب صفحات سایت گنجانده شود. JQuery یکی از زبان های پرکاربرد در ایجاد منو می باشد و این امکان را فراهم می آورد که به آسانی منوی زیبایی را در طراحی وب سایت خود بگنجانید. در اینجا مثالی از ایجاد منو با استفاده از زبان JQuery درج شده است.منوی Dropdown قابلیت پنهان نمودن زیر منوها ونیز استفاده از استایل های و ایفکت های زیبا را دارد. در ایجاد این منو از زبان های html. ، css و JQuery استفاده شده است. ابتدا کد html لازمه را به نمایش می گذاریم.

    حال استایل ها و کد css این منو را درج می نماییم. /*style the main menu*/.myMenu {margin:0;padding:0;}.myMenu li {list-style:none;float:left;font:12px Arial, Helvetica, sans-serif #111;}.myMenu li a:link, .myMenu li a:visited {display:block;text-decoration:none;background-color:#09F;padding: 0.5em 2em;margin:0;border-right: 1px solid #fff;color:#111;}.myMenu li a:hover {background-color:#0CF; }/*style the sub menu*/.myMenu li ul {position:absolute;visibility:hidden;border-top:1px solid #fff;margin:0;padding:0;}.myMenu li ul li {display:inline;float:none;}.myMenu li ul li a:link, .myMenu li ul li a:visited {background-color:#09F;width:auto;}.myMenu li ul li a:hover {background-color:#0CF; } توجه داشته باشید که در زیر منوها visibility:hidden تنظیم شده است بدین منظور که زیر منوها قابلیت پنهان شدن داشته باشند.حال می بایست کد jQuery لازم برای ایجاد این منو در طراحی سایت خود وارد نمایید. این قطعه کد را در بخش head صفحه سایت خود اضافه نمایید. و حال قطعه کد زیر را در بخش head و در زیر قسمتی که فایل را اضافه نموده اید درج نمایید. $('.myMenu > li').bind('mouseover', openSubMenu); function openSubMenu() {$(this).find('ul').css('visibility', 'visible'); }; $('.myMenu > li').bind('mouseout', closeSubMenu);And then add the new function:function closeSubMenu() {$(this).find('ul').css('visibility', 'hidden'); }; با درج کدهای بالا در طراحی سایت خود، یک منوی Dropdown خواهید داشت و با تغییر کدهای css می توانید استایل مورد نظر خود را پیاده سازی نمایید. زیبایی صفحه وب سایت موجب جلب نظر کاربر می شود و در نتیجه آن در سئو سایت بسیار اثرگذار می باشد.منبع:[برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]
    [URL="redirect.php?a=*badaztomusic.com//"]
    ویرایش توسط omid220 : شنبه ۱۶ آذر ۹۸ در ساعت ۰۴:۵۷

  3. #3
    کاربر سایت

    آخرین بازدید
    شنبه ۱۶ آذر ۹۸ [ ۰۵:۱۲]
    سن
    29
    نوشته ها
    11
    امتیاز
    401
    سطح
    1
    Points: 401, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 57.0%
    دستاوردها:
    3 months registered250 Experience Points
    سپاس ها
    0
    سپاس شده 3 در 3 پست

    ارور 404

    نقل قول نوشته اصلی توسط omid220 نمایش پست ها
    [URL="redirect.php?a=*badaztomusic.com//"]
    دانلود آهنگ جدید نیستی کنارم کی قدم میزنه تو بارون از ماهان بهرام خان با کیفیت های ۱۲۸ و ۳۲۰ kbps از سایت بعد از تو موزیکدانلود آهنگ غمگین ماهان بهرام خان نیستی کنارم کی قدم میزنه تو بارون با لینک مستقیمDownload New Music Mahan Bahram Khan Called Bade To + Text Music Mp3 2019 – ۱۳۹۸دانلود آهنگ غمگین ماهان بهرام خان نیستی کنارم کی قدم میزنه تو بارونجهت پخش آنلاین + دانلود موزیک نیستی کنارم کی قدم میزنه تو بارون به ادامه مطلب رجوع کنید…متن آهنگ ماهان بهرام خان به اسم نیستی کنارم کی قدم میزنه تو بارونبعد تو بارون نیومد ذهنمو یادت به هم زد بعد تو خاطراتت هنوزمنمیمیره یه روزم نمیمیره یه روزمدستمو نیستی بگیری خستمو نیستی ببینی بعد تو نگرفت هیچکی از منسراغی دیگه اصلا سراغی دیگه اصلانیستی ولی من با خیالت سر میکنم باز نیستی و فکرت منو میریزتم بهم بازای کاش که از دستم نمیرفتی انقد آسون نیستی کنارم کی قدم میزنه تو بارونبعد تو بعد تودنیا با تو شروع شد واسه ی من حالا باید بدون تو تموم شمآرزوم زندگی کردن با تو بود من باید بیخیال آرزوم شمبعد تو بارون نیومد ذهنمو یادت به هم زد بعد تو خاطراتت هنوزم♪♪♪♪♪♪♪♪دانلود آهنگ غمگین ماهان بهرام خان نیستی کنارم کی قدم میزنه تو بارون♪♪♪♪♪♪♪♪♪♫♪♫♪ نمیمیره یه روزم نمیمیره یه روزمدستمو نیستی بگیری خستمو نیستی ببینی بعد تو نگرفت هیچکی از منسراغی دیگه اصلا سراغی دیگه اصلانیستی ولی من با خیالت سر میکنم باز نیستی و فکرت منو میریزتم بهم بازای کاش که از دستم نمیرفتی انقد آسون نیستی کنارم کی قدم میزنه تو بارونبعد تو بعد تو

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. طراحی منو Dropdownبا jQuery
    توسط elham1388 در انجمن کد جاوا
    پاسخ ها: 0
    آخرين نوشته: سه شنبه ۱۱ آذر ۹۳, ۱۱:۴۴

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •