طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

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

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

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

  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 نظر

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

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

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

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

دانلود و پیش نمایش فایل منو ثابت به سبک مترو

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

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)