jquery는 Jingdong 탐색을 모방합니다./Taobao 쇼핑몰 왼쪽 카테고리 탐색 드롭다운 메뉴를 모방합니다. effect_jquery

웹 사이트 구축, 특히 쇼핑몰 및 제품 웹 사이트의 경우 일반적으로 jquery로 작성된 모방 JD 탐색 메뉴, 고전적인 왼쪽 다단계 탐색 메뉴와 같은 탐색 팝업 메뉴가 사용되며 레이아웃은 다음에서 변경할 수 있습니다. 할 것이다. JD 메뉴는 많은 JS 프론트엔드 매니아들에 의해 모방되었습니다. 오늘 Ant Network는 JD Mall을 모방한 다단계 제품 카테고리 메뉴를 여러분과 공유합니다.
코드의 간소화된 버전은 먼저 jquery 모방 JD를 살펴봅니다. 탐색 효과:



프론트엔드 HTML 코드는 다음과 같습니다.

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

• baidu< /li>
  
  
  

  baidu

  
  < ;li>goolge



google

yahoo

yahoo

li>microsoft

microsoft

js 코드:



코드 복사

코드는 다음과 같습니다. < ;script type="text/javascript"> $(function(){ $("ul li").each(function (색인){

$(this).mouseover(function( ){

var obj=$(this).offset();
var xobj=obj.left 190 "px";
var yobj=obj.top-50 "px";
$ (this).css({"width":"190px","z-index":"9999","border-right":"none" ,"배경":"#fff"});
$ ("ul > div:eq(" index ")").css({"left":xobj,"top":yobj}).show ();
}).mouseout(function(){
$("ul > .tips").hide();
$(this).css({"width":"200px ","z-index":"1","border": "1px 단색 #E5D1A1","배경":"#FFFDD2"})
})

})
$ ("div").each(function(){
$ (this).mouseover(function(){
$(this).prev("li").css({"width":"190px ","z-index":"9999","border-right ":"none","Background":"#fff"})
$(this).show();
}). mouseout(function(){
$(this).hide( );
$(this).prev("li").css({"width":"200px","z-index": "1","테두리":"1px 단색 #E5D1A1"," 배경":"#FFFFD2"})
})
})
})
🎜>

렌더링은 다음과 같습니다.

jQuery는 JD.com의 왼쪽 메뉴 효과를 모방하여 쇼핑몰 상품에 적합합니다. 여기에서는 그다지 자세하게 설명하지 않고 CSS와 jQuery를 결합하여 간단한 메뉴 효과를 완성하고 있습니다. 실제 응용 프로그램에서 직접 사용해 보시기 바랍니다. 호환성이 매우 좋으며 누구나 환영합니다. 그것을 사용하기 위해.