ソース/menubar.css
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
| ]
開始行:
[[ソース]]
@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 | ri...
/* 「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 l...
/* アイテムの縦幅の指定 */
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...
border:1px solid #9999FF;
}
/*------------------------------------------------------...
/* 一階層目の上下余白の設定
/*------------------------------------------------------...
td.menubar .menu_ls ul li.on , td.menubar .menu_ls ul li...
margin:1px 0px;
}
/*------------------------------------------------------...
/* 二層目以降の上下余白の設定
/*------------------------------------------------------...
td.menubar .menu_ls ul ul li.off , td.menubar .menu_ls u...
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 u...
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_ou...
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...
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_ou...
background-repeat: no-repeat;
background-position:right top;
}
td.menubar span.noexists {
background-image:url(menu_ls/exist_sub_article_mouse_ou...
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 | ri...
/* 「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 l...
/* アイテムの縦幅の指定 */
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...
border:1px solid #9999FF;
}
/*------------------------------------------------------...
/* 一階層目の上下余白の設定
/*------------------------------------------------------...
td.menubar .menu_ls ul li.on , td.menubar .menu_ls ul li...
margin:1px 0px;
}
/*------------------------------------------------------...
/* 二層目以降の上下余白の設定
/*------------------------------------------------------...
td.menubar .menu_ls ul ul li.off , td.menubar .menu_ls u...
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 u...
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_ou...
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...
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_ou...
background-repeat: no-repeat;
background-position:right top;
}
td.menubar span.noexists {
background-image:url(menu_ls/exist_sub_article_mouse_ou...
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 ;
}
ページ名: