CSS 다단계 메뉴의 예제 코드 설명
- 不言앞으로
- 2018-11-12 15:23:312087검색
이 글의 내용은 CSS 다단계 메뉴의 예제 코드 설명입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
이것은 웹페이지를 Windows의 시작 메뉴와 같이 데스크톱 프로그램처럼 보이게 만드는 매우 멋진 기능입니다. 구현 원리는 기본적으로 순수 CSS 사진첩과 동일하지만 주의할 점이 더 많기 때문에 단계별로 진행해 보겠습니다.
아주 간단한 1단계 메뉴와 호버 효과부터 시작해 보겠습니다.
<ul id="menu"> <li> <a href="http://www.php.cn/"> 菜单一<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="http://www.php.cn/"> 菜单二<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="http://www.php.cn/"> 菜单三<!--小图--><span><!--大图--></span> </a> </li> <li class="last"> <a href="http://www.php.cn/"> 菜单四<!--小图--><span><!--大图--></span> </a> </li> </ul>
구조는 매우 친숙하며, 사진의 원래 위치를 텍스트로 대체합니다. 특별히 표시도 해두었습니다. 다음 프레젠테이션 레이어 코드는 매우 간단합니다.
* {
margin:0;
padding:0;
}
.menu {
font-size:12px;
}
.menu li {/*水平菜单*/
float:left;
list-style:none;
}
.menu a {
display:block;
position:relative;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
.menu li span {
display:none;
position:absolute;
left:0;
top:32px;
width:200px;
height:150px;
background:#B9D6FF;
}
.menu a:hover span {
display:block;
}
여기서 주목할 만한 두 가지 사항이 있습니다. 먼저 첫 번째 이야기를 해보겠습니다. 하위 메뉴(span 요소)의 상단은 a 요소의 범위 내에 있도록 할 수 있어야 합니다. 포함 블록이 li 요소인 경우에도 동일하게 적용됩니다. 스팬의 상위 값이 32픽셀보다 큰 경우(예: 40픽셀) 마우스를 스팬 요소로 이동할 수 없습니다. a:hover의 범위를 벗어났기 때문에 범위 요소가 다시 숨겨집니다.
.menu li span {
display:none;
position:absolute;
left:0;
top:40px;/*★★修改这里★★*/
width:200px;
height:150px;
background:#B9D6FF;
}
두 번째 문제는 IE6에만 있는 문제입니다. 즉, 해당 포함 블록을 마우스아웃한 후에도 하위 메뉴가 사라지지 않습니다. hover 의사 클래스는 moverover 및 moveout과 동일합니다. 마우스를 올리면 하위 요소에 하나의 스타일을 할당하고, 마우스를 떼면 다른 스타일을 할당할 수 있습니다. 즉, IE6에서는 표시를 전환할 수 없습니다(img 요소 제외). 해결책은 표시 대신 가시성을 사용하는 것입니다.
자, 이제 실제로 보조 메뉴를 만들고, 스팬과 관련된 모든 CSS를 삭제하고, 구조 레이어의 원래 스팬 위치를 다음 코드로 변경합니다.
<ul> <li><a href="http://www.php.cn/">二级菜单_11</a></li> <li><a href="http://www.php.cn/">二级菜单_12</a></li> </ul>
각 브라우저를 살펴보니 매우 취약한 것으로 나타났습니다. IE6와 Opera10의 보조 메뉴 항목은 수직인데 플로트를 지우지 않았습니까? firefox3.5, chrome, safari4의 보조 메뉴 항목이 가로로 분포되어 있는데 위에 추가 메뉴 항목이 있는 것 같은데... 이번에는 IE8 학생들이 가장 좋은 성적을 냈습니다. IE7이 설치되어 있지 않아서 항상 무시합니다.
보조 메뉴 항목이 세로로 표시될 수 있도록 포함 블록을 li 요소로 변경하는 등 스타일을 재설정해 보겠습니다.
* {
margin:0;
padding:0;
}
.menu {
font-size:12px;
}
.menu li {/*水平菜单*/
float:left;
list-style:none;
position:relative;/*把包含块移动li元素*/
}
.menu a {
display:block;
/*position:relative;发现放在a元素中，
在标准游览器中惨不忍睹，
和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {
visibility:hidden;/*开始时是隐藏的*/
position:absolute;
left:0px;
top:32px;
}
.menu ul a:hover ul{
visibility:visible;
}
.menu ul ul li {
clear:both;/*垂直显示*/
text-align:left;
}
Firefox, Safari, Chrome에서 보조 메뉴가 응답하지 않고 팝업되지 않는 것을 발견했습니다(이 세 브라우저의 CSS 부분은 서로 심각하게 표절되었습니다). Opera10이 가장 좋은 성능을 보였고 IE8이 그 뒤를 이었습니다. 그러나 표준 브라우저의 모든 요소는 href가 있는 요소가 필요한 IE6과 달리 hover 의사 클래스를 지원합니다. CSS 코드의 일부를 다시 작성했습니다.
.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
보조 메뉴가 나타날 수 있지만 신비한 li 요소도 나타났습니다. 나는 이중 부동 수축 포장을 시도했지만 이 신비한 li 요소를 제거할 수 없었습니다. 외래 코드를 참고하면 하위 메뉴 전체를 a 요소 외부에 배치한 뒤, li:hover를 이용해 스타일 전환을 제어하는 방식이다. 따라서 구조 레이어는 다음과 같이 다시 작성되었습니다.
<div class="menu"> <ul> <li> <a href="http://www.php.cn/">菜单一 </a> <ul> <li><a href="http://www.php.cn/">二级菜单_11</a></li> <li><a href="http://www.php.cn/">二级菜单_12</a></li> </ul> </li> <li> <a href="http://www.php.cn/">菜单二</a> <ul> <li><a href="http://www.php.cn/">二级菜单_21</a></li> <li><a href="http://www.php.cn/">二级菜单_22</a></li> </ul> </li> <li> //***************略************ </li> <li> //***************略************ </li> </ul> </div>
위 내용은 CSS 다단계 메뉴의 예제 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!