메뉴 강조 효과는 모든 웹 페이지에서 자주 사용되는 디자인 방법으로 사용자에게 현재 있는 열을 효과적으로 알릴 수 있습니다. 이 방법도 제가 자주 사용하는 방법인데, 일반적으로 웹페이지에는 최소한 두 가지 수준의 메뉴가 있습니다. 첫 번째는 상단의 일반 탐색 메뉴이고, 다른 하나는 왼쪽의 카테고리 탐색 메뉴입니다. 일반적으로 1차 메뉴가 강조 표시되면 2차 메뉴에도 현재 상태가 기록될 수 있어야 합니다.
상단 메뉴가 포함된 헤더 영역이 고정되어 있으면, 즉 매번 다시 로드할 필요가 없으면 순수 CSS나 JS를 사용하여 쉽게 구현할 수 있지만 오늘은 이에 대해 이야기하지 않겠습니다. 오늘 우리가 이야기하고 있는 것은 1단계 메뉴와 2단계 메뉴가 각 페이지에 동적으로 로드된다는 것 , 즉 사용자 컨트롤로 로드된다는 것입니다. 이 경우 메뉴의 강조된 상태를 기록하기 어렵습니다.
물론 쿠키를 사용하여 각 페이지가 로드될 때 기록된 마지막 강조 상태를 기록할 수 있다고 말할 수도 있습니다. 예, 실제로 기록할 수 있지만 이 방법은 많은 하위 페이지를 포함하는 일부 복잡한 응용 프로그램에서 문제를 일으킬 수 있습니다. 사용자들에게 많은 혼란과 어려움을 안겨줍니다. 예를 들어 쿠키 수명주기 동안 프로젝트가 다시 열리면 쿠키 수명주기가 완전히 종료되지 않았습니다. 또한 마지막으로 저장된 상태를 기록하며 이때 페이지 주소가 변경되었으므로 현재 강조 표시된 메뉴가 가리키는 페이지입니다. 사용자가 보고 싶어하는 것이 아닙니다. 실습을 통해 이 쿠키의 수명 주기를 얼마나 오랫동안 설정하더라도 사용자가 악의적으로 페이지를 새로 고치는 문제를 완벽하게 해결할 수 없다는 것이 입증되었습니다. 이것은 참으로 나쁜 일입니다!
그렇다면 이 상황을 해결하는 더 좋은 방법은 없을까?
대답은 '예'입니다. 이 문제를 해결하는 가장 이상적인 방법은 각 페이지가 로드될 때 페이지의 URL 주소에 따라 현재 메뉴의 강조 스타일을 명시적으로 설정하는 것입니다 . 이는 이러한 유형의 문제를 완벽하게 해결하므로 사용자가 아무리 악의적으로 새로 고침 버튼을 클릭하더라도 강조 표시된 상태는 변경되지 않습니다. 원리를 알고 나면 구현하기가 훨씬 쉬워집니다.
구조층
첫 번째 수준 메뉴 구조 레이어:
<ul id="메뉴">
<li><a href="default.html">홈</a></li>
<li><a href="clothing.html">의류 용품</a></li>
<li><a href="house.html">가정용 가구</a></li>
<li><a href="cosmetic.html">화장품</a></li>
</ul>
이 1단계 메뉴에서 링크 주소에는 일반적으로 매개변수 값이 없음을 알 수 있습니다. 보조 메뉴의 구조적 레이어:
<ul id="기타메뉴">
<li><a href="house.html?pId=2&sId=1">일용품</a></li>
<li><a href="house.html?pId=2&sId=2">소형 가구</a></li>
<li><a href="house.html?pId=2&sId=3">전기 액세서리</a></li>
<li><a href="house.html?pId=2&sId=4">침구 세트</a></li>
<li><a href="house.html?pId=2&sId=5">웨딩 침구</a></li>
<li><a href="house.html?pId=2&sId=6">어린이 침구</a></li>
<li><a href="house.html?pId=2&sId=7">공예 장식</a></li>
<li><a href="house.html?pId=2&sId=8">청소 도구</a></li>
<li><a href="house.html?pId=2&sId=9">집 청소</a></li>
</ul>
1단계 메뉴와 다르게 2단계 메뉴의 링크 주소에 두 개의 매개변수 값을 추가합니다. pId 매개변수는 최상위 1단계 메뉴의 일련번호를 가리키며, sId는 해당 링크의 일련번호입니다. 메뉴 자체. 이 두 메뉴의 전체 컨테이너 ul에 대해 두 개의 서로 다른 ID를 설정합니다. JS에서 호출해야 하므로 누락되어서는 안 됩니다.
스타일 레이어
스타일에 관해서는 실제로 특별한 것은 없습니다. 원하는 스타일로 설정할 수 있습니다. 주의할 점은 JS의 동적 호출을 위해 메뉴 강조 표시의 세 가지 상태 스타일을 별도로 설정해야 한다는 것입니다. .
/*첫 번째 수준 메뉴에 대한 세 가지 스타일 설정*/
#menu li a.normal{배경:#fff;}//일반 스타일
#menu li a.over{배경:#00ff00;} //롤링 스타일
#menu li a.cur{배경:#ff0000;color:#fff;} //강조 스타일
/*보조 메뉴에 대한 세 가지 스타일 설정*/
#othermenu li a.normal{배경:#fff;} //일반 스타일
#othermenu li a.over{배경:#AA7F00;color:#fff;} //롤링 스타일
#othermenu li a.cur{배경:#7F0000;color:#fff;} //강조 스타일