본문 바로가기
예제 실습

실습) lnb 아코디언 메뉴바 / 2차, 1차 메뉴 css 정리

멩멩멩 2024. 7. 2. 10:59

서브페이지에 메뉴들을 lnb 라고 한다. 

 

html 구조

더보기 
<body>
    <nav>
      <ul>
        <li>
          <a href="#">MENU1</a>
          <!-- 2차메뉴 -->
          <ul class="submenu">
            <li><a href="#">menu1-1</a></li>
            <li><a href="#">menu1-2</a></li>
            <li><a href="#">menu1-3</a></li>
            <li><a href="#">menu1-4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">MENU2</a>
          <ul class="submenu">
            <li><a href="#">menu2-1</a></li>
            <li><a href="#">menu2-2</a></li>
            <li><a href="#">menu2-3</a></li>
            <li><a href="#">menu2-4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">MENU3</a>
          <ul class="submenu">
            <li><a href="#">menu3-1</a></li>
            <li><a href="#">menu3-2</a></li>
            <li><a href="#">menu3-3</a></li>
            <li><a href="#">menu3-4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">MENU4</a>
          <ul class="submenu">
            <li><a href="#">menu4-1</a></li>
            <li><a href="#">menu4-2</a></li>
            <li><a href="#">menu4-3</a></li>
            <li><a href="#">menu4-4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">MENU5</a>
          <ul class="submenu">
            <li><a href="#">menu5-1</a></li>
            <li><a href="#">menu5-2</a></li>
            <li><a href="#">menu5-3</a></li>
            <li><a href="#">menu5-4</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

css

더보기 
nav {
  width: 200px;
  overflow: hidden;
}
/* 1차메뉴에만 포지션 */
nav > ul {
  position: relative;
  width: 100%;
  overflow: hidden;
}
nav li {
  font-size: 16px;
  background-color: lightgoldenrodyellow;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid #7db68bc2;
  line-height: 40px; /*li 높이값*/
  box-sizing: border-box;
  cursor: pointer;
}
nav li a {
  color: darkslategrey;
}
/* 2차메뉴 */
.submenu {
  width: 100%;
  overflow: hidden;
  height: 0; /*2차메뉴 숨기기*/
  transition: 0.5s;
}
.submenu li {
  font-size: 15px;
  background-color: rgb(243, 251, 255);
  border-bottom: 1px solid #7db68bc2;
}
/* 보더가 겹쳐져서 한쪽 지워줌 */
.submenu li:last-child {
  border-bottom: none;
}
/* 배경색을 바꿀 때는 a가 아닌 li에 적용해야한다. 글씨랑 따로 적용 */
.submenu li:hover {
  background-color: rgb(223, 241, 255);
}
.submenu li:hover a {
  color: rgb(119, 33, 33);
}
.submenu li a {
  color: rgb(74, 74, 182);
}
nav > ul > li:hover .submenu {
  height: 160px;
}

2차메뉴의 높이값을 line-height를 이용해서 개당 40으로 잡아놓은 상태에서 

overflow:hidden으로 2차 메뉴를 숨기고 다시 hover에서 나타날땐 높이값을 40*4=160 이렇게 해준다. 

nav > ul > li:hover .submenu {
  height: 160px;
}

 

 

 

+

css 코드만 수정해서 가로메뉴로 변경하기

 

css

더보기 
nav {
  width: 1000px; /*가로로 바꾸기 위해 넓이변경*/
  overflow: hidden;
}
/* 1차메뉴에만 포지션 */
nav > ul {
  position: relative;
  width: 100%;
  overflow: hidden;
}
nav li {
  font-size: 16px;
  background-color: lightgoldenrodyellow;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid #7db68bc2;
  line-height: 40px; /*li 높이값*/
  box-sizing: border-box;
  cursor: pointer;
  width: 200px; /*가로로 바꾸기 위해 넓이추가*/
}
/* 1차메뉴들에 플롯 넣어서 가로로 정렬 */
nav > ul > li {
  float: left;
}
nav li a {
  color: darkslategrey;
}
/* 2차메뉴 */
.submenu {
  width: 100%;
  overflow: hidden;
  height: 0; /*2차메뉴 숨기기*/
  transition: 0.5s;
}
.submenu li {
  font-size: 15px;
  background-color: rgb(243, 251, 255);
  border-bottom: 1px solid #7db68bc2;
}
/* 보더가 겹쳐져서 한쪽 지워줌 */
.submenu li:last-child {
  border-bottom: none;
}
/* 배경색을 바꿀 때는 a가 아닌 li에 적용해야한다. 글씨랑 따로 적용 */
.submenu li:hover {
  background-color: rgb(223, 241, 255);
}
.submenu li:hover a {
  color: rgb(119, 33, 33);
}
.submenu li a {
  color: rgb(74, 74, 182);
}

nav > ul:hover > li .submenu {
  height: 160px;
}

nav의 가로 넓이를 넓혀주고 1차 메뉴들(li)의 넓이를 만들어주면 된다. 그리고 1차메뉴들에 float 적용해서 가로로 변경

 

! 최종 정리 =

2차메뉴 만들때 높이값은 overflow:hidden 을 적용.

2차메뉴를 숨길때는  overflow:hidden 과 height:0; 같이 써서 숨겨야한다.

다시 나타날땐 2차메뉴의 높이값을 계산해서(line-height 값으로 계산했을 경우도) hover에 height: 값px를 적용해준다. 

거기에 transition을 적용해서 스르륵 펼쳐지게 해준다. 

 

▶ 2차메뉴에 마우스가 올라갔을 때 배경 색이 바뀌게 할려면

hover를 a태그가 아닌 li에 적용해야한다. 마우스가 올라갔을 때 같이 글씨 색도 바뀌게 할려면 a랑 li랑 각각 따로 적용해줘야한다. 

 

▶ 1차메뉴에 마우스를 올렸을 때 전체 2차 메뉴들이 다 나오게 하기

nav > ul:hover > li .submenu{ }

= ul에 마우스를 올렸을 때(1차 메뉴에 마우스를 올렸을 때) 그 밑 자손 li 의 후손 .submenu들을 보여줘라 

submenu들을 후손으로 불러올때 후손 서브메뉴가 여러개니깐 전체 선택되는 것이다. 

 

▶ 1차메뉴에 마우스를 올렸을 때 해당하는 2차 메뉴들만 나오게 하기

nav > ul > li:hover .submenu{ }

= ul안의 li 에 마우스를 올렸을 때 그 안에 있는 서브메뉴를 보여줘라- 니깐 li의 해당하는 서브메뉴들만 선택된다. 

'예제 실습' 카테고리의 다른 글

[자바스크립트] - 예제실습 ) pexels 사이트같은 라이트 박스 만들기  (0) 2024.08.08
실습) Plum 페이지  (0) 2024.07.04
실습) iLovePDF 사이트 클론코딩-2 같이 해본 버전  (0) 2024.06.28
실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전  (0) 2024.06.27
실습) split shire 사이트 클론 코딩  (0) 2024.06.25

'예제 실습' Related Articles

티스토리툴바