|
日時: 2018/02/04 19:27
名前: lightbox
|
操作性がイマイチですが、慣れればどうって事は無いです。
新規作成
ユーザは 20 バイトまでです
ユーザはいくらでも作成できますが、一覧表示はできません
ページ(20 バイトまでです)もいくらでも作成できます。これが作成されるメニューの単位です
ページは、javascrpt の変数に使用される文字となるので、英数半角で入力します
カテゴリもいくらでも作成できますが、横メニューでは表示上多すぎると折り返してしまいます
最低1つ以上のページとカテゴリが登録済みの場合
サンプルユーザとして、lightbox を参照して下さい( 更新はできません )
一つの階層のメニュー項目が多すぎると、最初に表示しようとした時に読み込むのでレスポンスが遅くなります
任意の行の下に新しい行を追加したい場合
階層構造の作成方法
セパレータ
target
以下は lightbox のメニューを表示してソースより取り出したコードです
拡張子:
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>mylink</TITLE>
<STYLE type="text/css">
.bd A {
font-family: "MS Pゴシック" !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>
以下の部分は、ご自分のページの HEAD 部分に記述する内容です
YAHOO UI に関しては、lightbox.in.coocan.jp をそのままお使いになるか、
メニュー表示ページのリンクからダウンロードしたものをご自分のサイトに保存してお使いになるかです
以下の部分は、横メニューです。div 部分を自由に変更して好きな場所に埋め込む事になります
script タグに src 属性を追加して、コード部分を .js にして外部ファイル化すると良いと思います
|