CSSを使っておしゃれなナビゲーションバーを開発 その2_体験交流

解决方案

在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。

为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

content="text/html; charset=utf-8" />

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

#navigation {

width: 200px;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

#navigation li a:hover {

background-color: #711515;

color: #FFFFFF;

}

#navigation ul ul {

margin-left: 12px;

}

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin:0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}

 

增加这些以后的显示效果如图4。

图4. 包含子菜单的导航栏

讨论

嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分，在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何CSS样式，列表的结构依然清晰且容易理解，就象你在图5看到的一样。

图5：没有使用样式，包含子菜单的导航栏

下面是我们用来在主要项目的li元素里面标记这个简单的嵌套列表的HTML代码：

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

用HTML，如果简单的使用本文前面的CSS，不做任何修改的话，导航菜单的显示将如图6。由于li元素继承主菜单的样式，子列表将呈现出主导航栏一样的样式。

図6: デフォルトのスタイル シートのサブメニュー ナビゲーション バーの使用

ネストされたリストをメイン ナビゲーション バーの一部ではなくサブメニューのように表示するには、スタイル ルールを追加しましょう。

#navigation ul ul {

マージン左: 12px;

}

このルールは、図 7 に示すように、メイン メニューの右端に揃うようにネストされたリストをインデントします。

図7: インデント ルールを備えたナビゲーション バー

最後に、ネストされたテーブルの li 要素と a 要素にいくつかの簡単なスタイルを追加しましょう。その完璧な効果:

#navigation ul ul li {

border-bottom: 1px ソリッド #711515;

マージン: 0;

}

#navigation ul ul a:link、#navigation ul ul a:visited {

背景色: #ED9F9F;

カラー: #711515;

}

#navigation ul ul a:hover {

背景色: #711515;

色: #FFFFFF;

}