Tutoriel sur le développement de légendes de barre de navigation élégantes avec l'échange CSS_Experience

制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！

CSS允许你创造具有吸引力的导航栏，采用CSS的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于CSS的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的CSS站点布局中。

如何把一个结构化的列表样式化为导航栏菜单？

对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。

解决方案

导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用CSS样式化的一个列表。

图1：样式化列表的导航栏"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

• Recipes
• Contact Us
• Articles
• Buy Online

#navigation {

largeur : 200 px ;

}

#navigation ul {

style de liste : aucun ;

marge : 0;

remplissage : 0 ;

}

#navigationli{

bordure inférieure : 1px solide #ED9F9F ;

}

#navigation li a:lien, #navigation li a:visité {

taille de police : 90 % ;

affichage : bloquer ;

rembourrage : 0,4em 0 0,4em 0,5em ;

bordure gauche : 12px solide #711515;

bordure droite : 1px solide #711515;

couleur de fond : #B51032 ;

couleur : #FFFFFF;

texte-décoration : aucune ;

}

Discuter

Pour créer une barre de navigation basée sur une liste non ordonnée, créez d'abord votre liste et placez chaque lien de navigation dans un élément li, comme ceci :

• Recettes
• Contactez-nous
• Articles
• Acheter en ligne

Ensuite, choisissez un identifiant approprié pour inclure la liste dans un div :

• Recettes
• Contactez-nous
• Articles
• Acheter en ligne

Comme vous pouvez le voir dans la figure 2 ci-dessous, ce balisage semble assez ordinaire dans le style par défaut du navigateur.

Figure 2 : Liste de base sans style

La première chose que nous devons faire est de styliser le conteneur où se trouve la barre de navigation – dans ce cas #navigation :

#navigation {

largeur : 200 px ;

}

Ici, j'ai simplement donné une largeur à la #navigation. Si ce système de navigation fait partie d'une mise en page CSS, je pourrais également ajouter des informations de localisation à cet identifiant.

Ci-dessous, nous stylisons la liste :

#navigation ul {

style de liste : aucun ;

marge : 0;

remplissage : 0 ;

}

Comme le montre la figure 3, les règles ci-dessus suppriment le préfixe et l'indentation qui apparaissent par défaut lorsque le navigateur affiche une liste.

Figure 3 Liste des retraits et préfixes supprimés

L'étape suivante consiste à styliser les éléments li en utilisant #navigation, en leur donnant un bord inférieur :

#navigationli{

bordure inférieure : 1px solide #ED9F9F ;

}

Enfin, on stylise le lien :

#navigation li a:lien, #navigation li a:visité {

taille de police : 90 % ;

affichage : bloquer ;

rembourrage : 0,4em 0 0,4em 0,5em ;

bordure gauche : 12px solide #711515;

bordure droite : 1px solide #711515;

couleur de fond : #B51032 ;

couleur : #FFFFFF;

texte-décoration : aucune ;

}

À ce stade, la plupart du travail a été fait. Les règles CSS que nous avons établies incluent l'ajout de bordures gauche et droite, la suppression des soulignements, etc. La première définition d'attribut dans cette règle définit l'attribut d'affichage sur block, ce qui provoque l'affichage de ces liens en tant qu'éléments de bloc, de sorte que lorsque votre curseur passe sur ces "boutons" de navigation, l'effet d'affichage et l'utilisation de l'image la navigation est exactement la même.