디자인만 아는 사람입니다.

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>

--------------------------------------------------------------------
  
읽어주셔서 감사드리고 고수분들의 좋은 답변 기다리겠습니다. 물론, 저도 계속 연구하고 있겠습니다.

감사합니다.