Responsive Fixed Off-canvas Menuの使い方
- 下記ページの 「Download」 よりファイル1式をダウンロード。
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にf外部化したcssファイルを読み込ませるためのコードを記述。<head> <!--外部化したcssファイル--> <link rel="stylesheet" type="text/css" href="css/Responsive Fixed Off-canvas Menu.css"> </head>
サンプルのResponsive Fixed Off-canvas Menu.cssコード(サンプルのcssは改変しています)
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ body, ul, li { margin: 0; padding: 0; border: 0; } a { color: #fff; text-decoration: none; font-weight: bold; } a:hover { text-decoration: none; } /*ここまでページ設定部分*/ /*ここからResponsive Fixed Off-canvas Menuの設定*/ .wrapper { width: 94%; max-width: 1140px; margin: 0 auto; } .wrapper-small { max-width: 728px; } .wrapper-flush { width: 100%; } /** * Navigation */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; background-color: #efefef; } /** * Nav container * 1. Ensure this slides in below parent * 2. Hide by default * 3. Smoother scrolling experience on iOS */ .nav-container { position: fixed; top: 60px; /* 1 */ left: 0; z-index: 9999; overflow-y: auto; visibility: hidden; /* 2 */ width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); /* 2 */ background-color: #c0c0c0; -webkit-overflow-scrolling: touch; /* 3 */ } /* 1. Show when `.is-visible` class is added */ .nav-container.is-visible { visibility: visible; /* 1 */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); /* 1 */ } /* Nav toggle */ .nav-toggle { line-height: 1; display: inline-block; padding: 1.25rem 1rem; border: 0; background-color: #e74c3c; } /* Nav toggle icon */ .nav-toggle .icon-menu { position: relative; display: inline-block; width: 28px; height: 20px; vertical-align: middle; fill: none; } /* Nav toggle icon lines */ .icon-menu .line { position: absolute; left: 0; display: block; width: 100%; height: 4px; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); background-color: #fff; } /* Nav toggle icon line 1 */ .icon-menu .line-1 { top: 0; } /* When active, rotate line 1 to be lefthand part of X */ .is-active .icon-menu .line-1 { -webkit-transform: translateY(8px) translateX(0) rotate(45deg); -ms-transform: translateY(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg); } /* Nav toggle icon line 2 */ .icon-menu .line-2 { top: 50%; margin-top: -2px; } /* When active, hide line 2 */ .is-active .icon-menu .line-2 { opacity: 0; } /* Nav toggle icon line 3 */ .icon-menu .line-3 { bottom: 0; } /* When active, rotate line 3 to be righthand part of X */ .is-active .icon-menu .line-3 { -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg); } /* Remove default list styles for menus */ .menu { list-style: none; margin: 0; padding: 0; } /** * 1. Give menu a lighter background than its container * 2. Prevent menu text from being accidentally highlighted */ .nav-menu { background-color: #555; /* 1 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* 2 */ } /* Give menu items a top border */ .nav-menu .menu-item { border-top: 1px solid #bbb; } /* Give last menu item a bottom border */ .nav-menu > .menu-item:last-child { border-bottom: 1px solid #bbb; } /* Darker background color on hover, and when toggled */ .nav-menu > .menu-item:hover, .nav-menu > .menu-item.is-active { background-color: #d0d0d0; } /* 1. Menu links are block level, by default */ .nav-menu .menu-link { display: block; /* 1 */ text-decoration: none; color: #fff; padding: 0.75rem 1rem; } /* 1. Menu items with dropdowns appear clickable */ .has-dropdown { position: relative; cursor: pointer; /* 1 */ } /* 1. Parent menu links inlined so you can toggle the dropdown */ .has-dropdown > .menu-link { display: inline-block; } /* 1. Add an icon to menu items that have sub menus */ .has-dropdown:after { font-size: 32px; position: absolute; top: 0; right: 1rem; bottom: 0; content: "+"; /* 1 */ color: #fff; } /* 1. Switch icon to n-dash when toggled */ .has-dropdown.is-active:after { content: "\2013"; /* 1 */ } /** * Dropdowns * 1. Hide dropdowns by default */ .nav-dropdown { display: none; /* 1 */ background-color: #fff; } /* 1. Show dropdown when toggled */ .has-dropdown.is-active > .nav-dropdown { display: block; /* 1 */ } /* 2nd level dropdown */ .nav-dropdown .nav-dropdown { background-color: #aaa; } .nav-dropdown .menu-item { border-color: #a0a0a0; } .nav-dropdown .nav-dropdown .menu-item { background-color: #b0b0b0; border-color: #909090; } /* Main content area */ .content { margin-top: 60px; } .content .wrapper { padding: 1rem 0; } @media (min-width: 960px) { .nav { background-color: #555; } .nav, .nav-container, .nav-container.is-visible { position: static; top: auto; left: auto; z-index: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav-container, .nav-container.is-visible { visibility: visible; height: auto; min-height: 0; overflow-y: visible; } .nav-toggle { display: none; } /* 1. Display menu items inline */ .nav-menu > .menu-item, .nav-menu > .menu-item.is-active { display: inline-block; /* 1 */ background-color: transparent; border: 0; } /* Remove bottom border on last child */ .nav-menu > .menu-item:last-child { border: 0; } .nav-menu .menu-item { -webkit-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } /* Remove +/- icons */ .has-dropdown:after { content: "" !important; } /* Add a caret to top-level menu items that have dropdowns */ .nav-menu > .has-dropdown:after { position: absolute; top: 50%; right: 1rem; width: 0; height: 0; margin-top: -2px; margin-left: -4px; content: ""; border-width: 5px 5px 0 5px; border-style: solid; border-color: #444 transparent transparent transparent; } /* Increase padding to compensate for caret */ .has-dropdown > .menu-link { padding-right: 2rem; } /* Re-style dropdowns for larger screens */ .nav-dropdown { display: block; opacity: 0; position: absolute; top: 100%; width: 200px; margin: 0; padding: 0.5rem 0; background-color: #555; box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.15); visibility: hidden; -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear; transition: visibility 0s linear 0.25s, opacity 0.25s linear; } .has-dropdown:hover > .nav-dropdown { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; } .nav-dropdown .menu-item { border: 0; } .nav-dropdown .menu-item:hover, .nav-dropdown .nav-dropdown .menu-item:hover { background-color: #d0d0d0; } .nav-dropdown .nav-dropdown, .nav-dropdown .nav-dropdown .menu-item { background-color: #555; } .nav-dropdown .nav-dropdown { z-index: 9998; top: 0; left: 100%; } .content { margin-top: 0; } }
・</body>の直前に外部化したjsファイルを読み込ませるためのコードを記述。
<!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--外部化したjsファイル--> <script src="js/Responsive Fixed Off-canvas Menu.js"></script> </body>
・<body></body>内にコードを記述<nav class="nav is-fixed" role="navigation"> <div class="wrapper wrapper-flush"> <button class="nav-toggle"> <div class="icon-menu"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </div> </button> <div class="nav-container"> <ul class="nav-menu menu"> <li class="menu-item has-dropdown"> <a href="#!" class="menu-link">Home</a> <ul class="nav-dropdown menu"> <li class="menu-item"> <a href="#!" class="menu-link">jQuery</a> </li> <li class="menu-item has-dropdown"> <a href="#!" class="menu-link">Front-end</a> <ul class="nav-dropdown menu"> <li class="menu-item"><a href="#!" class="menu-link">Html5</a></li> <li class="menu-item"><a href="#!" class="menu-link">CSS3</a></li> <li class="menu-item"><a href="#!" class="menu-link">Javascript</a></li> </ul> </li> <li class="menu-item"> <a href="#!" class="menu-link">jQueryScript</a> </li> </ul> </li> <li class="menu-item"> <a href="#!" class="menu-link">Blog</a> </li> <li class="menu-item"> <a href="#!" class="menu-link">Contact</a> </li> <li class="menu-item"> <a href="#!" class="menu-link">About</a> </li> </ul> </div> </div> </nav>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="utf-8" /> <title>Responsive Fixed Off-canvas Menu</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="css/Responsive Fixed Off-canvas Menu.css"> </head> <body> <nav class="nav is-fixed" role="navigation"> <div class="wrapper wrapper-flush"> <button class="nav-toggle"> <div class="icon-menu"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </div> </button> <div class="nav-container"> <ul class="nav-menu menu"> <li class="menu-item has-dropdown"> <a href="#!" class="menu-link">Home</a> <ul class="nav-dropdown menu"> <li class="menu-item"> <a href="#!" class="menu-link">jQuery</a> </li> <li class="menu-item has-dropdown"> <a href="#!" class="menu-link">Front-end</a> <ul class="nav-dropdown menu"> <li class="menu-item"><a href="#!" class="menu-link">Html5</a></li> <li class="menu-item"><a href="#!" class="menu-link">CSS3</a></li> <li class="menu-item"><a href="#!" class="menu-link">Javascript</a></li> </ul> </li> <li class="menu-item"> <a href="#!" class="menu-link">jQueryScript</a> </li> </ul> </li> <li class="menu-item"> <a href="#!" class="menu-link">Blog</a> </li> <li class="menu-item"> <a href="#!" class="menu-link">Contact</a> </li> <li class="menu-item"> <a href="#!" class="menu-link">About</a> </li> </ul> </div> </div> </nav> <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--外部化したjsファイル--> <script src="js/Responsive Fixed Off-canvas Menu.js"></script> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。