단계별 가이드
네비게이션 메뉴가 상단의 수평 행이든 측면의 하단의 수직 행이든간에 여전히 목록입니다. 웹 네비게이션을 디자인 할 때, 네비게이션 메뉴가 영광스러운 링크 그룹 일뿐이라는 사실을 종종 잊기 쉽습니다. 그러나 XHTML + CSS를 사용하여 내비게이션을 프로그래밍하는 경우 다운로드 (XHTML)가 적고 쉽게 사용자 정의 할 수있는 메뉴 (CSS)를 만들 수 있습니다.
시작하기
탐색 목록을 디자인하려면 목록을 사용해야합니다.
탐색으로 식별 된 표준 정렬되지 않은 목록 일 수 있습니다.
HTML을 자세히 살펴보면 "홈"링크에도 사용자 ID가 있음을 알 수 있습니다. 이렇게하면 독자의 현재 위치를 식별하는 메뉴를 만들 수 있습니다. 지금 당장 귀하의 사이트에 그런 유형의 시각적 단서를 가질 계획이 없더라도 해당 정보를 포함시킬 수 있습니다. 나중에 큐를 추가하기로 결정하면 코딩 준비가 줄어들어 사이트를 준비 할 수 있습니다.
CSS 스타일링 이 없으면이 XHTML 메뉴는 표준 정렬되지 않은 목록처럼 보입니다. 글 머리 기호가 있고 목록 항목 이 약간 들여 쓰기되어 있습니다. 자리 표시 자 링크를 사용하기 때문에 대부분의 브라우저는 링크를 클릭 가능 (밑줄이 그어진 파란색)으로 표시하지 않습니다. 위의 HTML을 웹 페이지에 붙여 넣으면 네비게이션이 다음과 같이 보입니다.
- 집
- 제작품
- 서비스
- 연락처
이것은 꽤 지루하고 메뉴처럼 보이지 않습니다. 그러나 몇 가지 CSS 스타일을 목록에 추가하면 자랑스럽게 만드는 메뉴를 만들 수 있습니다.
세로 방향 탐색 메뉴
수직 탐색 메뉴는 정상 목록과 동일한 방식으로 표시되기 때문에 쓰기 쉽습니다 (위 / 아래).
목록 항목은 페이지 아래로 세로로 표시됩니다.
제가 메뉴를 스타일링 할 때, 나는 외부에서 시작하여 일하기를 좋아합니다. 이것은 ul # navigation을 먼저 스타일링 한 다음 li 요소로 이동 한 다음 링크 등으로 이동한다는 것을 의미합니다. 따라서이 메뉴의 경우, 먼저 메뉴의 너비를 정의합니다. 이렇게하면 메뉴 항목이 길더라도 나머지 레이아웃을 밀어 넣거나 가로 스크롤을하지 않게됩니다.
ul # navigation {width : 12em; }
너비가 설정되면 목록 항목으로 재생할 수 있습니다. 이렇게하면 (글 머리 기호를 없애기 위해) 배경색, 테두리, 텍스트 정렬 및 여백을 설정할 수 있습니다.
ul # navigation li {
목록 스타일 : 없음;
background-color : # 039;
border-top : 솔리드 1px # 039;
텍스트 정렬 : 왼쪽;
여백 : 0;
}
목록 항목의 기본 사항을 설정하면 메뉴가 링크 영역에서 어떻게 보이는지 재생할 수 있습니다. 먼저 UL # navigation LI A와 A : 링크, A : 방문, A : 호버, A : 활성 (원하는 경우) 스타일을 지정하십시오. 링크의 경우 링크를 기본 요소가 아닌 블록 요소로 만들고 싶습니다. 이것은 LI의 전체 공간을 차지하게하고 단락처럼 행동하게하여 메뉴 버튼으로 스타일을 쉽게합니다. 내가 항상하는 다른 하나는 밑줄 (텍스트 장식 : 없음;)을 제거하고, 이것은 버튼이 나에게 버튼처럼 보이게하기 때문에.
물론 디자인이 다를 수 있습니다.
ul # navigation li a {
디스플레이 : 블록;
텍스트 장식 : 없음;
패딩 : .25em;
테두리 아래 : 단색 1px # 39f;
국경 - 오른쪽 : 고체 1px # 39f;
}
display : block; 링크에 설정하면 메뉴 항목의 전체 상자가 문자 만이 아니라 클릭 할 수 있습니다. 이것은 유용성에도 좋습니다. 기본 파란색, 빨간색 및 자주색과 다르게 설정 하려면 링크 색상 (링크, 방문한 웹 페이지, 활성 웹 사이트 및 활성 사이트)을 설정해야합니다.
a : link, a : visited {color : #fff; }
a : hover, a : active {color : # 000; }
또한 hover 상태 에 배경색을 변경하여 좀 더주의를 기울이고 싶습니다.
a : hover {배경색 : #fff; }
수직 메뉴에 대한 추가 예제가 필요하면 아래 목록을 참조하십시오.
- 스타일이 적용된 세로 메뉴
- 기본 수직 메뉴 템플릿
- 당신이있는 스타일의 수직 메뉴
- 현재있는 기본 수직 메뉴 템플릿
수평 탐색 메뉴
HTML 네비게이션이 세로로 표시되기를 선호한다는 사실을 상쇄해야하기 때문에 가로 네비게이션 메뉴를 만드는 것이 수직 네비게이션 메뉴보다 약간 어렵습니다. 가로 메뉴와 마찬가지로 먼저 탐색 메뉴 목록을 만듭니다.
수평 메뉴를 만들려면 수직 메뉴에서했던 것과 똑같이하십시오. 바깥에서 시작하여 안으로 들어가야합니다. 내 탐색이 왼쪽 구석에서 시작되기를 원하기 때문에 왼쪽 여백과 안쪽 여백을 0으로 설정하고 왼쪽으로 이동합니다. 너는 너의 메뉴가 너가 예정하는 것보다 더 많거나 적은 공간을 차지하지 않도록 너비를 정하는 습관에 빠져 있어야한다. 가로 메뉴의 경우 일반적으로 디자인의 전체 너비입니다. 또한 전체 목록에 배경색 을 추가하여 읽기 쉽도록했습니다.
ul # navigation {
왼쪽으로 뜨다;
여백 : 0;
패딩 : 0;
너비 : 100 %;
background-color : # 039;
}
그러나 가로 방향 탐색 메뉴의 비결은 목록 항목에 있습니다. 목록 항목은 일반적으로 블록 요소이므로 각 요소 앞뒤에 개행 문자가 있습니다. 디스플레이를 블록에서 인라인으로 전환하면 목록 요소를 서로 옆에 나란히 놓아야합니다.
ul # navigation li {디스플레이 : 인라인; }
같은 색상과 텍스트 장식으로 세로 탐색 메뉴에서 링크를 처리 한 것과 똑같이 링크를 처리했습니다. 단추를 짚으려고 할 때 단추를 윤곽으로 그리기 위해 위쪽 테두리를 추가했습니다. 내가 제거한 유일한 것은 display : block이었습니다. newlines을 다시 넣고 수평 메뉴를 파괴합니다.
ul # navigation li a {
텍스트 장식 : 없음;
패딩 : .25em 1em;
테두리 아래 : 단색 1px # 39f;
border-top : 솔리드 1px # 39f;
국경 - 오른쪽 : 고체 1px # 39f;
}
a : link, a : visited {color : #fff; }
ul # navigation li a : 호버링 {
배경색 : #fff;
색상 : # 000;
}
너는 여기있는 위치 정보
HTML의 또 다른 측면은 youarehere 식별자입니다. 메뉴를 수정하여 사용자의 현재 위치를 나타내려면이 ID를 사용하여 다른 배경색이나 다른 스타일을 정의하기 만하면됩니다. ID 속성을 다른 페이지의 올바른 메뉴 항목으로 이동하면 현재 페이지가 항상 강조 표시됩니다.
ul # navigation li # youarehere a {background-color : # 09f; }
이러한 스타일을 페이지에 넣으면 사이트와 함께 작동하지만 다운로드가 빠르며 나중에 쉽게 업데이트 할 수있는 가로 또는 세로 메뉴 모음을 만들 수 있습니다. XHTML + CSS를 사용하면 목록을 디자인을위한 매우 강력한 도구로 활용할 수 있습니다.
수평 메뉴에 대한 추가 예제가 필요하면 다음을 참조하십시오.
- 스타일 수평 메뉴
- 기본 수평 메뉴 템플릿
- 너와 함께하는 스타일의 수평 메뉴가 여기있다.
- 현재있는 기본 수평 메뉴 템플릿