ソース/menubar.css
の編集
Top
/
ソース
/ menubar.css
[
トップ
] [
編集
|
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
| ]
-- 雛形とするページ --
BracketName
FrontPage
HTML講座/asdf/adsf/adsf
InterWiki
InterWikiName
InterWikiSandBox
InterWikiテクニカル
Memo
Memo/気になる記事
Memo/気になる単語
Memo/謎の文章
MenuBar
PHP
PukiWiki
PukiWiki/1.4
PukiWiki/1.4/Manual
PukiWiki/1.4/Manual/Plugin
PukiWiki/1.4/Manual/Plugin/A-D
PukiWiki/1.4/Manual/Plugin/E-G
PukiWiki/1.4/Manual/Plugin/H-K
PukiWiki/1.4/Manual/Plugin/L-N
PukiWiki/1.4/Manual/Plugin/O-R
PukiWiki/1.4/Manual/Plugin/S-U
PukiWiki/1.4/Manual/Plugin/V-Z
PukiWiki/設定
RSS
RSS/ITmedia
RecentDeleted
SandBox
WikiEngines
WikiName
WikiWikiWeb
YukiWiki
calendar2/2007-02-10
オフ会への道
コメント/授業/マルチメディア概論
ソース
ソース/menubar.css
ヘルプ
歌詞/SoundHorizon/黄昏の賢者
歌詞/東方
歌詞/東方/お嫁にしなさいっ!
歌詞/東方/シアワセうさぎ
歌詞/東方/ネココタマツリ
歌詞/東方/ラクト・ガール
歌詞/東方/惑いて来たれ、遊惰な神隠し
研究
作品/Flashガンシューティング
授業/マルチメディア概論
授業/マルチメディア概論/レポート
授業/マルチメディア概論/レポート/ビデオ・オン・デマンド
授業/技術英語
授業/言語処理
授業/仙人の授業の対策だ、ゴルァ!
整形ルール
卒業旅行
渡邊/行朗
日本語
欲しいプラグイン
[[ソース]] @charset "euc-jp"; /*======================================================================== 99%cssプルダウンメニューforカスタマイズ スタイルシート 制作:web工房きくちゃん http://www.stylish-style.com 最終調整日:2005年8月6日 このスタイルシートは自由に改変してかまいませんが、再配布を希望される場合は webstudio-kic@stylish-style.com まで連絡をください。 =========================================================================*/ .menu_ls { display:none; } .menu_ls_hidden { display:none; } /*======================================================================== /*0:メニューの表示位置の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* 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 { ; } /*======================================================================== /*1:文字、テキスト修飾の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* フォントサイズ /*-------------------------------------------------------------------*/ 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; } /*======================================================================== /*2:背景の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* メニューやオンマウス時の背景の指定 /*-------------------------------------------------------------------*/ /*----------------------------------------------------------------- /* 背景色 /*---------------------------------------------------------------*/ 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; } /*======================================================================== /*3:メニューサイズ・余白・枠線の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* メニューのサイズを決定。 /* ここで枠線も決めてしまうのは、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; } /*======================================================================== /* 4:変更不可 /*=======================================================================*/ /*================================================================ 以下のプロパティはプルダウン機構に深く関わっている物です。 熟練者以外はいじらないでください。 =================================================================*/ 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; } /*======================================================================== /* 5:余白をあけるためのもの。(改良の余地あり) /*=======================================================================*/ 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; } /*======================================================================== /* 6:未作成記事のためのスタイル。 /*=======================================================================*/ td.menubar span.noexists { color:inherit; background-color:#ffffff; } td.menubar ul li.on>span.noexists { background-color:#fffacc; } /*======================================================================== /* 7:下位階層に記事がある場合の指定 /*=======================================================================*/ 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; } /*======================================================================== /* 8:エラーメッセージ表示部分。 /*=======================================================================*/ 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 ; }
タイムスタンプを変更しない
[[ソース]] @charset "euc-jp"; /*======================================================================== 99%cssプルダウンメニューforカスタマイズ スタイルシート 制作:web工房きくちゃん http://www.stylish-style.com 最終調整日:2005年8月6日 このスタイルシートは自由に改変してかまいませんが、再配布を希望される場合は webstudio-kic@stylish-style.com まで連絡をください。 =========================================================================*/ .menu_ls { display:none; } .menu_ls_hidden { display:none; } /*======================================================================== /*0:メニューの表示位置の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* 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 { ; } /*======================================================================== /*1:文字、テキスト修飾の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* フォントサイズ /*-------------------------------------------------------------------*/ 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; } /*======================================================================== /*2:背景の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* メニューやオンマウス時の背景の指定 /*-------------------------------------------------------------------*/ /*----------------------------------------------------------------- /* 背景色 /*---------------------------------------------------------------*/ 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; } /*======================================================================== /*3:メニューサイズ・余白・枠線の設定 /*=======================================================================*/ /*--------------------------------------------------------------------- /* メニューのサイズを決定。 /* ここで枠線も決めてしまうのは、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; } /*======================================================================== /* 4:変更不可 /*=======================================================================*/ /*================================================================ 以下のプロパティはプルダウン機構に深く関わっている物です。 熟練者以外はいじらないでください。 =================================================================*/ 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; } /*======================================================================== /* 5:余白をあけるためのもの。(改良の余地あり) /*=======================================================================*/ 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; } /*======================================================================== /* 6:未作成記事のためのスタイル。 /*=======================================================================*/ td.menubar span.noexists { color:inherit; background-color:#ffffff; } td.menubar ul li.on>span.noexists { background-color:#fffacc; } /*======================================================================== /* 7:下位階層に記事がある場合の指定 /*=======================================================================*/ 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; } /*======================================================================== /* 8:エラーメッセージ表示部分。 /*=======================================================================*/ 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 ; }
テキスト整形のルールを表示する