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