2

作成中のサイトに CSS ベースのメニューを作成しようとしていますが、うまくいきません。以下に、私が達成しようとしていることを示す画像を示します (メニューとヘッダー全体が 1 つのブロックにあります)。

メニュー構成例

画像でスチールブルーの色で示されている画面の上半分には、背景画像のある div と、画像の上にテキストを配置するために絶対に配置された見出し 1 つのタグが含まれています。

その下の部分は、例の画像で黄色以外の色で示されていますが、通常の li リスト タグを含む標準の順序付けられていないリスト要素です。

次のようなもの：

<ul>
  <li>Home</li>
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
</ul>

順序付けられていないリストの親コンテナー内の各リスト要素には、次の行に沿ってアンカー タグが含まれます。

<ul>
  <li><a href="home">Home</a></li>
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>

アンカーを含むリスト項目に、表示されている実際のページと一致する href がある場合、その意図は、それを含む順序付けられていないリストの親の外で成長するように、高さを増やすことです。これを行うと、親ページのスチール ブルーの領域がオーバーレイされます。これは、例の画像の明るい紫色の長方形に似ています。

例の画像で青い四角形として示されている、一致もホバーもされていないリスト項目は、親の順序付けられていないリスト内にとどまり、デフォルトの背景スタイルと色を使用する必要があります。

リスト項目がホバーされると、高さに関してページに一致するものと同じスタイルに変更され、親リストの外にある必要がありますが、ホバーされていることを示すために別の色になる必要があります。ホバーが終了すると、以前の状態 (青い四角形) に戻るはずです。

部分的に機能しているように見えますが、現在は次のようになっています。

現在稼働中のメニュー

ご覧のとおり、実際の順序付けられていないリスト要素は下に流れず、その中の各リスト項目が互いに重なっています。これは、各リスト項目を絶対配置で設定しているためだと思われます。

相対的な配置を使用するようにリスト項目を変更すると、オーバーラップの問題は解決しますが、リスト項目が親リスト要素の上にポップアップして、画像のスチールブルーのセクションに重なるのを防ぎます。

また、もう 1 つの複雑な問題があります。これはCMS（正確にはmojoPortal）によって生成されているため、生成されたマークアップをほとんど制御できません。現在、ASP.NET によって生成されているマークアップは次のとおりです。

<nav class="span12" id="ctl00_SiteMenu1_ctl00">
  <ul id="ctl00_SiteMenu1_ctl00_UL" class="root-nav">
    <li class="current">
  <a href="/home.aspx">Home</a>
    </li>
<li>
      <a href="/contact-us.aspx">Contact Us</a>
    </li>
<li>
      <a href="/new-page.aspx">Frogs</a>
    </li>
  </ul>
</nav>

root-navクラスとが別の場所で定義されていることは知っていcurrentます。また、独自の CSS ルールに存在するすべての CSS ルールをオーバーライドすることもできます。

上記のオーバーラップの例では、次のように定義されています。

.mainhead
{
  background: url(img/menu-banner.png);
  height: 170px;
}

ul.root-nav
{
  background: #B3A90E;
  border-radius: 0px;
  z-index: 1000;
  position: relative;
  width: 1170px;
}

ul.root-nav li.current > a
{
  background-color: #B30D9E;
  background-image: none;
  height: 100px;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
  display: block;
}

ul.root-nav li > a
{
  background-color: #1C10B3;
  background-image: none;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
}

ul.root-nav li > a:hover
{
  background-color: #0BB312;
  background-image: none;
  height: 100px;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
}

これをオーバーレイで機能させたいのですが、黄色の領域をポップアップ項目の最大の高さにして、高さが変わっても何も動かないように固定します。

HTML5 でこれを行っているので、HTML5 マークアップと CSS ルールはまったく問題ありません。

誰かが思いついたアイデアを事前に感謝します。

4

1 に答える 1

1

そして1時間ほどで…帰ってきました。

そして、これは間違いなくスタックオーバーフローに関する一番の質問であるべきです...

なぜ？スタック オーバーフローに関する質問を投稿すると、通常、その後かなり短い時間で自分で解決することになります。

とにかく、それで十分です。

上記のオーバーラップを取得していた理由は、LI サイズを設定していなかったためです。

次のルールを追加するだけです。

ul.root-nav li.current
{
  min-width: 100px;
}

ul.root-nav li
{
  min-width: 100px;
}

ul.root-nav li-current の直前の私のスタイルシートに>問題が解決しました。

絶対配置のために高さが UL に設定されていないという私の考えは正しかったのですが、固定高さを設定するとうまくいきました。

于 2013-02-06T20:24:38.197 に答える