こんにちは。
今回は、スマホ等でオシャレな演出をしてくれるメニューの紹介です。
まずはサンプルをご覧下さい。
設置の仕方
ソースをダウンロードします。
headタグにcss、jsを読み込みます。
1 2 3 | <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script> |
bodyタグの中の最後にJQuery関連のjsを読み込みます。
1 2 3 4 5 6 7 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.dlmenu.js"></script> <script> $(function() { $( '#dl-menu' ).dlmenu(); }); </script> |
メニューの設定をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Open Menu</button> <ul class="dl-menu"> <li> <a href="#">Fashion</a> <ul class="dl-submenu"> <li> <a href="#">Men</a> <ul class="dl-submenu"> <li><a href="#">Shirts</a></li> <li><a href="#">Jackets</a></li> <li><a href="#">Chinos & Trousers</a></li> <li><a href="#">Jeans</a></li> <li><a href="#">T-Shirts</a></li> <li><a href="#">Underwear</a></li> </ul> </li> <li> <a href="#">Women</a> ul class="dl-submenu"> <li><a href="#">Jackets</a></li> <li><a href="#">Knits</a></li> <li><a href="#">Jeans</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">Blouses</a></li> <li><a href="#">T-Shirts</a></li> <li><a href="#">Underwear</a></li> </ul> </li> <li> <a href="#">Children</a> <ul class="dl-submenu"> li><a href="#">Boys</a></li> <li><a href="#">Girls</a></li> </ul> </li> </ul> </li> <li> <a href="#">Electronics</a> <ul class="dl-submenu"> <li><a href="#">Camera & Photo</a></li> <li><a href="#">TV & Home Cinema</a></li> <li><a href="#">Phones</a></li> <li><a href="#">PC & Video Games</a></li> </ul> </li> <li> <a href="#">Furniture</a> <ul class="dl-submenu"> <li> <a href="#">Living Room</a> <ul class="dl-submenu"> <li><a href="#">Sofas & Loveseats</a></li> <li><a href="#">Coffee & Accent Tables</a></li> <li><a href="#">Chairs & Recliners</a></li> <li><a href="#">Bookshelves</a></li> </ul> </li> <li> <a href="#">Bedroom</a> <ul class="dl-submenu"> <li> <a href="#">Beds</a> <ul class="dl-submenu"> <li><a href="#">Upholstered Beds</a></li> <li><a href="#">Divans</a></li> <li><a href="#">Metal Beds</a></li> <li><a href="#">Storage Beds</a></li> <li><a href="#">Wooden Beds</a></li> <li><a href="#">Children's Beds</a></li> </ul> </li> <li><a href="#">Bedroom Sets</a></li> <li><a href="#">Chests & Dressers</a></li> </ul> </li> <li><a href="#">Home Office</a></li> <li><a href="#">Dining & Bar</a></li> <li><a href="#">Patio</a></li> </ul> </li> <li> <a href="#">Jewelry & Watches</a> <ul class="dl-submenu"> <li><a href="#">Fine Jewelry</a></li> <li><a href="#">Fashion Jewelry</a></li> <li><a href="#">Watches</a></li> <li> <a href="#">Wedding Jewelry</a> <ul class="dl-submenu"> <li><a href="#">Engagement Rings</a></li> <li><a href="#">Bridal Sets</a></li> <li><a href="#">Women's Wedding Bands</a></li> <li><a href="#">Men's Wedding Bands</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /dl-menuwrapper --> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。オシャレな演出をしたい時に是非〜！
以上で「Responsive Multi-Level Menu」の紹介でした。
