마우스를 올리면 해당 레이어 아래에 있는 특정 요소가 나타났다 사라졌다 하는 소스입니다.
나타나는 작은 삼각형은 div와 css를 이용하여 삼각형을 만들었으며,
jquery를 이용하여 마우스 오버 했을 때 나타났다 사라졌다 하게 만들었습니다.
그 외에 레이아웃은 모바일용 레이아웃입니다. (__);;
jquery 스크립트 부분입니다.
<script type="text/javascript">
/*
$("li").hover(function(){
$(this).css("background","#0000ff");
},
function(){
$(this).css("background","#ffffff");
});
*/
$( document ).ready( function() {
$( '.item' ).hover(
function () {
//$( '.item > .css-arrow-multicolor' ).css('display','block');
$(this).find(".css-arrow-multicolor").css('display','block');
}, function () {
//$( '.item > .css-arrow-multicolor' ).css('display','none');
$(this).find(".css-arrow-multicolor").css('display','none');
}
);
} );
</script>
/*
$("li").hover(function(){
$(this).css("background","#0000ff");
},
function(){
$(this).css("background","#ffffff");
});
*/
$( document ).ready( function() {
$( '.item' ).hover(
function () {
//$( '.item > .css-arrow-multicolor' ).css('display','block');
$(this).find(".css-arrow-multicolor").css('display','block');
}, function () {
//$( '.item > .css-arrow-multicolor' ).css('display','none');
$(this).find(".css-arrow-multicolor").css('display','none');
}
);
} );
</script>
css 부분입니다.
.main-content .gnb_wrap li .css-arrow-multicolor {
display:none;
margin: 0 auto;
border-color: transparent transparent #fff transparent;
border-style:solid;
border-width:5px;
width:0;
height:0;
}
display:none;
margin: 0 auto;
border-color: transparent transparent #fff transparent;
border-style:solid;
border-width:5px;
width:0;
height:0;
}
소스는 파일 첨부했습니다. 잘 살펴보시고 유용하게 이용하세요.