プルダウンメインメニュー
jQueryの便利なプラグインを簡単に設定可能にするインターフェース集です。
jQueryはもちろん、プラグイン、javascriptの知識も一切必要有りません。
難しい部分はすべてインターフェースが行います。
メニューエディタは、別途契約が必要な有料オプションです。
お問い合わせは、システムを導入された販売店にお願いいたします。
※本システムはjQueryやjQuery用プラグインを販売するものではありません。
無料で配布されているこれらオープンソースのフリーソフトをユーザに代わって設定するインターフェースです。
フリーソフトの著作権はjQuery及び、それぞれのプラグイン配布サイトにあります。
- プルダウンメインメニューは、apycomが配布するプラグインの設定を行います。
プルダウンメインメニューは、1つのサイトで1つしか設計することが出来ません。ネクストアイコン 下位階層メニューが有る場合のアイコン(矢印など)画像を設定します。 テーマにより自動で付けられる物もあります。 メインメニューアイコン 各メニューの項目名の前にアイコン(12×12)画像を表示することが出来ます。 項目ごとにアイコンを変更することは出来ません。 選択されたテーマにより不必要な場合や、邪魔になるものもあります。 サブメニューアイコン チャイルドメニューアイコン テーマ apycomが配布するテーマの一部を選択できます。 ※テーマは自動的にインストールされません。プレビューのサンプルをご参照ください。
※テーマもオープンソースのフリーソフトです。弊社が動作を保障する物では有りません。
※テーマにより他のプラグイン、ブラウザとの相性が悪く正常に動作しない物があります。メニュー項目設定 - メニューの階層は3階層までです。 Mainにアドレス(Address)を設定すると下位の階層は無視されます。 同様に、Subにアドレスが設定されるとChildが無視されます。 当然のことながら、SubやChildから開始することは出来ません。
- 下位の階層を含め、設定可能なメニューは、最大50件までです。 空欄を発見しだい、以下の項目すべてが無効になりますのでご注意ください。
- Actionには、ジャンプするURLはもちろん、javascript:に続けてjavascriptの関数を指定できます。
- 項目は行番号をドラッグして自由に移動させることが出来ます。
次は、完成したメニューを各ページに挿入します。 apyメニューはjQueryのプラグインですので、jQueryとapymenuのjavascriptをインクルードしなければなりません。<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/trycms/system.js"></script> <link type="text/css" href="/jquery/apymenu/theme04/menu.css" rel="stylesheet" /> <script type="text/javascript" src="/jquery/apymenu/theme04/menu.js"></script>
この2行の/theme04/がテーマのコードになります。この数値を01から22に変更してテーマを変更することが出来ます。<link type="text/css" href="/jquery/apymenu/theme15/menu.css" rel="stylesheet" /> <script type="text/javascript" src="/jquery/apymenu/theme15/menu.js"></script>
インクルードが設定が出来れば、実際にメニューを挿入する場所にSSIを挿入するだけです。<!--#include virtual="/trycms/apymenu.php"-->これで全てが完了しました。ページを表示させて正常に動作することを確認してください。
CGIやPHPでは、SSIで挿入することが出来ませんのでAjaxで挿入します。<div id="pulldownmenu">ここにメインメニューを挿入</div> <script type="text/javascript"> getAjaxText('/trycms/apymenu.php', 'pulldownmenu'); </script>
- メニューのカスタマイズは、それぞれのテーマをディレクトリごとコピーして、menu.cssを編集します。 たとえば、theme01を元に変更を加える場合は、ディレクトリ/jquery/apymenu/theme01を同じディレクトリ内に/jquery/apymenu/original等に名前を変えてコピーします。 これでオリジナルのテーマができましたので、/jquery/apymenu/original/menu.cssは自由に変更していただけます。