با استفاده از این جی کوئری با سبک مترو میتوانید سمت چپ یا راست پوستتون یک منو ثابت قرار دهید که با پایین آوردن اسکرول ثابت بماند .
آموزش استفاده
- فراخوانی 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" />
- کد 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>
سلام ببخشید من چجوری میتونم مثلا این رو بذارم تو وبلاگم؟
سلام,
علی جان باید طبق آموزشی که داده فایل هاتو اپلود و فراخوانی کنی تو قالب بعد هم کدهای html و css
ببخشید منظور شما از فراخوانی جیست
من با وردپرس قال را نمایش میدهم
لطفا بگویید که من این کد ها را در کدام مکان قرار دهم
منظورم از فراخوانی فایل ها اینه که مثلاً برای css از
Link rel …
استفاده کنی و داخلhref
بایدurl
مسیرcss
رو بدی .