햄버거메뉴 질문

햄버거메뉴 질문

QA

햄버거메뉴 질문

본문

http://hcm24.kr/

 

참고사이트처럼 햄버거버튼 클릭하면 위에서아래로 전체메뉴가 나오게 만들고싶은데

어떻게해야될까요?ㅜㅜ 초보자라 너무 어렵네요ㅜ

구글링해봐도 같은 형식으로는 안나와요ㅜ

이 질문에 댓글 쓰기 :

답변 2

https://alikong.tistory.com/34 

햄버거 메뉴 펼침 

 

https://jeongah-story.tistory.com/74

햄버거 메뉴 토글버튼 예제 

 

위에 링크 한번 확인해보셔서 참고해보세요! 

jquery작동 방식은 거진 비슷하고 보통 스타일 차이라서 큰 어려움은 없으실거에요~

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

<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;
}




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

slidedown 슬라이드다운 키워드로 구글링하면 많이 나올 겁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 6
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT