댓글 : 웹 페이지를 탐색 할 때 종종 드롭 다운 내비게이션이 발생합니다. 나는 JS를 사용하여 그것을 구현했던 것을 기억합니다. 그러나이 기사에서 다음에 소개하려는 것은 CSS3+HTML5를 사용하여 구현하는 것입니다. 관심이 있으시면 놓치지 마십시오. CSS3를 읽은 후에 배우는 것이 도움이되기를 바랍니다.
렌더링은 다음과 같습니다.코드는 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8" />
<title> 순수한 HTML+CSS Navigation </title>
<!-멀더->
<!-QQ : 10221408->
<!-Chrome Firefox-> 만 지원합니다
<스타일>
*{
여백 : 0;
패딩 : 0;
}
.
Clear : 둘 다;
콘텐츠: ".";
디스플레이 : 블록;
높이 : 0;
가시성 : 숨겨진;
}
Nav {
디스플레이 : 인라인 블록;
테두리 : 1px 솔리드 #505255;
국경 바닥 : 1px 고체 #282C2F;
-Moz 국경 Radius : 5px;
-webkit-border-radius : 5px;
여백 : 50px;
-webkit-box-shadow : 1px 1px 3px #292929;
-Moz-Box-Shadow : 1px 1px 3px #292929;
}
Li {
목록 스타일 : 없음;
플로트 : 왼쪽;
테두리 오른쪽 : 1px 솔리드 #2E3235;
위치 : 상대;
/*배경 : -Moz-linear-gradient (상단, #fff, #555d5f 2%, #555d5f 50%, #3e4245 100%);
배경 : -webkit-gradient (선형, 0 0, 0 100%, (#ffff), 컬러 스톱 (2%, #555d5f), 컬러 스톱 (50%, #555d5f), ( #3e4245));*/
배경 :#555D5F;
}
Li : 호버 {
/*배경 : -Moz-linear-gradient (상단, #fff, #3e4245 2%, #555d5f 80%, #555d5f 100%);
배경 : -webkit-gradient (선형, 0 0, 0 100%, (#ffff), 컬러 스톱 (2%, #3e4245), 컬러 스톱 (80%, #3e4245), ~ ( #555d5f));*/
배경 :#3E4245;
-모조 전환 : 배경 1s 편의;
-webkit-transition : 배경 1s 편의;
}
li a {
디스플레이 : 블록;
높이 : 40px;
라인 높이 : 40px;
패딩 : 0 30px;
글꼴 크기 : 12px;
색상 : #ffff;
Text -Shadow : 0px -1px 0px #000;
텍스트 결정 : 없음;
흰색 공간 : Nowrap;
왼쪽 경계 : 1px 솔리드 #999e9f;
테두리 : 1px 고체 #999e9f;
-Moz 주인형 왼쪽-라디우스 : 2px;
-webkit-border-top-left-radius : 2px;
Z- 인덱스 : 100;
}
li> a {
위치 : 상대;
}
li. first a {
-Moz 국경 Radius-topleft : 4px;
-Moz 국경 Radius-Bottomleft : 4px;
-webkit 주역-왼쪽-라디우스 : 4px;
-webkit-border-bottom-left-radius : 4px;
}
li.last {
경계 오른쪽 : 0 없음;
}
dl {
위치 : 절대;
디스플레이 : 블록;
상단 : 40px;
왼쪽 : -25px;
너비 : 165px;
배경 :#222222;
-Moz 국경 Radius : 5px;
-webkit-border-radius : 5px;
-webkit-box-shadow : 1px 1px 3px #292929;
-Moz-Box-Shadow : 1px 1px 3px #292929;
z- 인덱스 : 10;
}
Li : 호버 dl {
상단 : 50px;
디스플레이 : 블록;
너비 : 145px;
패딩 : 10px;
}
dl a {
배경 : 투명;
국경 : 0 없음;
-Moz 국경 Radius : 5px;
-webkit-border-radius : 5px;
-모조 전환 : 배경 0.5 초의 편의;
-webkit-transition : 배경 0.5s 편의성;
Z- 인덱스 : 50;
}
DL A : 호버 {
색상 : #fff;
배경 :#999E9F;
-Moz-transition : 배경 0.3 초의 편의-인 아웃, Color 0.3s Ease-in-out;
-webkit-transition : 배경 0.3s 편의-인 아웃, 색상 0.3s 편의-인 아웃;
}
dd {
마진-탑 : -40px;
불투명도 : 0;
너비 : 145px;
-webkit-transition-property : 모두;
/*-WebKit-transition-timing-function : 입방-베 지어 (5,0,5,0);*/
-Moz-Transition-Property : 모두;
/*-Moz-Transition 타이밍 기능 : 입방-베 지어 (5,0,5,0);*/
/*-WebKit-Transition-Delay : 5s;
-Moz-transition-delay : 5s;*/
}
Li : 호버 DD {
마진 탑 : 0;
불투명도 : 1;
}
Li DD : Nth-Child (1) {
-webkit-transition 기간 : 0.1s;
-Moz-transition- 기간 : 0.1S;
}
Li DD : Nth-Child (2) {
-webkit-transition 기간 : 0.2s;
-Moz-transition- 기간 : 0.2s;
}
Li DD : Nth-Child (3) {
-webkit-transition 기간 : 0.3s;
-Moz-transition- 기간 : 0.3s;
}
Li DD : Nth-Child (4) {
-webkit-transition 기간 : 0.4s;
-Moz-transition- 기간 : 0.4s;
}
dt {
디스플레이 : 없음;
마진-탑 : -25px;
패딩 탑 : 15px;
높이 : 10px;
}
Li : 호버 DT {
디스플레이 : 블록;
}
.darrow {
플로트 : 오른쪽;
여백 : 18px 10px 0 0;
국경비 : 5px;
국경 색 : #fff 투명 투명 투명;
국경 스타일 : 단단한;
너비 : 0;
높이 : 0;
라인 높이 : 0;
오버플로 : 숨겨진;
커서 : 포인터;
Text -Shadow : 0px -1px 0px #000;
-webkit-box-shadow : 0px -1px 0px #000;
-moz-box-shadow : 0px -1px 0px #000;
}
.화살{
여백 : 0 Auto;
마진-탑 : -5px;
디스플레이 : 블록;
너비 : 10px;
높이 : 10px;
배경 :#222222;
-webkit-transform : 회전 (45deg);
-Moz 변환 : 회전 (45deg);
}
</스타일>
</head>
<body>
<avi>
<ul>
<li> <a href = "#"> 메뉴 One </a> </li>
<li>
<span> </span>
<a href = "#"> 메뉴 2 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu one </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu 세 하위 메뉴 3 </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> 메뉴 3 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu one </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu 세 하위 메뉴 3 </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> 메뉴 4 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu one </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tersh </a> </dd>
<dd> <a href = "#"> submenu four </a> </dd>
</dl>
</li>
<li> <a href = "#"> 메뉴 5 </a> </li>
<li> <a href = "#"> men vi </a> </li>
<li> <a href = "#"> 메뉴 Seven </a> </li>
<li> <a href = "#"> 메뉴 8 </a> </li>
</ul>
</nav>
</body>
</html>