https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > Jqery ドロワーメニュー(スマホサイト用)

Jqery ドロワーメニュー(スマホサイト用)


Jqeryを利用したドロワーメニュー(ページ外にうにゅっと横から出てくるメニュー)プラグインです。Jqeryの設置が条件になります。
詳しくは uikit Off-canvas参照

「CODE」ボタンをクリックすると参考コードを参照できます。


	│
	├_common/
	│  ├css/
	│  │ └uikit.drawer_menu.min.css.gz
	│  ├js/
	│  │ └uikit.drawer_menu.min.js.gz
	│  ├fonts/
	│  │ └フォントファイルを設置
	│  └image/
	│    └適当なディレクトリの中に画像を設置
	│
	├各ページディレクトリ
	│ └index.html (Jqueryの読み込み・CSSやJSファイルの読み込み)
	│
	│

 サンプルデモページ参照




サンプル




1.drawer_menu CSSファイル


drawer_menu CSSファイル設置
「css」ディレクトリの中にuikit.drawer_menu.min.css、または圧縮版uikit.drawer_menu.min.css.gzを設置

drawer_menu CSSファイル読み込み
<head>内に、上記ファイルを読み込み


html <head>内

<!-- drawer_menu用CSS --> <link rel="stylesheet" href="css/uikit.drawer_menu.min.css.gz">


2.Jqery本体読み込み


Jqery読み込み
Jqery CDN利用参照


3.drawer_menu JSファイル


drawer_menu JSファイル設置
「js」ディレクトリの中にuikit.drawer_menu.min.js、または圧縮版uikit.drawer_menu.min.js.gzを設置

drawer_menu JSファイル読み込み
</body>直前で読み込み(footer.html最後)/dd>


html </body>直前(またはfooter.html内最後)

<!-- SCRIPT --> <!-- SCRIPTは、AboveTheFoldで使わないものは</body>直前に記述 Facebook SNS系など --> <!-- Jquery2.1.4 CDN START 最新版 --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js.gz"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js.gz"><\/script>')</script> <!--<![endif]--> <!-- Jquery END --> <!-- JQUERYを利用するSCRIPTやJSファイルは、Jquery.js読み込み後に記述 --> <script src="js/drawer_menu.min.js.gz"></script> </body>


4.FONTSファイル


FONTSファイル設置
上記「js」「css」ディレクトリと同じ階層に「fonts」ディレクトリを作成し、「fontファイル10ファイル」を設置


5.html 本文記述


html 本文記述

ドロワーメニューの背景色は、CSSで「.uk-offcanvas-bar」クラスで「background: #a2a2a2;」などとし設定
その他、 サンプルデモページ参照

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会