Dangdang.com, Taobao_jquery 등 주류 전자상거래 웹사이트의 상품 분류 탐색 메뉴 모방

이 글에서는 대부분의 인기 있는 전자상거래 웹사이트와 유사한 카테고리 탐색 메뉴를 구현합니다. 메뉴 구현의 어려움은 주로 CSS 작성에 있으며, 다음은 몇 가지 핵심 사항입니다. 자세한 구현은 소스코드를 직접 보실 수 있습니다.

(1) 그림의 1번 항목을 구현하는 방법은? 절대 p로 설정된 위치, 이 p는 왼쪽으로 정확히 1픽셀 오프셋되어 왼쪽의 메뉴 표시줄이 테두리를 누르고 선택한 메뉴에 흰색 테두리가 생겨 간격이 형성됩니다.

(2 ) 그림에 표시 각 연결에서 줄바꿈 없이 2번을 달성하는 방법은 무엇입니까? 요소의 표시 속성을 inline-block으로 설정하면 대부분의 브라우저에서 다음을 추가할 수 있습니다.

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

<!--[if IE 7]> 
<style type="text/css"> 
#sidebar-menu p.menu-panel p.link-wrapper { 
display : inline; 
zoom : 1; 
} 
</style> 
<![endif]-->

(3) 살펴보기 처음 두 메뉴에는 아이콘이 있습니다. 실제로 각 메뉴에는 아이콘이 두 개 있는데, 하나는 초기 상태이고 다른 하나는 마우스 오버 상태입니다. 명명 규칙은 초기 상태가 tubeao.jpg이면 아이콘의 크기는 220px * 25px이어야 합니다. 그러면 각 메뉴의 아이콘은 어떻게 지정합니까? 예를 들어

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

<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> 
<span>图书音像</span> 
</p>

이때, 이미지 위에 마우스를 올렸을 때 초기 상태의 이미지 주소는 지정할 필요가 없습니다. 단, 초기 이미지와 동일한 디렉토리에 있어야 합니다. 🎜>다음은 전체 소스코드 파일입니다.sidebar.html

코드 복사

코드는 다음과 같습니다. 🎜>