ijquery

منوی چند سطحی

screenshot

با استفاده از این پلاگین می توانید در سایت خود از منویی چند سطحی استفاده کنید.

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
        <link rel="stylesheet" href="jquery.multilevelpushmenu.css">
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.multilevelpushmenu.min.js"></script>

2-  کد html جهت استفاده پلاگین

        <div id="menu">
            <nav>
                <h2><i class="fa fa-reorder"></i>دنیای جی کوئری</h2>
                <ul>
                    <li>
                        <a href="#"><i class="fa fa-laptop"></i>دستگاه ها</a>
                        <h2><i class="fa fa-laptop"></i>دستگاه ها</h2>
                        <ul>
                            <li>
                                <a href="#"><i class="fa fa-phone"></i>موبایل</a>
                                <h2><i class="fa fa-phone"></i>موبایل</h2>
                                <ul>
                                    <li>
                                        <a href="#">Super Smart Phone</a>
                                    </li>
                                    <li>
                                        <a href="#">Thin Magic Mobile</a>
                                    </li>
                                    <li>
                                        <a href="#">Performance Crusher</a>
                                    </li>
                                    <li>
                                        <a href="#">Futuristic Experience</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-desktop"></i>تلویزیون</a>
                                <h2><i class="fa fa-desktop"></i>تلویزیون</h2>
                                <ul>
                                    <li>
                                        <a href="#">Flat Super Screen</a>
                                    </li>
                                    <li>
                                        <a href="#">Gigantic LED</a>
                                    </li>
                                    <li>
                                        <a href="#">Power Eater</a>
                                    </li>
                                    <li>
                                        <a href="#">3D Experience</a>
                                    </li>
                                    <li>
                                        <a href="#">Classic Comfort</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-camera-retro"></i>دوربین</a>
                                <h2><i class="fa fa-camera-retro"></i>دوربین</h2>
                                <ul>
                                    <li>
                                        <a href="#">Smart Shot</a>
                                    </li>
                                    <li>
                                        <a href="#">Power Shooter</a>
                                    </li>
                                    <li>
                                        <a href="#">Easy Photo Maker</a>
                                    </li>
                                    <li>
                                        <a href="#">Super Pixel</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-book"></i>مجلات</a>
                        <h2><i class="fa fa-book"></i>مجلات</h2>
                        <ul>
                            <li>
                                <a href="#">National Geographics</a>
                            </li>
                            <li>
                                <a href="#">The Spectator</a>
                            </li>
                            <li>
                                <a href="#">Rambler</a>
                            </li>
                            <li>
                                <a href="#">Physics World</a>
                            </li>
                            <li>
                                <a href="#">The New Scientist</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-shopping-cart"></i>فروشگاه</a>
                        <h2><i class="fa fa-shopping-cart"></i>فروشگاه</h2>
                        <ul>
                            <li>
                                <a href="#"><i class="fa fa-tags"></i>Clothes</a>
                                <h2><i class="fa fa-tags"></i>Clothes</h2>
                                <ul>
                                    <li>
                                        <a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
                                        <h2><i class="fa fa-female"></i>Women's Clothing</h2>
                                        <ul>
                                            <li>
                                                <a href="#">Tops</a>
                                            </li>
                                            <li>
                                                <a href="#">Dresses</a>
                                            </li>
                                            <li>
                                                <a href="#">Trousers</a>
                                            </li>
                                            <li>
                                                <a href="#">Shoes</a>
                                            </li>
                                            <li>
                                                <a href="#">Sale</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
                                        <h2><i class="fa fa-male"></i>Men's Clothing</h2>
                                        <ul>
                                            <li>
                                                <a href="#">Shirts</a>
                                            </li>
                                            <li>
                                                <a href="#">Trousers</a>
                                            </li>
                                            <li>
                                                <a href="#">Shoes</a>
                                            </li>
                                            <li>
                                                <a href="#">Sale</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Jewelry</a>
                            </li>
                            <li>
                                <a href="#">Music</a>
                            </li>
                            <li>
                                <a href="#">Grocery</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">درباره ما</a>
                    </li>
                    <li>
                        <a href="#">تماس با ما</a>
                    </li>
                </ul>
            </nav>
        </div>
        <script type="text/javascript" src="main.js"></script>

 


پیش نمایش دانلود فایل پلاگین

13 دیدگاه دربارهٔ «منوی چند سطحی»

  1. سلام مهدی جان
    آقا ضمن اینکه دستت درد نکنه به خاطر این منوی زیبات ولی سه تا مشکل وجود داره ، بی زحمت برام ردیفش کن :
    1- اصلی ترین : لینک ها با یه بار کلیک عمل نمی کنند و باید رایت کلیک کنی و لینک رو باز کنی
    2- منو رو می خوام دقیقا تو کادر قرار بگیره ، براش تعریف کردم اما درست نشد
    3- می خوام به صورت به شناور باشه .
    منو خیلی عالیه و می خوامش ، ممنونم

    در ضمن منو رو تو وبم گذاشتم .

  2. با سلام و خسته نباشید یک سوالی داشتم می خواستم بدونم تغییراتی مثل کم و زیاد کردن سطر تو jquery های اماده امکان پذیره ممنون.

  3. سلام. چرا وقتی به یه صفحه لینک میذارم کار نمیکنه؟! 🙁
    مثلا خط 6 وقتی قرار میدم href=”index.html” لینک کار نمیکنه.

  4. سلام
    تازه با سایتتون آشنا شدم کدهای جالبی دارید!
    یه سوال داشتم: آیا جی کوئری طوری هست که بشه باهاش اسکریپت نوشت؟!
    مثلا اسکریپتی مثل سایت جملک! که بیشتر از جی کوئری درش استفاده شده!
    برای این نوع طراحی مثل جملک چه زبانهای دیگه ای به جز css , html , jquery و… میخواد ممنون…

  5. سلام
    این منو multilevelpushmenu مشکل داره اصلا نمیشه روی تگ a کلیک کرد

    الان که پروژه داره تموم میشه وفقط اضافه کردن لینک ها باقی مونده بودمتوجه این مشکل شدم
    امیدوارم تا فردا صبح به سوالم پاسخ داده باشید

  6. سلام من منتظر راهنمایی یا کمکتون هستم

    امروز پروژه را تحویل میدم فقط مونده اضافه کردن لینکها

  7. با سلام تمام منو های شما خیلی جذابند ولی ای کاش نحوه یجایگذاری در پوسته رو هم آموزش می دادین

  8. سلام خسته نباشید
    من میخوام این منو درمرحله اول بسته باشه بعد با کلیک کاربر باز بشه وهمچنین عکسهاش هم میخوام به دلخواه تغییر بدم لطفا راهنمایی کنید ممنون میشم

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *