림스 빌드 처럼 전체보기 누르면 나타나는 레이어를 슬라이드 효과 주려면 ? 정보
림스 빌드 처럼 전체보기 누르면 나타나는 레이어를 슬라이드 효과 주려면 ?
본문
http://sir.co.kr/bbs/board.php?bo_table=g4_builder&wr_id=9391&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EB%AA%A8%EB%B0%94%EC%9D%BC&sop=and
보통 사이트들에 자주 보이는 전체 보기 레이어 메뉴 인데요..
이 부분이 쿼리로 된 것들도 있는데 그건 메인이 밀리더라구요.
메인이 밀리지 않으면 쿼리로 된 것이 좋은데... (있다면 예제나 소스 좀)
없다면... 위 소스에서 슬라이딩 효과만 주고 싶습니다...
알려주시면 좋은 결과로 보답하겠습니다...
보통 사이트들에 자주 보이는 전체 보기 레이어 메뉴 인데요..
이 부분이 쿼리로 된 것들도 있는데 그건 메인이 밀리더라구요.
메인이 밀리지 않으면 쿼리로 된 것이 좋은데... (있다면 예제나 소스 좀)
없다면... 위 소스에서 슬라이딩 효과만 주고 싶습니다...
알려주시면 좋은 결과로 보답하겠습니다...
댓글 전체
jquery toggle 이용하시면 쉽게 구현 가능합니다.
투글 응용하시면 됩니다. 스타일시트 하고요..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css" media="screen">
#container{
position: relative;
}
#menu{
width: 958px;
height: 50px;
border: solid 1px gray;
}
#allmenu{
display: none;
background-color: gray;
width: 960px;
height: 200px;
position: absolute;
z-index: 9999;
}
.buttonContainer{
float: right;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script charset="utf-8">
$(function(){
$(".allButton").click(function(e){
e.preventDefault();
$("#allmenu").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="menu">
<div>normal menu</div>
<div class="buttonContainer"><a href="#" class="allButton">all menu button</a></div>
</div>
<div id='container'>
<div id="allmenu">
all menu
</div>
<div>메인내용</div>
</div>
</body>
</html>
투글 응용하시면 됩니다. 스타일시트 하고요..
감사합니다... 제가 바라던 거긴 한데요...
혹시 클릭하지 않고 마우스만 올리면 메뉴가 나오고 나온 메뉴 부분에서 마우스가 벗어나면 메뉴가 사라지는 건 어떻게 하나요 ???
이것까지만 좀...
혹시 클릭하지 않고 마우스만 올리면 메뉴가 나오고 나온 메뉴 부분에서 마우스가 벗어나면 메뉴가 사라지는 건 어떻게 하나요 ???
이것까지만 좀...
<script charset="utf-8">
$(function(){
$(".allButton").click(function(e){
e.preventDefault();
$("#allmenu").slideToggle("slow");
});
});
</script>
이부분에서 $(".allButton").click(function(e){
클릭을 mouseover => $(".allButton").mouseover(function(e){ 로 바꾸시고
아래에 다음 스크립트 추가하시면 됩니다.
$("#allmenu").mouseout(function(){
$("#allmenu").slideUp("slow");
});
전체 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css" media="screen">
#container{
position: relative;
}
#menu{
width: 958px;
height: 50px;
border: solid 1px gray;
}
#allmenu{
display: none;
background-color: gray;
width: 960px;
height: 200px;
position: absolute;
z-index: 9999;
}
.buttonContainer{
float: right;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script charset="utf-8">
$(function(){
$(".allButton").mouseover(function(e){
e.preventDefault();
$("#allmenu").slideToggle("slow");
});
$("#allmenu").mouseout(function(){
$("#allmenu").slideUp("slow");
});
});
</script>
</head>
<body>
<div id="menu">
<div>normal menu</div>
<div class="buttonContainer"><a href="#" class="allButton">all menu button</a></div>
</div>
<div id='container'>
<div id="allmenu">
all menu
</div>
<div>메인내용</div>
</div>
</body>
</html>
$(function(){
$(".allButton").click(function(e){
e.preventDefault();
$("#allmenu").slideToggle("slow");
});
});
</script>
이부분에서 $(".allButton").click(function(e){
클릭을 mouseover => $(".allButton").mouseover(function(e){ 로 바꾸시고
아래에 다음 스크립트 추가하시면 됩니다.
$("#allmenu").mouseout(function(){
$("#allmenu").slideUp("slow");
});
전체 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css" media="screen">
#container{
position: relative;
}
#menu{
width: 958px;
height: 50px;
border: solid 1px gray;
}
#allmenu{
display: none;
background-color: gray;
width: 960px;
height: 200px;
position: absolute;
z-index: 9999;
}
.buttonContainer{
float: right;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script charset="utf-8">
$(function(){
$(".allButton").mouseover(function(e){
e.preventDefault();
$("#allmenu").slideToggle("slow");
});
$("#allmenu").mouseout(function(){
$("#allmenu").slideUp("slow");
});
});
</script>
</head>
<body>
<div id="menu">
<div>normal menu</div>
<div class="buttonContainer"><a href="#" class="allButton">all menu button</a></div>
</div>
<div id='container'>
<div id="allmenu">
all menu
</div>
<div>메인내용</div>
</div>
</body>
</html>
