| コメント |
操作性がイマイチですが、慣れればどうって事は無いです。
[[新規作成]]
@DIV
1) 適当に ユーザID を入力して送信ボタンをクリック ( 次回そのID で表示する )
2) 新規ページID(英数半角) を入力して新規ページを作成し、リセットボタンをクリック
3) 新規カテゴリ(日本語OK)を入力してカテゴリ追加して、リセットボタンをクリック
@END
[[ユーザは 20 バイトまでです]]
[[ユーザはいくらでも作成できますが、一覧表示はできません]]
[[ページ(20 バイトまでです)もいくらでも作成できます。これが作成されるメニューの単位です]]
[[ページは、javascrpt の変数に使用される文字となるので、英数半角で入力します]]
[[カテゴリもいくらでも作成できますが、横メニューでは表示上多すぎると折り返してしまいます]]
[[最低1つ以上のページとカテゴリが登録済みの場合]]
@DIV
1) ユーザID を入力 して送信ボタンをクリックしてリセットボタンをクリック
2) ページとカテゴリを選択して、送信ボタンをクリック
3) 行を追加して、リンクが付いたタイトルをクリック
4) タイトルとURLを入力して更新
5) メニュー作成
6) 表示されたページのソースを取得
@END
[[サンプルユーザとして、lightbox を参照して下さい( 更新はできません )]]
[[一つの階層のメニュー項目が多すぎると、最初に表示しようとした時に読み込むのでレスポンスが遅くなります]]
[[任意の行の下に新しい行を追加したい場合]]
@DIV
1) 任意の行の行№の欄の数字をクリック
2) 行追加フィールドにその値が転送されるので、行追加ボタンをクリック
@END
[[階層構造の作成方法]]
@DIV
既に作成した行の場合、ツリー開始に変更するだけですが、URL がセットされていても
メニューでは処理されなくなるので注意して下さい。
新規にボタンで作成した場合はタイトルを変更して下さい( HTML が書けます )
階層構造の終了は、既存行を変更する場合は、タイトルも URL も空である必要があります。
新規に作成する場合は、ツリー開始ボタンで作成します
開始と終了は入力者がチェックする必要があります。自動的に補完されないので注意して下さい。
現在の階層構造どおりに、タイトルが階層構造で表示されます
@END
[[セパレータ]]
@DIV
空白行がセパレータとなります
@END
[[target]]
@DIV
未選択は、_target 扱いです
@END
以下は lightbox のメニューを表示してソースより取り出したコードです
@DIV
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>mylink</TITLE>
<STYLE type="text/css">
.bd A {
font-family: "ＭＳ Ｐゴシック" !important;
font-size: 12px !important;
text-align: left;
}
</STYLE>
<link rel="stylesheet" type="text/css" href=http://lightbox.in.coocan.jp/YUIMENU/menu.css" />
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/animation-min.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/container_core-min.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/menu-min.js"></script>
</HEAD>
<BODY>
<div style='position:relative;height:100px;z-index:10'>
<script type="text/javascript">
document.write( "<div class=\"yui-skin-sam\" style='position:absolute;left:0px;top:0px;width:100%'> \n<div id=\"menuunit_mylink\" class=\"yuimenubar yuimenubarnav\" style=''> \n<div id=\"menuunit_style_mylink\" class=\"bd\"> \n <ul class=\"first-of-type\"> \n " );
document.write( "<li class=\"yuimenubaritem\"><a\n" );
document.write( " class=\"yuimenubaritemlabel\"" );
document.write( " href=\"#\"" );
document.write( " target=\"_blank\"" );
document.write( ">メインリンク</a></li>" );
document.write( "<li class=\"yuimenubaritem\"><a\n" );
document.write( " class=\"yuimenubaritemlabel\"" );
document.write( " href=\"#\"" );
document.write( " target=\"_blank\"" );
document.write( ">外部リンク</a></li>" );
document.write("</ul></div></div></div>\n" );
var oMenu = new YAHOO.widget.MenuBar(
"menuunit_mylink",
{
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true
}
);
oMenu.beforeRenderEvent.subscribe(function () {
var oSubmenuData = {
"MENU_mylink1": [
{
text: "SQLの窓",
url: "http://hp.vector.co.jp/authors/VA003334/",
target: "_blank"
}
,{
text: "<B>サブメニュー</B>", submenu: { id: "sub1", itemdata: [
{
text: "<IMG src=\"http://lightbox.on.coocan.jp/image/tool_text_conv.png\" border=\"0\">",
url: "http://winofsql.jp/php/cnvtext/frame.htm",
target: "_blank"
}
,{
text: "さらに階層構造", submenu: { id: "sub2", itemdata: [
{
text: "フリーフォント画像作成",
url: "http://lightbox.on.coocan.jp/html/fontImage.htm",
target: "_self"
}
] } }
] } }
,{
text: "<HR size=1 style='width:200px;'>",
url: "#",
disabled: true
}
,{
text: "銀プロ",
url: "http://maglog.jp/lightbox/",
target: "_blank"
}
],
"MENU_mylink2": [
{
text: "Google",
url: "http://www.google.co.jp/",
target: "_blank"
}
]
};
this.getItem(0).cfg.setProperty("submenu",
{ id: "MENU_mylink1", itemdata: oSubmenuData["MENU_mylink1"] });
this.getItem(1).cfg.setProperty("submenu",
{ id: "MENU_mylink2", itemdata: oSubmenuData["MENU_mylink2"] });
});
oMenu.render();
</script>
</div>
<div style='position:relative;width:300px;'>
<script type="text/javascript">
document.write( "<div class=\"yui-skin-sam\" style='position:absolute;left:0px;top:0px;width:100%'> \n<div id=\"menuunitv_mylink\" class=\"yuimenu\" style=''> \n<div id=\"menuunitv_style_mylink\" class=\"bd\"> \n <ul class=\"first-of-type\"> \n " );
document.write( "<li class=\"yuimenuitem\"><a\n" );
document.write( " class=\"yuimenuitemlabel\"" );
document.write( " href=\"#\"" );
document.write( " target=\"_blank\"" );
document.write( ">メインリンク</a></li>" );
document.write( "<li class=\"yuimenuitem\"><a\n" );
document.write( " class=\"yuimenuitemlabel\"" );
document.write( " href=\"#\"" );
document.write( " target=\"_blank\"" );
document.write( ">外部リンク</a></li>" );
document.write("</ul></div></div></div>\n" );
var ovMenu = new YAHOO.widget.Menu(
"menuunitv_mylink",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: 0
}
}
);
ovMenu.beforeRenderEvent.subscribe(function () {
var oSubmenuData = {
"MENUV_mylink1": [
{
text: "SQLの窓",
url: "http://hp.vector.co.jp/authors/VA003334/",
target: "_blank"
}
,{
text: "<B>サブメニュー</B>", submenu: { id: "vsub1", itemdata: [
{
text: "<IMG src=\"http://lightbox.on.coocan.jp/image/tool_text_conv.png\" border=\"0\">",
url: "http://winofsql.jp/php/cnvtext/frame.htm",
target: "_blank"
}
,{
text: "さらに階層構造", submenu: { id: "vsub2", itemdata: [
{
text: "フリーフォント画像作成",
url: "http://lightbox.on.coocan.jp/html/fontImage.htm",
target: "_self"
}
] } }
] } }
,{
text: "<HR size=1 style='width:200px;'>",
url: "#",
disabled: true
}
,{
text: "銀プロ",
url: "http://maglog.jp/lightbox/",
target: "_blank"
}
],
"MENUV_mylink2": [
{
text: "Google",
url: "http://www.google.co.jp/",
target: "_blank"
}
]
};
this.getItem(0).cfg.setProperty("submenu",
{ id: "MENUV_mylink1", itemdata: oSubmenuData["MENUV_mylink1"] });
this.getItem(1).cfg.setProperty("submenu",
{ id: "MENUV_mylink2", itemdata: oSubmenuData["MENUV_mylink2"] });
});
ovMenu.render();
</script>
</div>
<br><br><br>
<A href="http://lightbox.on.coocan.jp/download/YUIMENU.lzh">YAHOO UI ( メニュー部分のみ:改造版 ) のダウンロード</A>
</BODY>
</HTML>
@END
以下の部分は、ご自分のページの HEAD 部分に記述する内容です
YAHOO UI に関しては、lightbox.in.coocan.jp をそのままお使いになるか、
メニュー表示ページのリンクからダウンロードしたものをご自分のサイトに保存してお使いになるかです
@DIV
<STYLE type="text/css">
.bd A {
font-family: "ＭＳ Ｐゴシック" !important;
font-size: 12px !important;
text-align: left;
}
</STYLE>
<link rel="stylesheet" type="text/css" href="http://lightbox.in.coocan.jp/YUIMENU/menu.css" />
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/animation-min.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/container_core-min.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/YUIMENU/menu-min.js"></script>
@END
以下の部分は、横メニューです。div 部分を自由に変更して好きな場所に埋め込む事になります
script タグに src 属性を追加して、コード部分を .js にして外部ファイル化すると良いと思います
@DIV
<div style='position:relative;height:100px;z-index:10'>
<script type="text/javascript">
コード
</script>
</div>
@END
|
メンテナンス