페이지 주요 부분 :
<body> <ul id = menu> <li> <a href =#> 첫 번째 메뉴 1 </a> <ul> <li> 두 번째 메뉴 1 </li> <li> 두 번째 메뉴 1 </li> <li> 두 번째 메뉴 1-2 </li> <li> 두 번째 메뉴 1-3 </li> </ul> </li> <li> 두 번째 메뉴 1-3 </li> <a href = <#> <a href = <a href = Menu2 </a> <ul> <li> 두 번째 메뉴 2-1 </li> <li> 두 번째 메뉴 2-2 </li> <li> 두 번째 메뉴 2-3 </li> </li> <li> 두 번째 메뉴 2-3 </a> <ul> <li> 두 번째 메뉴 3 </a> <ul> <li> 두 번째 메뉴 <ul> <li> <li> 두 번째 메뉴 3 </li> </li> <li> 두 번째 메뉴 3 </a> <ul> <li> 두 번째 레벨 메뉴 4-1 </li> <li> 두 번째 레벨 메뉴 4-2 </li> <li> 두 번째 레벨 메뉴 4-3 </li> </li> <ul> </body>
접이식 메뉴 예 :
CSS 부분
<head> <스타일 유형 = text/css> li {List-Style : none; 목록의 이전 그래픽을 제거하십시오} li a {색상 :#123; 첫 번째 레벨 메뉴의 텍스트 색상을 설정} #menu ul {display : none; 기본적으로 표시되지 않은 보조 메뉴를 기본적으로 설정} #menu> li : hover ul {display : block; 마우스가 첫 번째 레벨 메뉴를 통해 미끄러지면 보조 메뉴가 표시됩니다} </style> </head>아코디언 메뉴 예 :
CSS 부분
<head> <스타일 유형 = text/css> li {List-Style : none; 목록의 이전 그림을 제거하십시오} li a {색상 :#123; 첫 번째 레벨 메뉴의 텍스트 색상을 설정} #menu> li,#메뉴> li> A,#메뉴> li> ul {float : 왼쪽; 첫 번째 레벨 메뉴, 두 번째 레벨 메뉴 왼쪽 이동} #Menu> li> a {display : block; 배경색; 빨간색; } #menu> li : hover ul {display : block;}#menu> ul {display : none; 너비 : 100px; 배경색 :#123; 패딩 탑 : 20px;} </style> </head> 요약위의 것은 접이식 메뉴와 편집기가 소개 한 아코디언 메뉴를 구현하기위한 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!
이 기사가 도움이된다고 생각되면 다시 인쇄하십시오. 소스를 표시하십시오. 감사합니다!