CSS3의 올바른 Breadcrumb 탐색 메뉴 코딩하기
탐색 메뉴와 링크는 웹 레이아웃에서 가장 중요한 인터페이스 요소 일 수 있습니다. 이들은 사용자가 사용할 수있는 유일한 아울렛입니다. 페이지 간 이동 생성 한 모든 콘텐츠와 상호 작용할 수 있습니다. Breadcrumb는 다음과 같은 이점을 추가하여 유사한 기능을 제공합니다. 현재 위치 추적. 너는 할 수있을거야. 이전 링크 경로 모두 표시 사용자가 사이트 계층 구조를 탐색 할 때.
이 튜토리얼에서는 CSS3 효과가있는 멋진 탐색 경로 탐색 메뉴를 만들 것입니다. 이것은 모든 주요 CSS3 호환 브라우저에서 작동하도록 테스트되었으며, CSS3를 지원하지 않는 구형 브라우저조차도 대부분의 경우 제대로 렌더링합니다.
코드로 들어가기 전에 우리는 이동 경로 (breadcrumb)의 기능, 점프 (jump)에서의 완전한 튜토리얼!
트레일 제공
이동 경로는 다른 메뉴보다 복잡하지 않습니다. 우리의 스타일은 대부분의 예제보다 훨씬 복잡한 CSS 속성을 사용하지만 아직 한 페이지에서 다른 페이지로 사용자를 안내하는 베어 본 템플릿이 있습니다..
이 예에서는 Google 지원 메뉴와 비슷한 스타일을 재현합니다. Gmail 지원 페이지에서 해당 메뉴를보고 어디로 가고 있는지 파악할 수 있습니다. 궁극적으로 우리는 모든 사용자에게 최상의 사용자 환경 제공, 운영 체제 또는 브라우저 소프트웨어와 상관없이 오래된 브라우저 간의 우아한 퇴화를 지원하는 2 가지 코드 예제.
첫 번째는 사용자 정의 배경 이미지 과 적절한 CSS 정렬. 호버 이벤트 및 활성 이벤트는 모두 몇 가지 CSS 스타일만으로 미리 빌드되지만 이미지가 꺼진 사용자는 이러한 효과를 경험할 수 없습니다! 그래서 CSS 그래디언트, 둥근 모서리 및 상자 그림자가있는 비슷한 모양의 메뉴를 만들었습니다..
두 스타일을 모두 지원하는 것에 신경 쓰면 자신의 사이트에서 선택할 수 있습니다. 대부분의 방문자는 기본적으로 이미지를 사용하지만보다 정확한 방문자 데이터를 원할 경우 웹 사이트 분석 도구를 파헤칩니다..
충분한 단어, 프로젝트에 뛰어 들자.! 먼저 기본 HTML 프레임 워크를 구성하고 다른 스타일 효과로 이동해 보겠습니다. 가장 먼저 이미지를 다운로드해야합니다. 프로젝트에 필요하다..
베어 본즈 HTML
내 문서를 시작할 때 표준 HTML5 페이지 템플릿. 여기에는 기본 doctype, 링크 된 CSS 및 모든 기본 요소가 포함됩니다. 이런 식으로 자신의 문서를 시작하려면 아래 코드를 추가하십시오. 탐색 경로가 표시되는 방식에는 영향을 미치지 않아야하므로 원하는 경우 자신의 페이지 템플릿을 자유롭게 사용할 수 있습니다..
기본 페이지
코드를 두 개의 다른 블록으로 분할합니다. 이미지가있는 첫 번째 블록은 이미지가없는 메뉴와 약간 다른 방식으로 만들어집니다. 각 세트에는 자체 세트가 제공됩니다. 신분증 그래서 우리는 내용을 훨씬 쉽게 식별 할 수 있습니다. jQuery 팬이라면 #ID selector 모든 내부 DOM 요소를 조작하는.
먼저 우리는 포함 div 이드와 함께 “빵 부스러기“. 데모 파일에서 필자는이 코드를 사용하여 코드를 분리하고 일부 여백을 추가하여 페이지 전체를 이동했습니다. 이 외부 div를 제거 할 수 있지만 새 템플릿에 맞게 모든 스타일을 다시 지정해야합니다. 위치를 훨씬 쉽게 제어 할 수 있기 때문에 컨테이너를 떠나지 않아도됩니다..
내부적으로는 순서가 지정되지 않은 목록을 사용하여 탐색 경로를 작성했습니다. 스타일이 지정된 HTML 목록을 사용자 정의하는 매우 독특한 방법이 있으며, 이동 경로는 그 중 하나 일뿐입니다. 초기 목록 항목을 수업 의 “먼저“. 메뉴 항목을 인라인으로 유지하기 위해 일부 추가 패딩이 필요합니다. 또한 작은 스팬 블록 배경 이미지와 겹치지 않는 적절한 왼쪽 테두리를 갖도록 추가되었습니다..
또한 각 앵커 링크는 Z- 색인 재산. 이미지를 사용하면 우리의 각 링크를 겹치게하십시오. 이동 경로 화살표를 올바르게 표시합니다. 이것을 달성하는 가장 쉬운 방법은 다음과 같습니다. Z- 색인 조정 각 링크는 다음 링크를 오버레이합니다. 나는 함께 시작했다. 9 그리고 거기에서 일했지만, 메뉴에 더 많은 링크가 있다면 더 높은 정수로 시작하면됩니다..
이미지가없는 메뉴
에 우리의 빵 부스러기를 우아하게 저하시킨다. HTML 목록 항목의 보조 세트가 필요합니다. 단일 탐색에서 폴백하려는 경우 jQuery를 사용하여 브라우저 에이전트를 감지하고 이에 따라 ID를 적용 할 수 있습니다. 유감 스럽지만 항상 신뢰할만한 것은 아닙니다 (예 : 특정 모바일 사용자의 경우). 또 다른 해결책은 IE 관련 스타일 시트 포함 과 가장 좋아하는 메뉴를 숨기거나 표시하십시오. - 물론이 옵션은 Internet Explorer 전용입니다..
빵 부스러기 2 새 ID는 이미지없이 메뉴를 타겟팅하는 데 사용됩니다. 이 패턴을 유지하면서 내가 사용 해왔다. 부스러기 2 순서가없는리스트의 클래스로서 지정합니다. 우리가 사용하는 이유는 수업 그것의 이 메뉴를 복제하는 단순함, 그래서 당신이 당신의 페이지에 몇 가지 다른 빵 부스러기를 원할 때,이 클래스들로 이것은 결코 문제가되지 않을 것입니다..
우리는 .먼저 클래스에 추가되었지만 추가되었습니다. .마지막클래스를 최종 목록 항목에 추가합니다. 이미지가 없으면 네비게이션 메뉴의 각 항목에 화살표를 복제 할 수 없으므로 일부를 사용했습니다. 둥근 모서리 보조 메뉴를 양념하다.. .먼저 클래스와 .마지막 정말 멋진 웹 2.0 스타일을 만들기 위해 메뉴 가장자리의 테두리 반경을 조작하십시오..
CSS 슬라이딩 배경 이미지
더 간단한 효과 중 일부는 속성을 만들 때 빵 부스러기를 함께 연결했습니다. 이것은 공간을 절약 할뿐만 아니라 스타일을 편집하기 위해 돌아갈 때 유용합니다. 사용자 정의하기 쉽다. 너 자신의 모습.
모두 #breadcrumb 과 # breadcrumb2 나는 설정했다. 목록 스타일 : 없음; 모든 내부 항목에는 마커가 없습니다. 효과를 원한다면이 두 가지를 남겨 둘 수 있지만, HTML이 작동하기가 번거롭고 새로운 아이콘을 만드는 것이 훨씬 쉽다는 것을 알게되었습니다. 이제부터는 .부스러기 수업.
.부스러기 표시 : 블록; .crumbs li display : 인라인; .crumbs li.first 패딩 왼쪽 : 8px; .crumbs li a, .crumbs li a : 링크, .crumbs li a : visited color : # 666; 디스플레이 : 블록; 왼쪽으로 뜨다; 글꼴 크기 : 12px; margin-left : -13px; 패딩 : 7px 17px 11px 25px; 위치 : 상대적; 텍스트 장식 : 없음; .crumbs li a background-image : url ( '... /img/bg-crumbs.png'); background-repeat : no-repeat; 배경 위치 : 100 % 0; 위치 : 상대적; .crumbs li a : 마우스 오버 (색상 : # 333; 배경 위치 : 100 % -48px; 커서 : 포인터; .crumbs li a : 활성 color : # 333; 배경 위치 : 100 % -96px; .crumbs li.first span (높이 : 29px; 너비 : 3px; 왼쪽 테두리 : 1 픽셀 단색 # d9d9d9; 위치 : 절대; 상단 : 0 픽셀; 왼쪽 : 0px;
우리 우리의 정렬되지 않은 목록을 블록 그래서 그 지역의 주위에 아무것도 움츠러 들지 않는다. 목록 항목은 다음과 같습니다. 인라인으로 표시 각 앵커 링크에는 더 많은 여지가 주어집니다. 메뉴의 모든 공간을 클릭 할 수 있기를 원합니다. 앵커를 블록 요소로 만들기.
나는 이미지를 사용했다. bg-crumbs.png 배경. 이것은 CSS에서 간단한 스프라이트 시트로 알려져 있습니다. 슬라이딩 도어 기술. 즉, 사용자가 링크를 클릭하거나 클릭 할 때 배경 위치를 변경하여 업데이트 된 스타일을 표시합니다. 이 단일 이미지에는 다양한 위치에 탐색 경로 배경을 만드는 데 필요한 3 가지 디자인이 모두 포함되어있어 배경 위치 사용자 상호 작용을 기반으로 재배치 할 속성.
CSS3를 이용한 커스텀 이펙트
원래의 빵 부스러기 디자인은 훨씬 간단하게 만들 수 있습니다. 이것은 많은 CSS 속성이 상상할 수있는 것보다 더 기본 적이기 때문에 눈에 띄기 쉽지만 이제는 CSS3만으로 이러한 효과를 복제하는 데 초점을 맞추기 시작합니다!
개별 스타일은 많은 공간을 차지하므로 2 개의 코드 블록으로 나누어 볼 것입니다..
.crumbs2 디스플레이 : 블록; margin-left : 27px; 패딩 : 0; 패딩 - 상단 : 10px; .crumbs2 li 디스플레이 : 인라인; .crumbs2 li a, .crumbs2 li a : link, .crumbs2 li a : visited color : # 666; 디스플레이 : 블록; 왼쪽으로 뜨다; 글꼴 크기 : 12px; 패딩 : 7px 16px 7px 19px; 위치 : 상대적; 텍스트 장식 : 없음; 테두리 : 1 픽셀 단색 # d9d9d9; border-right-width : 0px; .crumbs2 li background-image : -webkit-gradient (선형, 왼쪽 아래, 왼쪽 위, 컬러 스톱 (0.45, rgb (241,241,241)), 컬러 스톱 (0.73, rgb (245,245,245))); 배경 이미지 : -moz-linear-gradient (중앙 하단, rgb (241,241,241) 45 %, rgb (245,245,245) 73 %); / * Internet Explorer 5.5 - 7 * / 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 * / -ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius : 5px; -moz-border-radius-topleft : 5px; -webkit-border-top-left-radius : 5px; .crumbs2 li.last a border-right-width : 1px; border-bottom-right-radius : 5px; -moz-border-radius-bottomright : 5px; -webkit-border-bottom-right-radius : 5px;
그만큼 .부스러기 2 메뉴가 사용 중입니다. CSS 그래디언트 배경 효과를 복제합니다. 이러한 것들에 익숙하지 않다면 CSS3 그라디언트의 CSS Tricks 가이드를 적극적으로 권장합니다. CSS3 그라디언트를 사용하면 CSS3 그라데이션을 효율적으로 사용할 수 있습니다. Microsoft와 Opera 브라우저에는 몇 가지 속성이 추가되었지만 모든 경우에 완전히 지원되지는 않습니다. 여기 데모 코드에 포함시키지 않았지만 모든 옵션을 이해하는 것이 좋습니다..
-웹킷 그라디언트 과 -모즈 - 선형 - 그래디언트 대부분의 작업을 수행하는 핵심 솔루션입니다. 이전 버전의 Internet Explorer 용 레거시 코드가 포함되어 있지만 보장되지 않는다. 결국 우리는 항상 강력한 이미지 렌더링 기술을 사용하고 있습니다. 배경 속성 사이에 RGB 및 16 진수 색상 코드를 모두 설정했음을 유의하십시오. 한 가지 방법이나 다른 방법을 고수 할 수 있습니다..
그만큼 국경 반지름 코드는 보조 탐색 경로 탐색에만 적용됩니다. 이렇게하면 전체 breadcrumb 메뉴의 왼쪽 상단과 하단 오른쪽에 깔끔한 효과를줍니다. 막대가 페이지에서 거의 튀어 나오는 것처럼 보입니다. 스타일을 지원하는 브라우저에 대한 환상적인 효과가 있지만, 링크의 기본 상태 만 다루고 있습니다. 이제 위에 사용 된 이미지와 유사한 호버링 효과를 만들어 보겠습니다..
CSS3 테두리 및 그림자
사용자가 링크를 가리키면 몇 가지를 업데이트하고 싶습니다. 먼저 우리는 활성 요소의 상단과 하단에 테두리 색상을 어둡게합니다.. 마우스 오버 및 활성 상태 모두에서 이미지에서도 볼 수 있습니다..
.crumbs2 li a : 호버 (border-top-color : # c4c4c4; border-bottom-color : # c4c4c4; background-image : -webkit-gradient (선형, 왼쪽 아래, 왼쪽 위, 컬러 스톱 (0.45, rgb (241,241,241)), 컬러 스톱 (0.73, rgb (248,248,248))); 배경 이미지 : -moz-linear-gradient (중앙 하단, rgb (241,241,241) 45 %, rgb (248,248,248) 73 %); / * Internet Explorer 5.5 - 7 * / 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; color : # 333; -moz-box-shadow : 0px 2px 2px # e8e8e8; -webkit-box-shadow : 0px 2px 2px # e8e8e8; 상자 그림자 : 0px 2px 2px # e8e8e8; .crumbs2 li a : 액티브 border-top-color : # c4c4c4; border-bottom-color : # c4c4c4; background-image : -webkit-gradient (선형, 왼쪽 아래, 왼쪽 위, 컬러 스톱 (0.45, rgb (224,224,224)), 컬러 스톱 (0.73, rgb (235,235,235))); 배경 이미지 : -moz-linear-gradient (중앙 하단, rgb (224,224,224) 45 %, rgb (235,235,235) 73 %); / * Internet Explorer 5.5 - 7 * / 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8의 경우 / -ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; 상자 그림자 : -1px 1px 1px 0px #dadada 삽입; -webkit-box-shadow : -1px 1px 1px 0px #dadada 삽입; -moz-box-shadow : -1px 1px 1px 0px #dadada 삽입; color : # 333;
위에서 사용한 그라디언트 코드와 똑같은 그라디언트 코드를 사용하고 있지만 이번에는 RGB 값에 주목하면 색상이 많이 달라집니다. 각 상태는 텍스트 색상을 어둡게합니다. # 333, 다른 설명자가 사용자 명령에 맞게 약간 변경되었습니다..
마우스를 올리면 반짝이는 양각 효과 결합 된 어두워 진 테두리 페이지 팝업 스타일을 제공합니다. 클릭하고 누르고 있으면 활성 상태가되어 어두운 그라디언트 그라디언트. 이 효과는 버튼을 실제로 보이게합니다. “눌린” 페이지에서.
우리는 또한 상자 그림자 새로운 CSS3 사양의 속성. -웹킷, -모즈, 기본 스타일은 동일한 설정으로 사용됩니다. 마우스를 가져 가면 밝은 그림자 선택한 링크의 하단에서 나옵니다. 활성 상태 일 때 그림자는 위쪽, 오른쪽 및 아래쪽 테두리에 형성됩니다. 이 효과는 삽입하다 키워드는 각 box-shadow 속성 행의 끝에 추가됩니다. 다시 CSS Tricks는 CSS3에서 구문과 적절한 사용법에 대해 이야기하면서 박스 섀도우에 대한 멋진 기사를 가진 가장 친한 친구입니다..
보너스 : 더 많은 스타일
자습서 코드 외에도 추가 색상 이미지를 포함한 추가 배경 이미지를 포함 시켰습니다. 필자는 원래 배경에서 샘플을 추출하고 Adobe Photoshop을 사용하여 자신 만의 웹 사이트에 적용 할 수있는 몇 가지 변형을 만들었습니다..
이들 보너스 파일은 소스 파일에 포함되어 있습니다. 아래 섹션에서 .zip 아카이브 형식으로 다운로드 할 수 있습니다..
위의 이미지를 확인하여 내가 말하는 것에 대한 아이디어를 얻을 수 있습니다. 특정 색 구성표를 열어야하는 경우 Photoshop> 이미지> 조정> 색조 / 채도 자신의 템플릿과 일치하도록 색상 표를 수정하려면 색상 화 옵션을 확인하십시오. 색상이 전혀 변하지 않는 경우 색조 / 채도 창에서.
결론
이 튜토리얼에서는 최신 CSS3 기술에 익숙해 져 있어야합니다. 비슷한 방식으로 스타일이 지정된 2 개의 환상적인 탐색 경로 메뉴를 만들어 이전 브라우저에서 정상적으로 성능이 저하 될 수있는 방식으로 빌드했습니다. 또한 내 데모 코드와 함께 제공되는 보너스 이미지를 제공합니다..
우리가 여기서 만든 스타일이 특히 마음에 드십니까? 또는 자습서 코드 개선 방법에 대한 질문이나 아이디어가 있습니까? 아래의 토론 영역에서 의견을 나누고 소스 파일을 다운로드하여 데모를 재생할 수 있도록하십시오.!
더 많은 CSS3 자습서
더 많은 CSS3에 대한 갈망? 아래는 CSS3를 이론적으로 실제적으로 이해하는 데 도움이되는 기사입니다.!
- CSS3 : RSS 피드 로고 만들기
- CSS3 : 검색 필드 만들기
- CSS3 : AJAX 문의 양식 만들기
- CSS3 : HTML5 / CSS3 웹 페이지 제작
