슬라이드 업 전체메뉴에 대해 질문드립니다.
디자인만 아는 사람입니다.
4일째 고생하고 있습니다.
저의 수고를 다른 분에게 전가하는 것같아 죄송한 마음이 크지만
문외한으로서 도움이 꼭 필요하여 질문드립니다.
*내용 : 아래에서 위로 슬라이딩되는 메뉴
위의 그림 1, 2 와 같이 1에서 누르면 2처럼 펼쳐졌다가 2버튼을 다시 누르면 1번 처럼 접히는 형태입니다.
슬라이드 업 소스는 거의 없어 한참을 헤메다가 운좋게 소스를 구했는데 CSS? 부분을 수정해도//특히, 버튼의 위치
를 가운데로// 적용이 잘 되지않아 많이 헤메고 있습니다.
소스는 아래와 같습니다.
--------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>toggleSlide Up</title>
<style>
html, body {
height:100%;
}
body {
padding:0;
margin:0;
background:#ffffff;
font-family:돋움, DOTUM,Arial, Helvetica, sans-serif;
font-size:14px
}
#container {
width:1005px;
height:100%;
margin:0 auto;
position:relative;
}
#about_popup {
width:1005px;
height:320px;
padding:20px;
background:#fff;
position:absolute;
left:0;
bottom:0;
display:none;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
}
#about_popup h1 {
color:#fff;
margin:0;
font-size:100px;
}
#about_popup p {
margin:0;
color:#fff;
}
#bottom_bar {
width:130px;
height:40px;
background:#cc0000;
background:-moz-linear-gradient(#FE1313,#cc0000);
background:-webkit-gradient(linear, left top, left bottom, from(#FE1313), to(#cc0000));
box-shadow:none;
position:absolute;
bottom:0;
}
#bottom_bar ul {
list-style:none;
width:960px;
margin:0 auto;
}
#bottom_bar ul li {
float:left;
line-height:40px;
}
#bottom_bar ul li a {
color:#fff;
text-decoration:none;
margin-right:20px;
}
/*--- Page styles ---*/
#back {
position:bottom:0;
top:10px;
left:center;
background:#ccc;
width:150px;
height:25px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
text-align:center;
padding-top:0px;
opacity:0.5;
}
#back:hover {
opacity:1;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function () {
$('#bottom_menu a').click(function (e) {
$('#about_popup').slideToggle();
});
});
</script>
</head>
<body>
<div id="container">
<div id="about_popup">
<h1>About</h1>
<p>
<img src="map.jpg" width="1005" height="294">
</p>
</div>
</div>
<table>
<tr>
<td height=100>
<div id="bottom_bar">
<ul id="bottom_menu">
<li><a href="#about"><img src="btn.png"</a></il>
</ul>
</div>
</td>
</tr>
<tr>
<td height=100></td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------
읽어주셔서 감사드리고 고수분들의 좋은 답변 기다리겠습니다. 물론, 저도 계속 연구하고 있겠습니다.
감사합니다.
댓글 2개
<input type="hidden" name="tmp_slider_val" value="" />
이런식으로 빈값을 만들곳을 하나 만들어서
$('#bottom_menu a').click(function (e) {
var status = $('[name=tmp_slider_val]').val();
if(status == 1)
{
$('#about_popup').slideUp();
$('[name=tmp_slider_val]').val(0);
$(this).attr('src','바뀌는 아이콘');
}
else
{
$('#about_popup').slideDown();
$('[name=tmp_slider_val]').val(1);
$(this).attr('src','원래 아이콘');
}
});
이런식으로 처리합니다. 약간 길어져도 토글 효과 나옵니다.
저도 이래저래 해보다가 비슷하게 붙여보았습니다.
필요하신 다른 분들을 위해서도 소스원본을 게시하도록 하겠습니다.
다시 한번 감사드립니다.
즐거운 연말연시 되시길 기원합니다.
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기