상위 블록의 전체 너비에 걸쳐 확장된 훌륭한 메뉴를 얻었습니다! 마우스를 올려도 항목이 서로 겹치지 않으며 레이아웃이 점프하지 않습니다.
컨테이너가 페이지에서 사용 가능한 전체 너비를 차지하는 경우 사이트 메뉴의 매우 일반적인 레이아웃입니다. 이 경우 첫 번째 항목은 왼쪽 가장자리에 인접하고 마지막 항목은 오른쪽에 인접하며 모든 요소 사이의 거리는 동일합니다. 오늘 우리는 이것이 어떻게 이루어지는 지 알려 드리겠습니다.
다음과 같은 경우 고무 메뉴를 구현하는 예를 제공합니다. CSS 도움말당신의 자원을 위해. 이 메뉴에서는 항목이 한 줄에 위치합니다. 자바스크립트는 사용되지 않습니다. 메뉴의 내용은 일반 목록에 포함됩니다. 이러한 메뉴의 주요 특징은 다양성이며 항목의 수와 길이가 모두 가능하다는 사실로 표현됩니다.
이것을 구현하는 방법은 무엇입니까?
각 프로그래머는 주어진 문제를 해결하는 자신만의 방법을 제시할 수 있습니다. 그것은 모두 그의 상상력, 전문성 수준 및 능력에 달려 있습니다. 이 문제에 대한 가장 일반적인 해결책은 테이블을 사용하는 것입니다. 또한 많은 사람들이 자바스크립트를 사용하는 것을 제안합니다. 값 테이블이나 테이블 셀과 함께 표시 속성을 사용하도록 제안하는 사람들을 서둘러 실망시킵니다. 이 방법은 브라우저 간 호환이 충분하지 않습니다.
우리의 솔루션
우리의 서비스는 HTML5 및 CSS3 지식의 탄탄한 기반 위에 구축될 것입니다.
프로세스의 본질은 양쪽 맞춤 값이 있는 텍스트 정렬 속성을 기반으로 합니다. 잊어버린 분들을 위해 상기시켜 드립니다. 이 속성은 컨테이너의 전체 너비에 걸쳐 텍스트 정렬 방향을 지정합니다.
우리 솔루션을 사용할 때 두 가지 필수 규칙을 준수해야 합니다. 첫 번째는 메뉴 항목 컨테이너의 너비가 텍스트보다 작아야 한다는 것입니다. 즉, 한 줄이 아닙니다. 두 번째 중요한 규칙은 단어가 같은 지점에 속하는지 여부에 관계없이 동일하게 늘어납니다.
다음은 고무 메뉴를 생성하는 예제로 사용되는 코드입니다.
HTML
<
ul>
<
li><
a href=
"#"
>집<
li><
a href=
"#"
>블로그<
li><
a href=
"#"
>소식<
li><
a href=
"#"
>인기 있는<
li><
a href=
"#"
>새 항목
ul ( text- align: justify; Overflow: Hidden; /* 메서드의 부작용을 제거합니다 */ height: 20px; /* 불필요한 부분도 제거합니다 */cursor: default ; /* 커서의 초기 모양을 설정합니다 */ margin : 50px 100px 0 100px; background: #eee; padding: 5px; ) li ( display: inline; /* 메뉴 항목 텍스트 만들기 */ ) li a ( display: inline- block; /* 메뉴에서 단어 구분선 제거 */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* 메서드를 실행하기 위한 두 번째 줄 형성 */ content: "1" ; margin- left: 100 %; height: 1px; 오버플로: 숨김; 표시: 인라인- 블록;
이전 Internet Explorer에서 작업하려면 CSS에 다음 코드를 추가로 추가해야 합니다.
ul ( z- 인덱스: 표현식(runtimeStyle.zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "<
li class
=
"last"
>")); ) ul .last ( margin-left: 100%; ) * html ul ( /* ie6만 필요 */ height: 30px; )
필요한 속성 값과 코드를 지정하면 다음과 같은 고무 메뉴가 나타납니다.
방법의 단점
볼륨 코드
클래스 선택기를 통해 요소의 활성 상태를 확인할 수 없습니다. 이는 단락의 단어 중단(있는 경우)으로 인해 발생합니다. 이 문제에 대한 해결책은 목록 요소 내에 다른 컨테이너를 추가하는 것입니다.
드롭다운 메뉴의 경우 Overflow 의 부정적인 영향으로 인해 코드를 맞춤설정해야 합니다.
어떤 브라우저에서 작동하나요?
6.0+
6.0+
10.5+
5.0+
3.6+
-
-
드롭다운 메뉴에 대한 강의를 통해 시리즈를 계속하겠습니다. 다음은 CSS를 사용한 DIY 수평 드롭다운 메뉴입니다.
우연히 여기에 왔거나 드롭다운 메뉴의 다른 구현을 찾고 있다면 상위 섹션으로 이동하는 것이 좋습니다.
이 섹션에서는 CSS 및 HTML의 가로 드롭다운 메뉴에 대해 설명합니다.
페이지 탐색:
그래서, 우리의 임무:
드롭다운으로 가로 메뉴 만들기 CSS 목록(ul li 목록에서) jQuery 및 Javascript를 사용하지 않고 테이블도 사용하지 않고
코드에서.드롭다운 가로 메뉴 HTML
우선, 코드 작성을 시작하기 전에 메뉴에 대한 HTML 템플릿을 만들어야 합니다.
유니버셜 메뉴를 제작하고 있기 때문에 출력물과 최대한 비슷하게 만들고 싶습니다. 워드프레스 메뉴. 제 생각에는 이것은 가장 간단하고 범용 HTML메뉴 코드. 다음과 같습니다:
집
회사 소개
우리의 서비스
우리의 서비스 No. 1
우리의 서비스 No. 2
우리의 서비스 No.3
우리의 서비스 No.4
서비스 5
소식
콘택트 렌즈
코드에서 볼 수 있듯이 드롭다운 메뉴는 ul 및 li 목록에 구현됩니다. CSS 스타일이 없는 메뉴는 다음과 같습니다.
솔직히 말하면, 일반 목록처럼 보기 흉해 보입니다. 다음으로 CSS 스타일을 사용하여 이 메뉴를 장식해야 합니다.
CSS의 가로 드롭다운 메뉴
드롭다운 메뉴 등을 위한 CSS 스타일은 공기만큼 필요합니다. 결국 드롭다운 탭은 pseudo-class:hover를 기반으로 만들어졌습니다.
수평 드롭다운 메뉴의 경우 다음 스타일이 필요합니다.
#menu1( 위치:상대; 디스플레이:블록; 너비:100%; 높이:자동; z-색인:10; ) #menu1 ul( 위치:상대; 디스플레이:블록; 여백:0px; 패딩:0px; 너비:100 %; 높이:자동; 목록 스타일:없음; 배경:#F3A601; ) #menu1 > ul::after( 디스플레이:블록; 너비:100%; 높이:0px; 클리어:모두; 콘텐츠:" "; ) menu1 ul li( 위치:상대; 디스플레이:블록; 부동:왼쪽; 너비:자동; 높이:자동; ) #menu1 ul li a( 디스플레이:블록; 패딩:9px 25px 0px 25px; 글꼴 크기:14px; 글꼴- family:Arial, sans-serif; line-height:1.3em; 글꼴 무게:uppercase; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )
이것은 아직 끝이 아니며 기본 가로 메뉴에 대한 CSS의 일부일 뿐입니다. 다음으로 메뉴 드롭다운 목록의 스타일을 작성하겠습니다.
#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*이 줄은 다음을 구현합니다. 드롭아웃 메커니즘*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; 너비: 100%; 상자 크기: 테두리 상자; 테두리 상단: 1px 솔리드 #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover ( 배경:#FDDC96;색상:#6572BC)
이제 그게 다입니다. 드롭아웃 메커니즘 자체는 한 줄로 구현됩니다.
이 메뉴로 스킨을 확인하세요.
쌀. 2(가로 드롭다운 메뉴)
아래는 드롭다운 메뉴 작동에 대한 데모와 소스를 다운로드할 수 있는 링크입니다. (데모는 이 페이지 상단의 드롭다운으로 열리므로 새 창에서 열기를 클릭하거나 마우스 휠을 클릭할 필요가 없습니다.)
전체 너비 가로 드롭다운 메뉴
위에서 보여드린 메뉴들은 과거의 신호이고 부분적으로는 당신 말이 맞다고 비난하실 수도 있습니다. 비록 최근에 그러한 메뉴가 있는 레이아웃을 본 적이 있지만 말입니다.
위의 예제를 다운로드하셨기를 바랍니다. HTML은 동일하게 유지되지만 CSS는 완전히 변경됩니다. 여기에서 CSS 코드를 가져와 다운로드한 예제에 붙여넣거나 데모 모드에서 작동 방식을 볼 수 있습니다.
#container( 너비:1000px; 높이:자동; 여백:0px 자동; 패딩 상단:10px; ) #menu1( 위치:상대; 디스플레이:블록; 너비:100%; 높이:자동; z-index:10; ) #menu1 ul( 위치:상대; 디스플레이:블록; 여백:0px; 패딩:0px; 너비:100%; 높이:자동; 목록 스타일:없음; 배경:#F3A601; ) #menu1 > ul( 텍스트 정렬: 정당화; 글꼴 크기:1px; 줄 높이:1px; ) #menu1 > ul::after( 디스플레이:inline-block; 너비:100%; 높이:0px; 내용:" "; ) #menu1 ul li( 위치 :relative; 디스플레이:인라인 블록; 너비:자동; 수직 정렬:왼쪽) #menu1 ul li a( 디스플레이:블록; 패딩:9px 35px; 글꼴 크기:14px; 글꼴 계열:sans-serif 높이:1.3em; 글꼴 무게:대문자; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( 배경:#EBBD5B; 색상:#2B45E0; ) #menu1 ul li ul(위치:절대; 상단:36px; 왼쪽:0px;
디스플레이:없음;
매우 긴 메뉴 항목의 경우 이 옵션은 제한을 초과하므로 매우 편리하지 않을 수 있습니다. 이 속성을 비활성화하려면 "white-space:nowrap;" 속성을 찾으세요. 선택기 #menu1 ul li ul에서 삭제합니다.
아래에서 데모를 보거나 수평 드롭다운 메뉴의 소스를 다운로드할 수 있습니다.
구분 기호가 없으면 이 메뉴는 그렇게 보입니다. 구분 기호는 HTML에 수동으로 추가할 수 있지만 WordPress와 같은 CMS가 있는 경우 수동으로 추가하는 것은 그리 편리하지 않습니다.
구분선이 있는 가로 드롭다운 메뉴
순수 CSS를 사용하여 메뉴 항목 사이에 스트라이프(구분 기호)를 추가하는 데는 수십 가지 옵션이 있습니다. 나는::before 또는::after 또는 훨씬 더 간단한 border-left, border-right를 사용하는 옵션을 복제하지 않을 것입니다.
레이아웃이 너무 훌륭하게 구축되어 jquery 없이는 할 수 없는 상황이 있습니다.
HTML 코드는 동일하게 유지되며, 맨 처음에 jQuery 라이브러리와 이를 사용하는 파일만 포함합니다.
직후.
아시다시피 파일을 만들어야합니다 스크립트 메뉴-3.js거기에 다음 작은 코드를 추가하세요.
$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
이러한 메뉴의 CSS 스타일은 그대로 두어야 하며 + 다음 부분을 끝에 추가하세요.
#menu1 ul li.razd( 높이:28px; 너비:1px; 배경:#ffffff; margin-top:4px; )
마우스 오버 시 다중 레벨 드롭다운 메뉴에 대해 이야기하고 있으므로 하위 그룹으로 나누는 것이 좋습니다.
측면을 가리킬 때 vip 패드로
세 번째 수준의 팝업 드롭다운 포함
내 예에서 보여 드리겠습니다. 다단계 메뉴 CSS 3단계라면 뭘 해야 할지 짐작하기 어렵지 않을 것 같아요.
마우스를 올리면 사이드바가 있는 다단계 드롭다운 메뉴
먼저 HTML을 약간 수정해야 합니다. 레벨 3에는 다음과 같은 두 줄이 추가됩니다.
집
회사 소개
우리의 서비스
우리의 서비스 No. 1
서비스 1에 추가
서비스 2에 추가
우리의 서비스 No. 2
서비스 3에 추가
서비스 4에 추가
우리의 서비스 No.3
우리의 서비스 No.4
서비스 5
소식
콘택트 렌즈
길찾기 지도
지도 부가 기능
지도 2에 대한 추가
피드백 양식
#container( 너비:1000px; 높이:자동; 여백:0px 자동; 패딩 상단:10px; ) #menu1( 위치:상대; 디스플레이:블록; 너비:100%; 높이:자동; z-index:10; ) #menu1 ul( 위치:상대; 디스플레이:블록; 여백:0px; 패딩:0px; 너비:100%; 높이:자동; 목록 스타일:없음; 배경:#F3A601; ) #menu1 > ul( 텍스트 정렬: 정당화; 글꼴 크기:1px; 줄 높이:1px; ) #menu1 > ul::after( 디스플레이:inline-block; 너비:100%; 높이:0px; 내용:" "; ) #menu1 ul li( 위치 :relative; 디스플레이:인라인 블록; 높이:자동; 텍스트 정렬:왼쪽; 여백:4px; -family:Arial, sans-serif; line-height:1.3 em; text-transform:uppercase; #menu1 ul li > a:hover ( 배경:#EBBD5B;
색상:#2B45E0;
) #menu1 ul li ul( 위치:절대; 상단:36px; 왼쪽:0px; 디스플레이:없음; 너비:자동; 배경:#EBBD5B; 공백:nowrap; ) #menu1 > ul > li:last-child > ul(/*마지막 항목은 오른쪽 가장자리에 연결됩니다*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*이 줄은 드롭아웃 메커니즘을 구현합니다* / #menu1 ul li ul li( 디스플레이:블록; 너비:자동; ) #menu1 ul li ul li a( 디스플레이:블록; 텍스트 변환: 없음; 높이:자동; 패딩:7px 45px; 너비:100%; 상자 -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( 배경:#FDDC96; 색상:#6572BC; ) #menu1 ul li ul li ul( 상단:0px; 왼쪽:100%; 디스플레이: 없음; 배경:#fddc96; ) #menu1 > ul > li:마지막 자식 > ul ul(왼쪽:자동; 오른쪽:100%;) #menu1 ul li ul li ul a(color:#F38A01;) 이전 예제와 마찬가지로 jQuery용 파일을 복사합니다. 메뉴가 조금 더 보기 좋게 보이도록 칸막이를 남겨두기로 했습니다. 물론 그것들 없이도 할 수 있습니다.
일어난 일은 다음과 같습니다.
오른쪽과 가운데에 물방울이 어떻게 보이는지 보여주기 위해 하나의 스킨을 2개 만들었습니다.
아래에서 데모를 시청하고 예제를 다운로드할 수 있습니다.
마우스 오버 시 팝업 패드가 있는 다단계 드롭다운 메뉴
HTML 코드는 변경하지 않겠습니다. 이전 예에서 따올 수 있습니다. jQuery에도 구분 기호를 남겨둡니다.
CSS만 완전히 변경됩니다.
#container( 너비:1000px; 높이:자동; 여백:0px 자동; 패딩 상단:10px; ) #menu1( 위치:상대; 디스플레이:블록; 너비:100%; 높이:자동; z-index:10; ) #menu1 ul( 위치:상대; 디스플레이:블록; 여백:0px; 패딩:0px; 너비:100%; 높이:자동; 목록 스타일:없음; 배경:#F3A601; ) #menu1 > ul( 텍스트 정렬: 정당화; 글꼴 크기:1px; 줄 높이:1px; ) #menu1 > ul::after( 디스플레이:inline-block; 너비:100%; 높이:0px; 내용:" "; ) #menu1 ul li( 위치 :relative; 디스플레이:인라인 블록; 높이:자동; 텍스트 정렬:왼쪽) #menu1 > ul > li(위치:정적;) #menu1 ul li.razd :28px 배경:#ffffff; -top:4px; ) #menu1 ul li a( 디스플레이:블록; 패딩:9px 45px 0px 45px; 글꼴 계열:Arial, sans- serif; 색상:#ffffef; 텍스트 장식:없음; 텍스트 변환:대문자; 상자 크기:테두리 상자; a:hover, #menu1 ul li:hover > a( 배경:#EBBD5B;
색상:#2B45E0;
) #menu1 ul li ul( 위치:절대; 상단:36px; 왼쪽:0px; 디스플레이:없음; 너비:100%; 배경:#EBBD5B; ) #menu1 > ul > li > ul::after(clear:both; float:none; width:100%; height:0px; content:" " ) #menu1 ul li:hover > ul(display:block;)/*이 줄은 드롭아웃 메커니즘을 구현합니다*/ #menu1 ul li li( display : 블록; 너비:30%; 부동:왼쪽; ) #menu1 ul li ul li a( 디스플레이:블록; 텍스트 변환: 없음; 높이: 자동; 패딩:7px 45px; 너비:100%; 상자 크기: 테두리 - box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color :#6572BC; ) #menu1 ul li ul li ul( 상단:0px; 왼쪽:100%; 디스플레이: 없음; 배경:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(디스플레이: 블록 ; float:none; 너비:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )
메뉴는 다음과 같습니다. 유일한 요점은 오른쪽의 마지막 항목에 드롭다운을 위한 공간이 없기 때문에 사이트에 충분한 공간이 있어야 한다는 것입니다. 이 문제는 nth-child를 사용하여 해결할 수 있지만 저는 개의치 않았습니다.
그게 전부입니다. 제 예 중 적어도 하나가 귀하에게 적합하기를 바랍니다. 관심을 가져주셔서 감사합니다.
그것은 그들과 나 모두에게 도움이 될 것입니다 :)
전체 게시물을 읽었지만 CSS에서 수평 드롭다운 메뉴를 만드는 방법을 찾지 못했다면 댓글로 질문하거나 사이트 검색을 이용하세요.
또한 상위 페이지 https://site/vypadayushhee-menu/를 방문하는 것이 좋습니다. 드롭다운 메뉴의 모든 예와 유형이 여기에 수집되어 있습니다.
가로 메뉴는 웹사이트 섹션의 목록이므로 요소 내부에 배치하는 것이 더 논리적입니다.
를 클릭한 다음 해당 요소에 CSS 스타일을 적용합니다. 이 메뉴 레이아웃은 웹 페이지에서의 위치 지정에 있어 분명한 이점이 있기 때문에 가장 일반적입니다.가로 메뉴 만드는 방법: 레이아웃 및 디자인 예 가로 메뉴의 HTML 마크업 및 기본 스타일
기본적으로 모든 목록 요소는 수직으로 정렬되어 컨테이너 요소의 전체 너비를 차지하고 컨테이너 요소의 전체 너비를 차지합니다.
태그 내부에 있는 가로 메뉴는 ... 및/또는 ... 요소 내부에 추가로 배치될 수 있습니다. 이 html 마크업 덕분에 의미론적 의미가 부여되고, 추가 기회메뉴 블록의 형식을 지정합니다.
수평으로 배치하는 방법에는 여러 가지가 있습니다. 먼저 탐색 요소의 기본 브라우저 스타일을 재설정해야 합니다.
Ul ( 목록 스타일: 없음; /*목록 마커 제거*/ margin: 0; /*1em과 동일한 상단 및 하단 여백 제거*/ padding-left: 0; /*40px과 동일한 왼쪽 패딩 제거*/ ) a ( text-꾸밈: 없음; /*링크 텍스트 밑줄 제거*/)
방법 1. li(디스플레이: 인라인;)
목록 요소를 소문자로 만듭니다. 결과적으로 수평으로 위치하게 됩니다. 오른쪽그 사이에 0.4em의 간격이 추가됩니다(글꼴 크기를 기준으로 계산). 이를 제거하려면 li li (margin-right: -4px;) 에 음수 오른쪽 여백을 추가하세요. 다음으로 원하는 대로 링크 스타일을 지정합니다.
방법 2. li(float: 왼쪽;)
목록 요소를 부동 상태로 만듭니다. 결과적으로 수평으로 배치됩니다. 컨테이너 블록 ul의 높이는 0이 됩니다. 이 문제를 해결하기 위해 ul에 (overflow: Hidden;)을 추가하고 확장하여 부동 요소를 포함할 수 있도록 합니다. 링크의 경우 (display: block;)을 추가하고 원하는 대로 스타일을 지정하세요.
방법 3. li(표시: inline-block;)
목록 요소를 인라인 블록으로 만듭니다. 수평으로 위치하며 첫 번째 경우와 같이 오른쪽에 간격이 형성됩니다. 링크의 경우 (display: block;)을 추가하고 원하는 대로 스타일을 지정하세요.
방법 4. ul(디스플레이: flex;)
을 사용하여 ul 목록을 유연한 컨테이너로 만듭니다. 결과적으로 목록 요소는 가로로 정렬됩니다. 링크에 (display: block;)을 추가하고 원하는 대로 스타일을 지정합니다.
쌀. 2(가로 드롭다운 메뉴)
이전 예제와 마찬가지로 jQuery용 파일을 복사합니다. 메뉴가 조금 더 보기 좋게 보이도록 칸막이를 남겨두기로 했습니다. 물론 그것들 없이도 할 수 있습니다.
