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

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

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

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

解决方案

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

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

#탐색 {

너비: 200px;

}

#navigation ul {

목록 스타일: 없음;

여백: 0;

패딩: 0;

}

#내비게이션 리 {

테두리 하단: 1px 솔리드 #ED9F9F;

}

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

글꼴 크기: 90%;

디스플레이: 차단;

패딩: 0.4em 0 0.4em 0.5em;

테두리 왼쪽: 12px 단색 #711515;

테두리 오른쪽: 1px 실선 #711515;

배경색: #B51032;

색상: #FFFFFF;

텍스트 장식: 없음;

}

토론

순서가 지정되지 않은 목록을 기반으로 탐색 모음을 만들려면 먼저 목록을 만들고 다음과 같이 각 탐색 링크를 li 요소에 넣으세요.

• 레시피
• 문의하기
• 기사
• 온라인 구매

다음으로 div에 목록을 포함하기에 적합한 ID를 선택하세요.

아래 그림 2에서 볼 수 있듯이 이 마크업은 브라우저의 기본 스타일에서 꽤 평범해 보입니다.

그림 2: 스타일 지정이 적용되지 않은 기본 목록

가장 먼저 해야 할 일은 탐색 모음이 있는 컨테이너의 스타일을 지정하는 것입니다. 이 경우 #navigation :

#탐색 {

너비: 200px;

}

여기에서는 #navigation에 너비를 지정했습니다. 이 내비게이션 시스템이 CSS 페이지 레이아웃의 일부인 경우 이 ID에 일부 위치 정보를 추가할 수도 있습니다.

아래에서는 목록 스타일을 지정합니다.

#navigation ul {

목록 스타일: 없음;

여백: 0;

패딩: 0;

}

그림 3과 같이 위 규칙은 브라우저에 목록이 표시될 때 기본적으로 나타나는 접두사와 들여쓰기를 제거합니다.

그림 3 들여쓰기 및 접두어 제거 목록

다음 단계는 #navigation을 사용하여 li 요소의 스타일을 지정하고 하단 가장자리를 제공하는 것입니다.

#내비게이션 리 {

테두리 하단: 1px 솔리드 #ED9F9F;

}

마지막으로 링크 스타일을 지정합니다.

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

글꼴 크기: 90%;

디스플레이: 차단;

패딩: 0.4em 0 0.4em 0.5em;

테두리 왼쪽: 12px 단색 #711515;

테두리 오른쪽: 1px 실선 #711515;

배경색: #B51032;

색상: #FFFFFF;

텍스트 장식: 없음;

}

이제 대부분의 작업이 완료되었습니다. 우리가 확립한 CSS 규칙에는 왼쪽 및 오른쪽 테두리 추가, 밑줄 제거 등이 포함됩니다. 이 규칙의 첫 번째 속성 정의는 표시 속성을 block으로 설정합니다. 이렇게 하면 해당 링크가 블록 요소로 표시되므로 커서가 이러한 탐색 "버튼" 위로 지나갈 때 표시 효과와 이미지 사용이 가능해집니다. 내비게이션은 똑같습니다.