소개: 이 기사에서는 아이디어, 원리, 단계 및 방법을 통해 매우 멋진 3층 분리 표준 슬라이딩 도어 탐색 메뉴를 만드는 방법을 단계별로 설명합니다. 나는 당신이 이 기사를 읽은 후에 자신만의 매우 아름다운 표준 탐색 메뉴를 만들 수 있을 것이라고 믿습니다. 이 메뉴는 중복된 구조가 없으며 동적 데이터 출력에 도움이 되며 일반 프로젝트에 사용하기에 매우 적합합니다. 이 튜토리얼은 미닫이문의 기본 원리에 대해 이야기합니다. 아직 이 길을 헤매고 있는 친구들에게 도움이 될 것이라고 믿습니다! 물론, 오류나 문제가 있으면 토론해 주시기 바랍니다.
이 탐색 메뉴의 이상적인 목표는
이 이상적인 메뉴를 차근차근 구현해보자!
포럼에서 친구들이 메뉴를 만드는 모습을 자주 보는데, 솔직히 구조가 중복되거나, 형태는 있으나 정신이 없거나, 정신은 있으나 겉모습은 없습니다. 그리고 지금 우리가 만들고 싶은 것은 최고의 메뉴이다. 초보자이든 베테랑이든 관계없이 이 튜토리얼에서 유용한 내용을 찾을 수 있습니다.
이상적인 메뉴의 구조는 깔끔하고, 중복되지 않고, 분리되어야 하지만, 여러 가지 이유로 무의미한 것들이 많이 추가되고, 결국 '클린'과는 점점 멀어지게 됩니다. . 따라서 메뉴를 만들기 전, 생산 과정 전반에 걸쳐 지켜야 할 몇 가지 원칙이 있으며, 외부의 힘에 의해 방해받아서는 안 됩니다.
구조:
내 생각에 이상적인 표준 메뉴는 다음과 같은 구조를 가져야 한다고 생각합니다:
이제 메뉴의 원래 구조를 사용할 수 있습니다. 각 태그에는 고유한 의미가 없습니다. 브라우저에서 살펴보겠습니다. 아, 정말 간단합니다. 음, 레스토랑에서 음식을 주문할 때 사용하는 메뉴와 비슷합니다. 각 메뉴 앞에 뭔가가 있습니다. . 작은 점! 맙소사, 우리의 아름다운 메뉴와는 너무 거리가 멀군요!
스타일:
이제 뼈대일 뿐입니다. 조금 아름답게 하고 간단한 스타일을 추가해 보겠습니다. 최소한 작은 점들을 제거하고 가로로 배열해야 합니다.
좋아요, 스타일을 추가해 보겠습니다!
자, 이제 보세요. 우리의 작은 목표를 달성했습니다.
이제 뼈대가 마련되었으므로 다음 단계는 각 메뉴 항목에 아름다운 옷을 입히는 것입니다.
첫 번째 요구 사항을 충족하려면 먼저 아름다운 버튼이 있어야 하고 직접 그려야 합니다. 아, 저는 예술가가 아니기 때문에 어렵습니다! 하지만 너무 조급해하지 마세요. 인터넷이 너무 넓어서 이미 누군가가 좋은 일을 했을 수도 있습니다. 감사합니다. (눈물이 나네요...) 버튼 소스코드 : http://bbs.blueidea.com/thread-2860891-1-1.html
디자인된 버튼 소스코드로 디자인 부분을 절약해 주니 정말 좋습니다. 하지만 3가지 상태 버튼으로 만들려면 이 버튼을 수정해야 합니다. 일곱 번째 목표를 보셨나요? 적응형 버튼을 만들 예정이므로 이 버튼에 대해 몇 가지 처리를 해야 합니다.
이 세 개의 버튼은 마우스가 멀어질 때, 클릭한 후, 마우스가 위로 움직일 때의 세 가지 상태로 표시됩니다. 슬라이딩 도어 메뉴를 만들려면 왼쪽 그림에서 버튼을 잘라야 합니다. 왼쪽에 배치하고, 오른쪽 사진은 오른쪽에 배치합니다. 텍스트 길이에 맞게 조정하려면 이 레이어의 너비를 약간 늘려야 합니다. 그러나 이 이미지는 매우 복잡한 그림자 효과를 가지며 자연스럽게 늘릴 수 없습니다. 그렇지 않으면 효과가 동일하지 않습니다. 가운데 부분을 잘라서 열고, 오른쪽 사진의 왼쪽 부분을 앞으로 늘려보겠습니다. 그림 2와 같이
그림 1
먼저 그림과 같이 6개의 조각으로 자른 다음 이 6개의 그림을 하나로 합칩니다. 왜 그럴까요? CSS 스프라이트의 원리를 살펴보세요! 여기서는 자세한 내용을 다루지 않겠습니다. "포커 카드 시리즈 만들기 1---CSS 스프라이트 이미지 배경 최적화 기술"이라는 다른 기사를 읽어보세요.
그림 2
위 그림에서 첫 번째와 두 번째 그림은 일반 메뉴 스타일(기본 스타일)을 형성하고, 세 번째와 네 번째 그림은 스크롤 스타일을 형성하고, 다섯 번째와 여섯 번째 그림은 클릭된 메뉴 항목 스타일을 형성합니다.
그림자 이미지를 구체적으로 추출하여 작은 배경 이미지로 만들었습니다.
그림 3
에 필요한 그래픽이
모두 준비되었습니다. 다음으로 이 이미지를 메뉴 항목에 추가해 보겠습니다.버튼을 표시하려면 두 개의 이미지가 필요합니다. 지구상의 모든 사람들은 html 태그가 하나의 사진만 담을 수 있다는 것을 알고 있습니다. (태그에 두 장의 사진이 담길 수 있는 것을 발견하면 시간 내에 알려주시면 저녁을 대접하겠습니다!) 오! 내 메뉴 구조의 각 항목에는 정확히 두 개의 태그가 있습니다. 하나는 li이고 그 안에는 왼쪽 및 오른쪽 그림을 보관하는 데 사용할 수 있는 A 태그가 있습니다. Li는 왼쪽 그림을 잡는 데 사용되고 A는 오른쪽 그림을 잡는 데 사용됩니다. 제 자신이 정말 존경스럽고, 이런 좋은 아이디어도 떠오르고, 방종에 빠져 있습니다...
바쁘지 마세요, 맙소사, 이런 식으로 사진을 설치한다면, 어떻게 이룰 수 있겠습니까? 세 가지 마우스 스크롤 상태? 우리 모두는 빌어먹을 IE6을 제외하고 다른 브라우저가 현재 li:hover 의사 클래스를 지원한다는 것을 알아야 합니다. 그러나 모든 주요 브라우저와 호환되기 위해서는(이것이 우리의 8번째 목표입니다. 잊지 마세요!) 이 방법은 작동하지 않습니다. IE6은 A 태그에만 hover 의사 클래스를 적용할 수 있으며 다른 태그는 무시합니다!
IE6에서는 A 태그에만 hover 의사 클래스를 적용할 수 있으므로 적응형 슬라이딩 도어 메뉴를 만들려면 A 태그에 다른 태그만 추가하면 되는 것 같습니다. 메뉴의 구조는 다음과 같습니다. (참고: 여기서 구조가 바뀌기 시작합니다. 항상 이런 일이 발생하지 않도록 하고 싶었지만 요구 사항을 충족하려면 이 태그를 추가해야 할 것 같습니다.)
텍스트 콘텐츠가 포함된 A 태그에 범위 컨테이너를 추가했습니다. 이제 두 개의 사진을 담을 수 있는 두 개의 레이블이 있습니다. A 태그의 배경에 오른쪽 이미지를 배치하여 오른쪽으로 정렬하고, 왼쪽 이미지를 SPAN 태그에 배치하여 왼쪽으로 정렬합니다. 그러면 완전한 버튼 모양이 표시됩니다.
다행스럽게도 별도의 태그가 추가되더라도 완전히 의미 없는 것은 아닙니다.
자, 준비가 거의 완료되었습니다. 이제 메뉴에 새 옷을 입힐 시간입니다.
적응형 너비가 있는 메뉴를 만들려면 메뉴의 너비 값을 설정할 수 없으므로 고정 너비의 가로 메뉴를 만들 때 일반적으로 하는 것처럼 너비를 설정한 다음 왼쪽으로 부동시킬 수 없습니다. 이 경우 각 메뉴 항목의 너비가 다를 경우 각 항목의 너비를 별도로 정의해야 하며, 각 메뉴 항목에 대해 ID 또는 CLASS를 정의해야 하며 이 방법은 동적 루프에 도움이 되지 않습니다. 백그라운드 프로그램의 출력.
우리에게 필요한 것은 인라인 요소처럼 각 메뉴 항목을 왼쪽에서 오른쪽으로 자동으로 정렬하는 것입니다. 그런 다음 메뉴를 인라인으로 표시해야 합니다. 이것은 매우 유용한 속성입니다. 기본 요구 사항을 충족할 수 있습니다. 라벨 요소를 왼쪽에서 오른쪽으로 자동 정렬하며 각 항목의 너비는 다를 수 있습니다.
위의 속성을 사용하여 실제로 우리의 요구 사항을 충족할 수 있다면 다음과 같은 텍스트 콘텐츠는 없을 것입니다.
이 속성은 우리 프로젝트의 기본 요구 사항을 충족할 수 있지만 너비와 높이 값을 설정할 수 없다는 매우 치명적인 약점이 있습니다. 믿을 수 없다면 시도해 볼 수 있습니다. 텍스트의 기본 높이와 너비로만 나타납니다. 이 너비와 높이 값을 초과하면 자동으로 숨겨집니다. 이런 식으로 여기에 배경 이미지가 있습니다. 이 이미지의 효과를 표시하려면 너비와 높이를 지정해야 합니다. 이는 우리가 효과를 달성할 수 없다는 것을 의미하며 이는 실망스럽습니다! 다행히도 또 다른 속성이 있습니다. 바로 그 성능이 우리에게 필요한 것입니다.
하지만... 이 속성에도 치명적인 약점이 있는데, FF3와 같은 고급 브라우저에서만 인식할 수 있다는 것입니다. 다른 브라우저는 우회만 할 수 있습니다. 어-오! 그러므로 브라우저 표준을 통일하는 것이 얼마나 중요한가! HACK도 우리가 할 수 밖에 없는 안도감의 방법인 것 같습니다.
다행히도 일부 전문가들은 이미 해결책을 찾았습니다. 먼저 이 두 글을 읽어보시기 바랍니다.
관련 튜토리얼:
" 디스플레이 적용의 두 가지 예:inline-block " (Qin Ge)
" 호환성 시뮬레이션을 위한 인라인 블록 속성 "(Yi Fei)
의 원리를 이해하고 있습니다
. 위의 두 기사에서 제공된 기술을 기반으로 적응형 메뉴를 만들 수 있습니다.먼저 li 요소의 하위 노드 A 태그에 적용되는 오른쪽 이미지의 스타일을 작성해 보겠습니다.
먼저 display:inline-block을 설정한 다음 패딩을 사용하여 측면 거리를 확장합니다. 이미지를 채울 공간을 주세요. 여기의 이미지 경로는 사용자 고유의 경로로 대체됩니다. 그런 다음 밑줄 제거, 글꼴 색상, 글꼴 크기 등과 같은 다른 스타일을 설정합니다. 이미지가 오른쪽으로 정렬되도록 설정합니다.
버튼 왼쪽의 이미지는 해당 이미지를 왼쪽으로 정렬하고 패딩을 설정합니다. 너비와 높이를 엽니다.
그런 다음 다시 인라인 인라인 모드로 설정하여 IE의 haslayout 기능을 트리거합니다.
위 코드에서는 IE 및 FF와 같은 브라우저의 다양한 효과를 해결하는 데 사용되는 HACK 애플리케이션 *padding-bottom: 0; 및 *padding-top: 0;도 볼 수 있습니다. 제 말을 믿을 수 없다면, 삭제하여 어떤 효과가 나타나는지 확인해 보세요. IE에서 높이 확장에 문제가 있습니다.
자, 이제 마우스를 위로 이동할 때의 효과를 작성할 차례입니다.
다음은 마우스 클릭 후의 효과입니다.
네, 다른 브라우저에서 확인하신 것 같습니다. , 만족스러운 결과를 얻을 수 있을 것 같습니다. 아래는 스크린샷입니다:
그림 4
미닫이문 메뉴의 순수 CSS 버전은 기본적으로 준비되어 있습니다.