- 순수 CSS / HTML 드롭 다운 메뉴 이 튜토리얼에서는 순수한 CSS에 대한 고전적인 수평 메뉴를 만들 것입니다. 목록에 아이콘이 있습니다. 항목을 가리키면 버튼과 텍스트의...
- 가리키는 동안 가로 메뉴에 애니메이션을 적용합니다.
- CSS / HTML 드롭 다운 메뉴 설명
순수 CSS / HTML 드롭 다운 메뉴
이 튜토리얼에서는 순수한 CSS에 대한 고전적인 수평 메뉴를 만들 것입니다. 목록에 아이콘이 있습니다. 항목을 가리키면 버튼과 텍스트의 색상이 부드럽게 변경되고 그림자가 추가됩니다. 드롭 다운리스트는 멀티 레벨로 만들 수 있으며 주요 것은 순수한 CSS3에서 모두 매우 간단하게 구현됩니다.
이 단원의 계속 - 2 부 모바일 버전 가로 메뉴 ".
펜보기 POyzbW 데니스 ( @Dstroy )에 코데 핀 .
수업 사용시 :
- 디스플레이 : 플렉스;
- 사용 전환;
- 요소를 위치에 배치하십시오.
HTML 수평 메뉴 구조
먼저 수평 메뉴 아래에 마크 업을 작성하십시오. 필자의 경우 개발 환경을 여는 PhpStorm이고, index.html 파일을 만들고, 프레임 html : 5를 처 리하고, lang을 ru로 대체합니다.
모든 메타는 인코딩을 제외하고 삭제 될 것이고, 나는 내 타이틀 " Tom 메뉴 "를 등록 할 것이다.
본문 사이에는 header 태그를 쓰고 그 안에는 .dws-menu 클래스가있는 블록이 있습니다. 여기에는 메뉴가 포함됩니다. 다음은 구조가 다음과 같이, 우리는 5 조각의 금액 목록을 만들 것입니다. 각 목록에는 href = "#"속성이있는 링크가 있습니다. 그 다음 나는 .fa - .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>
우리는 신청을 위해 언론에 응합니다.
메뉴 항목 ( 집, 제품, 서비스, 뉴스, 연락처 )의 이름을 적어 두자.
그런 다음 아이콘을 선택하고 연결하십시오. 사이트로 이동하여 다음 메뉴 항목의 아이콘을 선택합니다.
<i class = "fa fa- cogs "> </ i> <i class = "fa fa-home"> </ i> = "fa fa -list "> </ i> <i class = "fa fa -envelope-open "> </ i>
아이콘으로 사이트에서 아카이브를 다운로드하고, 내용을 컴퓨터에 추출하고, 글꼴 폴더와 css 폴더를 개발 환경에 복사하십시오.
글꼴 폴더에는 아이콘 글꼴이 포함되어 있으며 css 폴더에는 스타일이 있습니다. 압축 된 스타일은 font-awesome.min에서 삭제할 수 있습니다. 압축되지 않은 글꼴 인 awesome.css를 연결합니다.
index.html에서는 아이콘을 연결하고 각 항목을 자체 아이콘 스타일 ( 집 , 장바구니 , 톱니 바퀴 , th- 목록 , 봉투 열기 )로 등록합니다.
메인 프레임을 만들고 메인 스타일에 대한 설명 뒤에 하위 메뉴를 만든 다음 가로 메뉴 style.css의 기본 스타일을 설명하고 index.html에 연결하는 파일을 만듭니다. 스타일이 연결되어 있는지 확인하려면 img 폴더를 만들고 그 안에 임의의 그림을 배경에 배치합니다. 배경을 사용하여 그림 연결을 작성해 보겠습니다.
body {background-image : url ( "../ img / ep_naturalwhite.png"); }
보시다시피, 모든 것이 표시되고 스타일에 대한 설명으로 진행할 것입니다.
먼저, 모든 브라우저를 기본적으로 설정할 수있는 모든 들여 쓰기를 다시 설정해 보겠습니다.
.dws-menu * {여백 : 0; 패딩 : 0; }
헤더를 200 피크로 설정하십시오. 다운로드 할 수있는 사이트를 지정하고 사이트에서 자신에게 직접 연결할 수 있습니다. 추가 폰트를 작성할 수 있습니다.
헤더 {margin : 200px; font-family : Cuprum, Arial, Helvetica, sans-serif; }
목록에서 마커를 숨 깁니다.
.dws-menu ul, .dws-menu ol {list-style : none; }
목록은 display : flax와 함께 수평 적으로 표시 될 것이고, 우리는 중심에서 그것을 할 것입니다 :
.dws-menu> ul {display : flex; justify-content : 센터; }
머리말에서 맨위 만 들여 쓰고 마진을 씁니다.
헤더 { margin-top : 200px; font-family : Cuprum, Arial, Helvetica, sans-serif; }
우리 메뉴를 디자인하고, 버튼의 색상, 글꼴 등을 설정해 보겠습니다.
링크 nav> ul li을 선택하여 요소를 차단하십시오. 메뉴 배경을 설정하고, 들여 쓰기를 작성하고, 크기를 지정하고, 색상을 지정하고, 밑줄을 제거하고, 머리글을 대문자로 만드십시오.
.dws-menu> ul li a {display : 블록; 배경 : #ececed; 패딩 : 15px 30px 15px 40px; 글꼴 크기 : 14px; 색상 : # 454547; 텍스트 장식 : 없음; 텍스트 변환 : 대문자; }
그런 다음 아이콘을 배치하고 목록을 위치에 할당합니다. 아이콘의 추가 정렬 :
.dws-menu> ul li {위치 : 상대적; }
다음으로, 우리는 아이콘을 선택하고 절대적으로 그 위치를 정하고 왼쪽 12 개 봉우리에서 15 개 봉우리 위에서 들여 쓰기를하고 18 개 봉우리에서 크기를 늘립니다.
.dws-menu> ul li> a i.fa {위치 : 절대; 상단 : 15px; 왼쪽 : 12px; 글꼴 크기 : 18px; }
구분 기호를 테두리 형식으로 목록에 지정하고 첫 번째 LI 요소를 선택하고 테두리를 설정하십시오. 마지막 요소 LI를 선택하고 비슷한 테두리를 할당합니다.
.dws-menu> ul li : 첫 번째 자식 {border-left : 1px solid # b2b3b5; } .dws-menu> ul li : 마지막 자식 {border-right : 1px solid #babbbd; }
LI 목록 구분 기호 만들기 :
.dws-menu> ul li {위치 : 상대적; 국경 - 오른쪽 : 1px 고체 # c7c8ca; }
메뉴에서 모양을 가져온 다음 호버 (hover) 중에 스타일에 대한 설명을 진행할 수 있습니다.
가리키는 동안 가로 메뉴에 애니메이션을 적용합니다.
링크를 선택하고 블록에 색상을 지정하고 링크 자체의 색상을 흰색 아이콘으로 지정하십시오. 다른 어두운 그림자를 추가합시다. 0.3 초 안에 트랜지션을 사용하여 부드럽게 나타납니다.
.dws-menu li a : 마우스 오버 {배경 : # 454547; color : #ffffff; 상자 그림자 : 1px 5px 10px 5px 검정색; 전환 : 0.3 초 모두 쉬움; }
이 효과를 부드럽게 사라지게하려면이 스타일을 쉽게 링크에 추가하십시오.
.dws-menu> ul li a {display : 블록; 배경 : #ececed; 패딩 : 15px 30px 15px 40px; 글꼴 크기 : 14px; 색상 : # 454547; 텍스트 장식 : 없음; 텍스트 변환 : 대문자; 전환 : 0.3 초 모두 쉬움; }
메인 메뉴가 끝나면 하위 메뉴와 하위 메뉴에 포함 된 하위 메뉴로 이동할 수 있습니다.
CSS / HTML 드롭 다운 메뉴 설명
우리는 index.html을 열고 예를 들어 제품에 추가 메뉴를 추가합니다. LI 목록 사이에 UL을 삽입하고 herf = "#"속성이있는 링크가 포함 된 5 개의 목록을 배치하십시오.
ul> li * 5> a [href = "#"]
우리는 신청할 때 눌러 항목 ( 의류, 전자, 식품, 도구, 생명 화학 )의 이름을 적으십시오 .
<ul> <li> <a href="#"> 의류 </a> </ li> <li> <a href="#"> 전자 제품 </a> </ li> <li> <a href = "# </a>> 음식 </a> </ li> <li> <a href="#"> 도구 </a> </ li> <li> <a href="#"> 생활. 화학 </a> </ li> </ ul>
그런 다음 style.css를 열고 하위 메뉴 스타일을 설명하십시오.
두 번째 목록을 선택하고 위치를 지정합니다 : 절대; , 최소 폭을 150 피크로 설정합시다.
/ * 하위 메뉴 * / .dws-menu li ul {위치 : 절대; 최소 너비 : 150px; }
경계선리스트에 1 점을 씁시다.
.dws-menu li> ul li {border : 1px solid # c7c8ca; }
하위 메뉴의 링크는 들여 쓰기를 10 개의 봉우리로 설정합니다. 텍스트 변형을 제거하고 배경을 두 가지 톤을 더 어둡게 만듭니다. # e4e4e5; .
.dws-menu li> ul li a {패딩 : 10px; 텍스트 변형 : 없음; 배경 : # e4e4e5; }
그런 다음 다른 하위 메뉴를 만듭니다. 마크 업 파일로 이동하십시오. 예를 들어 전에 사용한 것처럼 유추 메뉴를 사용하여 "Electronics"양식으로 이동하십시오. 항목 ( 카메라, 컴퓨터, 전화 )의 제목을 설명하고 저장합니다.
<li> <a href="#"> 전자 제품 </a> <ul> <li> <a href="#"> 카메라 </a> </ li> <li> <a href="#"> 컴퓨터 </a> </ li> <li> <a href="#"> 전화 </a> </ li> </ ul> </ li>
그들은 꺼내졌지만 주 메뉴 아래에 숨겨져 있습니다. 이제 위치 : 절대; 중첩 된 UL을 찾아 150 피크로 이동합니다. 측면에 :
.dws-menu li> ul li ul {위치 : 절대; 오른쪽 : -150 픽셀; 상단 : 0; }
다음으로, 최상위 메뉴의 주요 항목을 타겟팅 할 때 하위 메뉴를 표시합니다. 여기에 display : none; 모든 내부 포인트를 숨 깁니다.
/ * 하위 메뉴 * / .dws-menu li ul {위치 : 절대; 최소 너비 : 150px; 표시 : 없음; }
그리고 그 모양을 위해, 우리는 호버에있는 목록을 선택하고 display : block; .
.dws-menu li : 호버> ul {display : block; }
이제는 UL 블록을 복사하고 항목을 변경하여 다단계 메뉴를 추가 할 수 있습니다.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> 홈 </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> 제품 </a> <ul> <li> <a href="#"> 의류 </a> <ul> <li> <a href = "#"> 신발 </a> </ li> <li> <a href="#"> 자켓 </a> </ li> <li> <a href="#"> 바지 </a> < / li> </ ul> </ li> <li> <a href="#"> 전자 제품 </a> <ul> <li> <a href="#"> 카메라 </a> </ li> <li> <a href="#"> 컴퓨터 </a> </ li> <li> <a href="#"> 전화 </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> / ul> </ li> </ ul> </ li> <li> <a href="#"> 음식 </a> </ li> <li> <a href="#"> 도구 </ h a> </ li> <li> <a href="#"> Gen. 화학 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> 서비스 </a> <ul > <li> <a href="#"> 서비스 1 </a> </ li> <li> <a href="#"> 서비스 2 </a> </ li> <li> <a href = "#"> 서비스 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> 뉴스 </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> 연락처 </a> </ li> </ ul>
그런 다음 버튼으로 버튼을 끝내자. 나는 여러 프리셋을 만들었고, 자신 만의 프리셋을 만들 수 있습니다. 제 경우에는이 코드를 복사하여 이전에 쓴 배경에 놓습니다.
.dws-menu> ul li a {display : 블록; / * 퍼머 링크 -이 그라데이션 : http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background : # c9c9c9 ; / * 오래된 브라우저 * / 배경 : -moz-linear-gradient (맨 위, # c9c9c9 0 %, # f6f6f6 2 %, # c4c5c7 98 %, # 757577 100 %); / * FF3.6-15 * / 배경 : -webkit-linear-gradient (맨 위, # c9c9c9 0 %, # f6f6f6 2 %, # c4c5c7 98 %, # 757577 100 %); / * Chrome10-25, Safari5.1-6 * / 배경 : 선형 그래디언트 (아래쪽, # c9c9c9 0 %, # f6f6f6 2 %, # c4c5c7 98 %, # 757577 100 %); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / 필터 : Progid : DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / 패딩 : 15px 30px 15px 40px; 글꼴 크기 : 14px; 색상 : # 454547; 텍스트 장식 : 없음; 텍스트 변환 : 대문자; 전환 : 0.3 초 모두 쉬움; } .dws-menu li a : hover {/ * Permalink -이 그라디언트 : http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / 배경 : # e0e1e5; / * 오래된 브라우저 * / 배경 : -moz-linear-gradient (상단, # e0e1e5 0 %, # 454547 2 %, # 454547 98 %, # e0e1e5 100 %); / * FF3.6-15 * / 배경 : -webkit-linear-gradient (위쪽, # e0e1e5 0 %, # 454547 2 %, # 454547 98 %, # e0e1e5 100 %); / * Chrome10-25, Safari5.1-6 * / 배경 : 선형 그래디언트 (아래쪽, # e0e1e5 0 %, # 454547 2 %, # 454547 98 %, # e0e1e5 100 %); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / 필터 : Progid : DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color : #ffffff; 상자 그림자 : 1px 5px 10px 5px 검정색; 전환 : 0.3 초 모두 쉬움; }
원하는 경우,이 메뉴는 사이트에 적합한 스타일을 위해 디자인 될 수 있습니다. 색상을 생성하고 코드에서 바꾸는 것으로 충분합니다. 그것은 순수한 CSS로 만들어진 간단하고 동시에 좋은 수평 메뉴를 밝혀 냈습니다.
