一昔前は効果が薄いと言われたハンバーガーメニュー、3本線ハンバーガーの形がメニューとして認知されこの頃見直されています、逆にスマホでは必需品？
左、右、上などからニュロっと出てくるドロワーメニューですがシンプルなものがいい、そんなニーズに合うのが「Drawer/ドロワー」ですね。
CDNでの設置
|
1 2 3 4 5 6 7 |
<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> |
基本のHTML
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Drawer/ドロワー</title> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> </head> <body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <li><a class="drawer-menu-item" href="#">Nav2</a></li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> </body> </html> |
右メニューに変更
|
1 2 3 |
<body class="drawer drawer--left"> ↓ <body class="drawer drawer--right"> |
ドロップダウンメニューを使う
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Drawer/ドロワー</title> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> </head> <body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <li><a class="drawer-menu-item" href="#">Nav2</a></li> <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">Nav2 <span class="drawer-caret"></span></a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav1</a></li> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</a></li> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li> </ul> </li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <!-- Bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
コメント