| IE7で元気いっぱいの水平方向のメニューの問題
Robert Nitko - 2009年11月7日 |
やあ. のような多くの前に私に私はこのメニューバーの問題を解決するには時間の一体を持つよ. 私は読んで読み取りおよび以前の記事を読む. それを試みたとを悩ませて、人々のソリューションを試みた. は、私をここにもたらす.
私は、メインメニューバー上の6つの主要カテゴリーを持って. うちのいくつか私のサブメニューをドロップダウンして下. 他には何も. 一部のブラウザで全6種類を表示しながら、特定の動きにつまり、私の6項目の私の最初の項目のバックアップの下で. "狂った!"王ルイの言葉のジャングルの中で図書. 参った.
ので、確かに私は読んでこれらすべての素晴らしいリチャードウィリアムズしようとそんなに長い間、人々を支援されている. 神は彼祝福. 私は彼と同じ問題の病気の確信している. しかし彼は、常駐の専門家と思われる, 教祖と救世主. あなたに私の帽子を脱い. あなたダ男.
だから召喚私の挑戦は彼が再び私も欲しい. 1つの注意. 私は、メニューバーに、最終的に7にするが、それは解決策には影響が疑問もう1つのカテゴリーに追加されます.
ここに私のコードでは、sprymenubarhorizontalからの.CSSの
@文字は"utf - 8";
/ * sprymenubarhorizontal.CSSの-バージョン0.6 -元気なプレリリース版の一.6.1 * /
/ *へCOPYRIGHT（C）2006. Adobeシステムに組み込ま. すべての権利予約. * /
/************************************************* ******************************
レイアウト情報: ボックスモデルの説明, 位置決め, Zオーダー
************************************************** ***************************** /
/ *メニューバーの最も外側のコンテナ, ない、余白やパディング*と自動幅]ボックス/
UL規格.Menubarhorizontal
{
マージン: 0;
パディング: 0;
リストスタイルのタイプ: なし;
フォントサイズ: 100％;
カーソル: デフォルト;
幅: 自動;
}
/ *このクラスを使用して、アクティブなメニューバーを設定, 現在のインデックスすなわち、レンダリングのバグに対応zに設定: http:/ / therealcrisp.Xs4all.オランダ/ meuk /すなわちzindexbug.html * /
UL規格.Menubaractive
{
Zインデックス: 1000;
}
/ *メニュー項目のコンテナ, 位置を子供達がこのコンテナに相対的に固定幅*は/
UL規格.Menubarhorizontal李
{
マージン: 0;
パディング: 0;
リストスタイルのタイプ: なし;
フォントサイズ: 100％;
位置: 相対的な;
テキストを整列: 左;
カーソル: ポインタ;
幅: 8em;
フロート: 左;
}
/ *サブメニューは親の下に表示されます（上: 0）と高いz -インデックス, しかし、それらが最初に画面の左側に消灯している（- 1000em）* /
UL規格.Menubarhorizontal UL規格
{
マージン: 0;
パディング: 0;
リストスタイルのタイプ: なし;
フォントサイズ: 100％;
Zインデックス: 1020;
カーソル: デフォルト;
幅: 8.2em;
位置: 絶対;
左: - 1000em;
}
/そのクラスを指定してmenubarsubmenuvisible表示されて*サブメニュー, これは、親メニュー項目*下記の画面上に来る我々自動的に左のセット/
UL規格.Menubarhorizontal UL規格.Menubarsubmenuvisible
{
左: 自動;
}
/ *メニュー項目のコンテナの親として*を固定幅と同じです/
UL規格.Menubarhorizontal UL規格李
{
幅: 8.2em;
}
/ *サブメニューを少し右（95％）と最大（-5％）* /重なって表示されます
UL規格.Menubarhorizontal UL規格UL規格
{
位置: 絶対;
マージン: -5％0 0 95％;
}
/そのクラスを指定してmenubarsubmenuvisible表示されて*サブメニュー, ので、画面*に付属を0に左のセット/
UL規格.Menubarhorizontal UL規格.Menubarsubmenuvisible UL規格.Menubarsubmenuvisible
{
左: 自動;
頂上: 0;
}
/************************************************* ******************************
設計情報: カラースキームを説明, 境界線, フォント
************************************************** ***************************** /
/ *サブコンテナのすべての側面に*国境は/
UL規格.Menubarhorizontal UL規格
{
国境: 1px固体＃cccの;
}
/ *メニュー項目のパディングを明るい灰色のブロックとは、テキストの装飾*は/
UL規格.Menubarhorizontal
{
表示する: ブロック;
カーソル: ポインタ;
背景色: ＃999;
パディング: 0.5em 0.75em;
色: ＃333;
テキストの装飾: なし;
}
/その上でマウスを持って、または青色の背景と白い文字が*にフォーカス*メニュー項目/
UL規格.Menubarhorizontal:ホバー, UL規格.Menubarhorizontal:フォーカス
{
背景色: ＃33c;
色: ＃333;
}
/は、サブメニューの青色の背景と白い文字が*でmenubaritemホバーに設定されて開かれている*メニュー項目/
UL規格.Menubarhorizontal.Menubaritemホバー, UL規格.Menubarhorizontal.Menubaritemsubmenuホバー, UL規格.Menubarhorizontal.Menubarsubmenuvisible
{
背景色: ＃33c;
色: ＃333;
}
/************************************************* ******************************
サブメニューを表示: スタイルがある場合、特定のメニュー項目の下にサブメニューです
************************************************** ***************************** /
/は、サブメニューが*メニュー項目とは、クラスの指定menubaritemsubmenuている背景画像はこれまで（95％左）と垂直（50％を中心に配置を使用して設定されます）* /
UL規格.Menubarhorizontal.Menubaritemsubmenu
{
背景イメージ: のURL（sprymenubardown.Gifファイル）;
背景を繰り返す: ノー繰り返し;
背景の位置: 95％50％;
}
/は、サブメニューが*メニュー項目とは、クラスの指定menubaritemsubmenuている背景画像はこれまで（95％左）と垂直（50％を中心に配置を使用して設定されます）* /
UL規格.UL規格menubarhorizontal.Menubaritemsubmenu
{
背景イメージ: のURL（sprymenubarright.Gifファイル）;
背景を繰り返す: ノー繰り返し;
背景の位置: 95％50％;
}
/は、サブメニューを開いている*メニュー項目とは、クラスの指定menubaritemsubmenuホバーしているところ（95％左）と垂直（50％を中心に配置）*"背景イメージ"ホバーを使用して設定されて/
UL規格.Menubarhorizontal.Menubaritemsubmenuホバー
{
背景イメージ: のURL（sprymenubardownホバー.Gifファイル）;
背景を繰り返す: ノー繰り返し;
背景の位置: 95％50％;
}
/は、サブメニューを開いている*メニュー項目とは、クラスの指定menubaritemsubmenuホバーしているところ（95％左）と垂直（50％を中心に配置）*"背景イメージ"ホバーを使用して設定されて/
UL規格.UL規格menubarhorizontal.Menubaritemsubmenuホバー
{
背景イメージ: のURL（sprymenubarrightホバー.Gifファイル）;
背景を繰り返す: ノー繰り返し;
背景の位置: 95％50％;
}
/************************************************* ******************************
ブラウザのハッキング: 場合を除き、専門家されているハッキングの下に変更すべきではない
************************************************** ***************************** /
/ IE用のハック*: するために、サブメニューのフォームコントロールの上を見ることを確認, Iframeを*と私たちのアンダーレイの各サブメニュー/
UL規格.Menubarhorizontal iframeを
{
位置: 絶対;
Zインデックス: 1010;
フィルタ:アルファ（不透明度:0.1）;
}
/ IE用のハック*: メニュー項目の外観を安定させるため、フロート型のスラッシュすなわち5を維持することです.0 *パースから/
@メディア画面, 投影
{
UL規格.Menubarhorizontal李.Menubaritemie
{
表示する: インライン;
F \ loat: 左;
背景: ＃333;
}
}
事前に感謝.
Bob | |
