ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • GNB, LNB (메뉴) 만들기
      카테고리 없음 2024. 7. 2. 10:52

       

      웹사이트 용어 알아보기

      https://www.ascentkorea.com/what-is-gnb/

       

       

      GNB, LNB? 웹사이트 용어 알아보기 - 어센트 코리아

      웹사이트는 매장과 같습니다. 매장에서 고객들이 자주 찾는 물건을 눈에 잘 띄는 위치에 배치해 빠른 구매를 이끌어내듯이, 웹사이트 또한 고객이 찾는 카테고리를 빠르게, 어디서나 확인할 수

      www.ascentkorea.com

       

      GNB 아코디언 메뉴 만들어보기

       

      lnb(아코디언 메뉴) html 작성 예시

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>아코디언 메뉴 만들기</title>
    <link rel="stylesheet" href="./css/menu.css" />
  </head>
  <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
</html>

       

      lnb(아코디언 메뉴) css 입력 예시

      @charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  width: 200px;
  overflow: hidden; /* 자식요소에 맞춰 유동적으로 늘어나기 */
}

nav > ul {
  width: 100%;
  overflow: hidden;
  position: relative;
}

nav li {
  font-size: 16px;
  background-color: rgb(247, 227, 247);
  text-align: center;
  font-weight: 400;
  border-bottom: 1px solid #f5f5f5;
  line-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
}

nav li a {
  color: #222;
}

/* 2차 메뉴 */
.submenu {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.submenu li {
  font-size: 15px;
  background-color: rgb(192, 201, 253);
  border-bottom: 1px solid thistle;
}

.submenu li:last-child {
  border-bottom: 0;
}

.submenu li a {
  color: #000;
}

.submenu li:hover {
  background-color: #f7e9e9;
}

.submenu li:hover a {
  color: red;
}

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

       

      lnb(아코디언 메뉴)  만들어보기

       

      LNB를 GNB로 변형하는 방법

       

      gnb html 작성 예시

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>펼쳐지는 gnb 만들기</title>
    <link rel="stylesheet" href="./css/menu2.css" />
  </head>
  <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
          <!-- 2차 메뉴 -->
          <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>
</html>

       

      gnb css 입력 예시

      @charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  width: 1000px;
  overflow: hidden; /* 자식요소에 맞춰 유동적으로 늘어나기 */
}

nav > ul {
  width: 100%;
  overflow: hidden;
  position: relative;
}

nav li {
  width: 200px;
  font-size: 16px;
  background-color: rgb(247, 227, 247);
  text-align: center;
  font-weight: 400;
  border-bottom: 1px solid #f5f5f5;
  line-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
}

nav > ul > li {
  float: left;
}

nav li a {
  color: #222;
}

/* 2차 메뉴 */
.submenu {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.submenu li {
  font-size: 15px;
  background-color: rgb(192, 201, 253);
  border-bottom: 1px solid thistle;
}

.submenu li:last-child {
  border-bottom: 0;
}

.submenu li a {
  color: #000;
}

.submenu li:hover {
  background-color: #f7e9e9;
}

.submenu li:hover a {
  color: red;
}

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

(전체 서브메뉴 나타내는 방법)
nav > ul:hover  > li .submenu {
  height: 160px;
}

       

      lnb(아코디언 메뉴)를 gnb 메뉴로 변환해보기 

       

    Designed by Tistory.

    티스토리툴바