simpleNavi

2021.10.6-

simpleNavi

1. 概要

　シンプルなナビゲーションページを作るためのJavascriptプログラムです。このサイトのトップページを作る目的で作りました。

　トップページは以下のような表示になります。

(1) ジャンルの一覧が表示され、それぞれのジャンルに▼印が付きます。

(2) ▼をクリックすると見出しの一覧が表示されます。

(3) 見出しの[リンク]をクリックすると「リンク設定されたページ」が表示されます。

(4) (2)で見出しの[photo]をクリックすると「設定されたPHOTO画面」が表示されます。PHOTO画面の画像(jpg, png, gif)をクリックすると新しいタブで表示されます。

　なお、「○○.html?kw=白神」のようにキーワードを指定すると「PHOTO画面」を直接呼び出すこともできます。

2. 必要なファイル

　必要なファイルは以下の4つで、同じフォルダに置きます。

HTMLファイル(例えばindex.html)...3節
simplenavi.js...simplenavi.txtをダウンロードし、ファイル名をsimplenavi.jsに変更します。
cookie.js...別途入手します。

3. HTMLファイルの例(例えばindex.html)

<!DOCTYPE html> <html lang=ja> <head> <meta charset="utf-8"> <title>simpleNavi</title> <script src=cookie.js></script> <script src=simplenavi.js></script> </head> <body> <h2 align=center id=TITLE></h2> <div id=CONTENT1> ... <div id=MENU></div> ... </div> <div id=CONTENT2></div> <textarea id=NAVIDATA> // --- ここからナビデータ --- ものづくり(木工) 2021 車中泊用ベッド woodcraft/stepwgn.html woodcraft/img/stepwgn2.jpg ... 1967 腰掛け img/misc/1967gijutsu.jpg img/misc/19670603drawing.jpg 中学校2年の技術で腰掛けを作りました。... ものづくり(電子工作) 2020 CO2チェッカー co2checker/ ... // --- ここまでナビデータ --- </textarea> </body> </html>

(ナビデータの説明)

タブなしの行は「ジャンル」で▼が表示されます。
タブ1段の行は「見出し」(ただし[...]は「分類名」)で▼のクリックでその一覧が表示されます。
タブ区切りでurl(複数可)を書けば表示箇所がリンクになります。
タブ2段(以上)の行は「見出し」に対応する「画像(jpg,png,gif,mp4)」または「説明テキスト」です。
[photo]の表示が出てクリックでPHOTO画面に切り替わります。
タブ区切りで複数の画像を横に配置(幅は自動調整)されます。
複数行を記載できます。
行頭が「//」ならその行はコメントになります。

koyama88@cameo.plala.or.jp