JS는 Jingdong Taobao_javascript 기술을 모방한 수직 보조 탐색을 구현합니다.

코드가 매우 간단하므로 너무 장황하게 설명하지 않고 코드만 알려드리겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 hoversee(){ var list = document.getElementById('nav'); var zu = list.getElementsByTagName("li"); for(var i=0;i { zu[i].onmouseover = 함수(){ this.getElementsByTagName('dl')[0].style.display = "차단"; } zu[i].onmouseout = 함수(){ this.getElementsByTagName('dl')[0].style.display = "없음"; } } } window.onload = hoversee;

*{ 글꼴 계열:Microsoft YaHei; 여백:0; 패딩:0; } 본문{너비:100%;} ul{목록 스타일: 없음;} a{텍스트 장식: 없음;} #헤더{ 높이:50px; 줄 높이:50px; 배경:#455A6E; } #헤더 h2,#헤더 h3{ 글꼴 두께:500; } #헤더 h2{ 색상:#fff; 글꼴 크기:18px; 너비:180px; 텍스트 정렬: 중앙; 배경:#0D2E49; } #헤더 h3{색상:#fff;글꼴 크기:16px;} .mycenter{ 너비:900px; 여백:0 자동; } #헤더 div.mycenter{ /*상호결정체*/ 위치:상대; } #nav { 너비:180px; 배경:rgba(0, 102, 173, 0.5); Z-색인:999; } #nav 리{ 높이:40px; 왼쪽 패딩:40px; 줄 높이: 40px; 위치:상대; } #nav h3{높이:40px;} #nav li dl{ 위치:상대; 왼쪽:140px; 상단:-40px; 너비:150px; 배경:#fff; 디스플레이:없음; 패딩:8px 10px; } #navdt{ 너비:150px; 줄 높이: 30px; 높이:30px; 배경:#36C1AF; 색상:#fff; 텍스트 정렬: 중앙; } #nav dd a{ 디스플레이:블록; 높이:30px; 너비:150px; 글꼴 크기:14px; 색상:#858585; } #nav dd a:hover{ 텍스트 장식: 밑줄; } #콘텐츠{ 배경:#E95200; 높이:500px; }

& Lt h2 & gt; 배경 관리 메뉴 & lt;/h2 & gt; > ~ ~ 계정 관리 > ~ ~ ~ | ; & Lt; a href = "#" & gt; 사용자 이름 수정 & lt;/a & gt; & Lt; a href = "#" & gt; 비밀 문제 설정 & lt;/a & gt; ~ ~ > > 홈페이지 관리 ~ 홈페이지 관리 ~ & Lt; a href = "#" & gt; 사진 설정 & lt;/a & gt; & Lt; a href = "#" & gt; 제품 디스플레이 사진 설정 & lt;/a & gt; 하단 정보 수정 ~ ~ > >~ ~ ~ ~ 제품 관리 ~ ~ ~ 새 제품 추가 ~ > ~ ~ 카테고리 관리 ~ ~ > > ~ > ;/h3> ~ 뉴스 관리 ~ 뉴스 게시 모든 뉴스 관리 시리즈 추가 뉴스 시리즈 관리 ~ ~ > > ~ > ~ ~ ~ ~ & lt; a href = "#"& gt; 모든 피드백을 관리합니다~ ~ > > ~ > ~ 기업 정보 관리 ~ 회사 프로필 & Lt; a href = "#" & gt; 회사 연락처 정보 설정 & lt;/a & gt; 인재 채용 관리 ~ ~ > > & Lt; h3 & gt; 권한 & lt;/h3 & gt; ~ 안에 ~ ~ 새로 추가 관리자 모든 계정 권한 보기 안에 ~ ~ > > 기능 관리 ~ 기능 관리 ~ & Lt; a href = "#" & gt; 첫 번째 수준 기능 설정 & lt;/a & gt; ~ ~ > > 권한 확인 및 적용 ~ > ~ ~ > 권한 보기 & Lt; a href = "#" & gt; 애플리케이션 권한 & lt;/a & gt; ~ ~ > >