ソース /*======================================================================== .menu_ls { display:none; } .menu_ls_hidden { display:none; } /*======================================================================== /*--------------------------------------------------------------------- /* Pukiwiki.cssで設定されている余分な設定を無効化するための設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls { width:9em; position:absolute; z-index:100; display:block; } td.menubar .menu_ls ul { margin :0px !important; padding:0px !important; } /*----------------------------------------------------------------- /* メニューの表示位置を設定。必要があればtop,left,widthの値を調整。 /*---------------------------------------------------------------*/ td.menubar .menu_ls { ; } /*======================================================================== /*--------------------------------------------------------------------- /* フォントサイズ /*-------------------------------------------------------------------*/ td.menubar .menu_ls { ; } /*--------------------------------------------------------------------- /* メニュー内の文字の寄せ方を指定。( center | left | right ) /* 「center」を推奨。 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul{ text-align :center; } /*--------------------------------------------------------------------- /* 文字の種類を指定。 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul { font-family:"ms pゴシック","osaka",sans-serif; } /*--------------------------------------------------------------------- /* リンクの下線を指定。必要なら値をunderlineに /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul a{ text-decoration:none; } /*--------------------------------------------------------------------- /* メニューの文字色指定を行います。 /*-------------------------------------------------------------------*/ /*----------------------------------------------------------------- /* 訪問前 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul a:link { color:#0099FF; } /*----------------------------------------------------------------- /* 訪問後 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul a:visited { color:#0099FF; } /*----------------------------------------------------------------- /* オンマウス時 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul a:hover { color:#ffffff; } /*======================================================================== /*--------------------------------------------------------------------- /* メニューやオンマウス時の背景の指定 /*-------------------------------------------------------------------*/ /*----------------------------------------------------------------- /* 背景色 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul li { background-color: #000000; } /*----------------------------------------------------------------- /* オンマウス時 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul a:hover { background-color:#9999ff; } /*----------------------------------------------------------------- /* サブメニューへ移動したときの色。 /*---------------------------------------------------------------*/ td.menubar .menu_ls ul li.on { background-color:#ccccff; } /*======================================================================== /*--------------------------------------------------------------------- /* メニューのサイズを決定。 /* ここで枠線も決めてしまうのは、border-widthが総横幅の調整に絡んでくる為。 /* borderの微調整は必要になる。 /*-------------------------------------------------------------------*/ /*--------------------------------------------------------------------- /* メニュー幅の設定 /* 「1%」を推奨。(メニューを縦表示にする為の指定) /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul { width:1%; } /*--------------------------------------------------------------------- /* アイテム幅の設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul li.off , td.menubar .menu_ls ul li.on { /* アイテムの縦幅の指定 */ height:19px !important; /* 必須:「td.menubar .menu_ls」の「width」と同じにする */ width:9em ; /* 文字を縦中央揃えするための指定 */ line-height:19px !important; } /*--------------------------------------------------------------------- /* 枠線の設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul li.on , td.menubar .menu_ls ul li.off { border:1px solid #9999FF; } /*--------------------------------------------------------------------- /* 一階層目の上下余白の設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul li.on , td.menubar .menu_ls ul li.off { margin:1px 0px; } /*--------------------------------------------------------------------- /* 二層目以降の上下余白の設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul ul li.off , td.menubar .menu_ls ul ul li.on { margin:0px; } /*--------------------------------------------------------------------- /* 二層目以降の位置調整の設定 /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul ul{ /* 必須:「td.menubar .menu_ls」の「width」と同じにする */ left:9em; /* height + border - margin の値を計算して、マイナス値にしてください。 */ /* 例) 19 + 2 - 1 = 20 => -20 */ /* ブラウザで結果を見ながら、微調整するといい。 */ top:-20px; } /*--------------------------------------------------------------------- /* 二層目以降のメニュー枠線の設定 /*-------------------------------------------------------------------*/ /*--------------------------------------------------------------------- /* 階層メニューは以下のように表示させている。 /* ┌─────┐ ← (1)li.top /* └─────┘ /* └─────┘ ← (2)li /* └─────┘ ← (3)li /*-------------------------------------------------------------------*/ td.menubar .menu_ls ul ul li.off , td.menubar .menu_ls ul ul li.on { border-top:0px solid #9999ff; } /* (1)の枠線の上を表示。*/ td.menubar .menu_ls ul ul li.top { border-top:1px solid #9999ff; } /*======================================================================== /*================================================================ 以下のプロパティはプルダウン機構に深く関わっている物です。 熟練者以外はいじらないでください。 =================================================================*/ td.menubar .menu_ls ul * { list-style:none; display:block; } td.menubar .menu_ls ul { position:relative; } td.menubar .menu_ls ul li.off{ position:relative; float:left; overflow:hidden; } td.menubar .menu_ls ul li.on{ float:left; overflow:hidden; } td.menubar .menu_ls ul>li.on{ overflow:visible; } /*======================================================================== td.menubar .menu_ls_hidden { display:block; } td.menubar .menu_ls_hidden ul li * { padding:0px; margin:0px; display:none; } td.menubar .menu_ls_hidden ul li{ height:20px; padding:1px 0px; display:block; color:white; } /*======================================================================== td.menubar span.noexists { color:inherit; background-color:#ffffff; } td.menubar ul li.on>span.noexists { background-color:#fffacc; } /*======================================================================== td.menubar .menu_ls ul li.sub>a { background-image:url(menu_ls/exist_sub_article_mouse_out.gif); background-repeat: no-repeat; background-position:right center; } td.menubar .menu_ls ul li.sub>a:hover { background-image:url(menu_ls/exist_sub_article_mouse_on.gif); background-repeat: no-repeat; background-position:right center; } /* IE用の指定 */ td.menubar .menu_ls ul li.sub { background-image:url(menu_ls/exist_sub_article_mouse_out.gif); background-repeat: no-repeat; background-position:right top; } td.menubar span.noexists { background-image:url(menu_ls/exist_sub_article_mouse_out.gif); background-repeat: no-repeat; background-position:right center; } /*======================================================================== td.menubar .menu_ls_error_msg { padding:0px; margin :0px; display:none; } .menu_ls_error_msg { border : solid 1px red ; padding: .5em ; margin : 1em auto ; width : 30em; background-color: #FFCCCC ; } |