CSS 다단계 메뉴의 예제 코드 설명

이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!