ijquery

منو ثابت به سبک مترو

screenshot

با استفاده از این جی کوئری با سبک مترو میتوانید سمت چپ یا راست پوستتون یک منو ثابت قرار دهید که با پایین آوردن اسکرول ثابت بماند .

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

  1. فراخوانی js و css
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/metro-menu.js"></script>
     <link rel="stylesheet" href="css/metro-menu.css" />

     

  2. کد html
            <div class="wrapper">
                <div class="metro-side-menu">
                    <div class="main-level">
                        <div class="menu metro-blue-1" data-opening-id="sub1">
                            <div class="icon">
                                <img alt="" class="svg" src="images/svg-icons/appbar.information.circle.svg" />
                            </div>
    
                        </div>
    
                        <div id="sub1" class="first-level level">
                            <div class="column">
                                <a class="menu metro-red-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.language.csharp.svg" />
                                    </div>
    
                                    <div class="text">Core Language</div>
    
                                </a>
    
                                <a class="menu metro-blue-2" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.language.java.svg" />
                                    </div>
    
                                    <div class="text">Fav. Language</div>
    
                                </a>
    
                                <a class="menu metro-red-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.os.ios.svg" />
                                    </div>
    
                                    <div class="text">Our Laptops</div>
    
                                </a>
    
                                <a class="menu metro-orange-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.os.windows.8.svg" />
                                    </div>
    
                                    <div class="text">Our Servers</div>
    
                                </a>
                            </div>
                            <div class="column">
                                <a class="menu metro-blue-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.shuffle.svg" />
                                    </div>
    
                                    <div class="text">Setting</div>
    
                                </a>
    
                                <a class="menu metro-green-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.connection.wifi.svg" />
                                    </div>
    
                                    <div class="text">Wifi</div>
    
                                </a>
    
                                <a class="menu metro-red-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.smiley.frown.svg" />
                                    </div>
    
                                    <div class="text">Sad</div>
    
                                </a>
    
                                <a class="menu metro-red-4" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.sign.stop.svg" />
                                    </div>
    
                                    <div class="text">Stop Please</div>
    
                                </a>
                            </div>
                        </div>
    
                        <div class="menu metro-green-2" data-opening-id="sub2">
                            <div class="icon">
                                <img alt="" class="svg" src="images/svg-icons/appbar.question.svg" />
                            </div>
                        </div>
    
                        <div id="sub2" class="first-level level">
                            <div class="column">
                                <a class="menu metro-blue-10" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.radar.svg" />
                                    </div>
    
                                    <div class="text">Who's There?</div>
    
                                </a>
    
                                <a class="menu metro-purple-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.refresh.svg" />
                                    </div>
    
                                    <div class="text">Repeat After Me</div>
    
                                </a>
    
                                <a class="menu metro-blue-7" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.sailboat.svg" />
                                    </div>
    
                                    <div class="text">A boat</div>
    
                                </a>
    
                                <a class="menu metro-yellow-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.smiley.glasses.svg" />
                                    </div>
    
                                    <div class="text">Geek</div>
    
                                </a>
                            </div>
                            <div class="column">
                                <a class="menu metro-red-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.heart.svg" />
                                    </div>
    
                                    <div class="text">Love</div>
    
                                </a>
    
                                <a class="menu metro-blue-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.stocking.svg" />
                                    </div>
    
                                    <div class="text">Socks</div>
    
                                </a>
    
                                <a class="menu metro-green-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.tree.leaf.svg" />
                                    </div>
    
                                    <div class="text">Leaf</div>
    
                                </a>
    
                                <a class="menu metro-red-2" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.sound.stereo.stack.svg" />
                                    </div>
    
                                    <div class="text">Stereo</div>
    
                                </a>
                            </div>
                            <div class="column">
                                <a class="menu metro-blue-1" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.thermometer.kelvin.svg" />
                                    </div>
    
                                    <div class="text">It's Cold Here</div>
    
                                </a>
    
                                <a class="menu metro-purple-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.smiley.what.svg" />
                                    </div>
    
                                    <div class="text">WTF</div>
    
                                </a>
    
                                <a class="menu metro-pink-2" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.stock.up.svg" />
                                    </div>
    
                                    <div class="text">Statistics</div>
    
                                </a>
    
                                <a class="menu metro-blue-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.timer.rewind.svg" />
                                    </div>
    
                                    <div class="text">Rewind</div>
    
                                </a>
                            </div>
                        </div>
    
                        <div class="menu metro-orange-3" data-opening-id="sub3">
                            <div class="icon">
                                <img alt="" class="svg" src="images/svg-icons/appbar.speakerphone.svg" />
                            </div>
                        </div>
    
                          <div id="sub3" class="first-level level">
                            <div class="column">
    
                            <a class="menu metro-green-2" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.draw.brush.reflection.svg" />
                                    </div>
    
                                    <div class="text">Brush</div>
    
                                </a>
    
                                <a class="menu metro-yellow-3" href="#">
                                    <div class="icon">
                                        <img alt="" class="svg" src="images/svg-icons/appbar.cupcake.svg" />
                                    </div>
    
                                    <div class="text">Cake</div>
    
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

     


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

4 دیدگاه دربارهٔ «منو ثابت به سبک مترو»

    1. سلام,
      علی جان باید طبق آموزشی که داده فایل هاتو اپلود و فراخوانی کنی تو قالب بعد هم کدهای html و css

  1. ببخشید منظور شما از فراخوانی جیست
    من با وردپرس قال را نمایش میدهم
    لطفا بگویید که من این کد ها را در کدام مکان قرار دهم

    1. منظورم از فراخوانی فایل ها اینه که مثلاً برای css از Link rel … استفاده کنی و داخل href باید url مسیر css رو بدی .

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

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