감사합니다. 근데 알려주신 예제중에서 https://alikong.tistory.com/34
이거를 위에서 아래로 나오게 하려면 어디를 수정해야하는지 아실까요?ㅜ

해당 링크에선 넓이값 0 -> 200으로 넓어지면서 펴지는 효과를가지고 있으니
질문자님께선 높이가 0에서 100%로 늘어나면 해당 효과를 가질수가 있겠죠?

너무 감사합니다~ 덕분에 그부분은 해결됐네요~ㅜㅜ
하나 더 질문드려도 될까요?
슬라이드된 박스안에 전체메뉴를 삽입하려고 하는데
박스안에 내용이 안들어오고 버튼클릭 안했을때도 계속 내용이 나오는데 어디에 내용을 입력해야하는지 아실까요?ㅜ

해당 html 코딩과 css 부분 올려봐주세요. 어떻게 짜였는지 봐야 알 것 같습니다.

<header id="header">
<div class="inner">

<!-- logo -->
<h1 class="logo">
            <a href="javascrip:;"><img src="images/logo.png" alt="" /></a>
        </h1>

<!-- gnb -->
<ul id="gnb">
            <li>
                <a href="#">회사소개</a>
                <ul>
                    <li><a href="#">인사말</a></li>
                    <li><a href="#">조직도</a></li>
                    <li><a href="#">오시는길</a></li>
                </ul>
            </li>
            <li>
                <a href="#">제품소개</a>
                <ul>
                    <li><a href="#">aaaa</a></li>
                    <li><a href="#">bbbb</a></li>
                    <li><a href="#">cccc</a></li>
                </ul>
            </li>
            <li>
                <a href="#">기타제품</a>
                <ul>
                    <li><a href="#">dddd</a></li>
                    <li><a href="#">eeee</a></li>
                    <li><a href="#">ffff</a></li>
                    <li><a href="#">gggg</a></li>
                    <li><a href="#">hhhh</a></li>
                </ul>
            </li>
            <li>
                <a href="#">온라인상담</a>
                <ul>
                    <li><a href="#">온라인상담</a></li>
                </ul>
            </li>
            <li>
                <a href="#">고객센터</a>
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">게시판</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 햄버거버튼 -->
    <input class="burger-check" type="checkbox" id="burger-check" /><label class="burger-icon" for="burger-check"><span class="burger-sticks"></span></label>
    <div class="menu">
      <div style="width: 1200px;"></div>
    </div>
    <!-- // 햄버거버튼 -->
</header>




---------------------



#header{position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: rgba(255,255,255,0.8); box-shadow: 0 3px 3px rgba(0,0,0,0.1);}
#header .inner{position: relative; width: 1200px; height: 100px; margin: 0 auto;}
#header .logo{position: absolute; top: 0; left: 0; height: 100%; line-height: 100px;}

#gnb{position: absolute;top: 0;left: 530px; z-index: 2;}
#gnb > li{position: relative; display: inline-block; vertical-align: top;}
#gnb > li > a{display: block; padding: 0 25px; line-height: 100px;font-family: nanumsquare; font-weight: normal; font-size: 20px;color: #333;text-decoration: none;}
#gnb > li > a:after{display:block; content:''; width:0; height: 3px; position: absolute; bottom:0; left:50%; background: #ffd200; transition:all 0.25s;}
#gnb > li:hover > a:after,
#gnb > li.active > a:after{width: 80%; left:10%;}
#gnb > li > ul{position: absolute; top: 100px; left: 50%; width: 180px; margin-left: -90px; padding: 15px; background: rgba(0,0,0,0.8); box-sizing: border-box; visibility: hidden; opacity: 0; transition: all 0.2s;}
#gnb > li > ul li a{display: block; font-size: 15px; color: #fff; line-height: 30px; text-align: center;}
#gnb > li > ul li a:hover { text-decoration:none; color:#ffd200}
#gnb > li > ul li.active a{font-weight: bold;}
#gnb > li:hover > ul{visibility: visible;opacity: 1;}




.menu {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left:-600px;
  height: 300px;
  max-height: 0;
  transition: 0.5s ease;
  z-index: 1;
  background-color: #333;
}

.burger-icon {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  z-index: 2;
  padding: 8px 0;
  top: 40px;
  right: 350px;
  user-select: none;
  width: auto;
  margin: 0;
}

.burger-icon .burger-sticks {
  background: #333;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 26px;
}

.burger-icon .burger-sticks:before,
.burger-icon .burger-sticks:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.burger-icon .burger-sticks:before {
  top: 7px;
}

.burger-icon .burger-sticks:after {
  top: -7px;
}

.burger-check {
  display: none;
}

.burger-check:checked~.menu {
  max-height: 500px;
}

.burger-check:checked~.burger-icon .burger-sticks {
  background: transparent;
}

.burger-check:checked~.burger-icon .burger-sticks:before {
  transform: rotate(-45deg);
}

.burger-check:checked~.burger-icon .burger-sticks:after {
  transform: rotate(45deg);
}

.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after {
  top: 0;
}




소스에요ㅜ 부탁드립니다ㅜㅜ

1. gnb를 전부 menu > div 안에 넣어줍니다.

2. #gnb 에 width:100% 추가 / z-index:1  로 변경

3. .menu 에 z-index:2 로 변경 / overflow:hidden; 추가

글씨 색이 안보일수 있으므로 #gnb > li > a
color:red; 로 변경후 작업

이후 스타일에 맞게 변경

정말 너무너무 감사드려요ㅜ 덕분에 해결됐습니다~~