6

この質問は非常に長いように思えますが、すべてを明確に説明したかったのです。

望ましい結果

サブメニュー付きの水平メニューバーがあります。ゼロから作成したため、既存のフレームワークは使用していません。セマンティック マークアップには、ボタン、アンカー、およびスパンの組み合わせを使用します。

  • 新しいページに移動するアイテムのアンカー
  • どこにも移動しないがサブメニューがある項目のボタン
  • 無効なアイテムのスパン

注: このサイトは限られた特定のユーザー向けであるため、アクセシビリティの欠如については心配していません。

サブメニューは、含まれる最も幅の広いメニュー項目と同じ幅にする必要があります。また、カーソルとフォーカスの輪郭が必要に応じて表示されるように、各メニュー項目はサブメニューの幅を埋める必要があります。

問題

Firefox では、次のシナリオでは、サブメニューが最も幅の広い項目の幅まで拡張されません。

  • サブメニューは絶対配置
  • サブメニューは、静的以外の位置を持つブロック内に含まれています
  • 最長のメニュー項目はボタンです

Chrome、IE 8、Firefox 12、および Firefox 20 でテストしました。Chrome と IE では期待どおりに表示されますが、どちらのバージョンの Firefox でも表示されません。

JavaScript、画像、無効化された項目、および多くのメニュー項目が削除された縮小版を作成しました。コードは以下とjsFiddleにあります。これは Firefox 20 のスクリーンショットです。

メニュー項目がつぶれた Firefox のスクリーンショット
Section Titles項目が押しつぶされていること に注意してください。サブメニューは、ページ タイトルアイテムと同じ幅です(パディングあり)。また、最上位のサブメニューではこれが問題にならないことに注意してください。このメニューは [ PDF タイトルのカスタマイズ] の幅まで拡張されています。

Section Titlesアイテムはボタンです。アンカーに変更すると、サブメニューが必要に応じて展開されます。ボタン CSS を remove に変更するwidth: 100%と、サブメニューが必要に応じて展開されます。しかし、その後、サブメニューよりも狭いメニュー項目は幅を埋めなくなりました (追加してもdisplay: block)。

これは、上記の修正によってメニューの他の部分がどのように壊れるかのスクリーンショットです。

狭いメニュー項目を含む Firefox のスクリーンショット
テキストの外側にカーソルを置いたとき、カーソルがポインターではないことに注意してください。はい、 のカーソルを変更することで修正できますliが、もう 1 つの問題はフォーカス アウトラインです。テキストだけでなく、メニュー項目全体の周りにフォーカス アウトラインを配置したい (これが での動作width: 100%です)。

私も で遊んでみまし-moz-box-sizingたが、それでも喜びはありません。

 簡単な回避策として、この特定のケースでは、ページ タイトルを長くするためにページ タイトルにいくつか追加しました。ただし、メニューが動的に作成される場合、そのソリューションは機能しません。

HTML コード ( jsFiddle )

<ul id="navAdminMenu">
    <li><a href="#">Companies</a></li
    ><li class="hasSubmenu"><button type="button">Books</button>
        <ul>
            <li><a href="#">Manage Books</a></li
            ><li><a href="#">PDF Profiles</a></li
            ><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
                <ul>
                    <li><a href="#">Page Titles</a></li
                    ><li class="hasSubmenu"><button type="button">Section Titles</button>
                        <ul>
                            <li><a href="#">Profile Section</a></li
                            ><li><a href="#">Index Section</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li
    ><li class="hasSubmenu"><button type="button">Lists</button>
        <ul>
            <li class="hasSubmenu"><button type="button">Categories</button>
                <ul>
                    <li><a href="#">Manage</a></li
                    ><li><a href="#">Reports</a></li>
                </ul>
            </li
            ><li><a href="#">Key Contact Positions</a></li>
        </ul>
    </li>
</ul>

CSSコード

#navAdminMenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #efefef;
}
#navAdminMenu button {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
    padding: 0;
    border: none;
}
#navAdminMenu a {
    text-decoration: none;
}
#navAdminMenu li {
    display: inline-block;
    margin: 0;
    border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
    background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    display: inline-block;
    height: 2.3em;
    line-height: 2.6;
    padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
    outline: 0; /* Firefox displays outline outside the menu box-shadow */
    box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
    color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
    content: "v";
    display: inline-block;
    width: 13px;
    margin-left: 5px;
}
#navAdminMenu ul {
    display: none;
    position: absolute;
    padding: 0;
    background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
    display: block;
}
#navAdminMenu ul > li {
    display: block;
    position: relative;
    border-top: 1px solid #999;
    border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    height: 2em;
    line-height: 2;
    padding: 0 30px 0 10px;
    white-space: nowrap;
}
#navAdminMenu ul > li > button {
    width: 100%; /* full width of submenu */
    text-align: left;
}
#navAdminMenu ul > li > a {
    display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
    outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
    content: ">";
    width: 16px;
    position: absolute;
    right: 0;
}
#navAdminMenu ul ul {
    left: 100%;
    top: 0;
}

質問

私が見逃している簡単なものはありますか？または、これをバグとして Mozilla に報告する必要がありますか?

注:ボタンをアンカーに変更したくありません。

4

1 に答える 1

8

私はこの小さな不具合に多くの時間を費やしましたが、私は骨のある犬のようです.

すべての試行錯誤と質問の草案作成に時間を費やした後、非常に簡単な解決策を見つけました。私は自分の質問を破棄することを考えましたが、他の誰かを助けることができるかもしれません.

非常にシンプルなソリューションです。シンプルすぎて泣きそうになりました。

#navAdminMenu ul > li > button {
    /* full width of submenu (even when its the longest item) */
    min-width: 100%;
}

min -widthの使用に注意してください。

于 2013-04-26T07:53:57.653 に答える