코딩/복습

251030 market kurly (3차 상단바까지)

ponyo118 2025. 10. 30. 18:05

[1차 메뉴]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="market_top" content="width=device-width, initial-scale=1.0">
  <title>MARKET_top</title>
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/top.css">
</head>
<body>
  <header>
    <div class="top-box">
      <div class="top-bar">
        <div class="category">
          <span class="material-symbols-outlined ctg-icon">menu</span>
          <span>카테고리</span>
        <nav class="menu-1">
          <ul>
            <li><a href="#">신상품</a></li>
            <li><a href="#">베스트</a></li>
            <li><a href="#">알뜰쇼핑</a></li>
            <li><a href="#">특가/혜택</a></li>
          </ul>
        </nav>
        <div class="btn">
          <span>샛별.하루</span>
          <span>배송안내</span>
        </div>
      </div>  
    </div>
  <div class="main-box">
    <div class="img-box">
      <img src="./IMG/banner/main_banner.png" alt="베너">
    </div>
  </div>
  </header>
</body>
</html>
.top-bar {
  width: 1080px; height: 56px;
  margin-right: auto;  margin-left: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category {
  display: flex; align-items: center;
  gap: 2px;
  height: 56px;
}
.ctg-icon {
  color: #666;
}
.menu-1, .user-btn {align-self: center;}
.menu-1>ul {display: flex;}
.menu-1>ul>li {
  width: 130px;
  text-align: center;
}
.btn {
  display: flex; gap: 2px;
  border: 1px solid #D7D7D7;
  font-size: 12px; font-weight: 700;
  border-radius: 50px;
  padding: 6px 16px;
}
.btn span:first-child {color:  #640080;}
.btn span:last-child {color: rgba(102, 102, 102, 1);}

 

[ 2차 메뉴]

  <header>
    <div class="top-box">
      <div class="top-bar">
        <div class="category">
          <span class="material-symbols-outlined ctg-icon">menu</span>
          <span>카테고리</span>
          <nav class="menu-2">
            <ul>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/1.png" alt="카테고리1"><span>그랜드 뷰컬페</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/2.png" alt="카테고리2"><span>더퍼플셀렉션</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/3.png" alt="카테고리3"><span>채소</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/4.png" alt="카테고리4"><span>과일.견과.쌀</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/5.png" alt="카테고리5"><span>수산.해산.건어물</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/6.png" alt="카테고리6"><span>정육.가공육.달걀</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/7.png" alt="카테고리7"><span>국.반찬.메인요리</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/8.png" alt="카테고리8"><span>간편식.밀키트.샐러드</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/9.png" alt="카테고리9"><span>면.양념.오일</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/10.png" alt="카테고리10"><span>생수.음료</span></a></li>
              <li><a href="" hrdf="#"><img src="./IMG/market_category/11.png" alt="카테고리11"><span>커피.차</span></a></li>
            </ul>
          </nav>          
        </div>
        <nav class="menu-1">
          <ul>
            <li><a href="#">신상품</a></li>
            <li><a href="#">베스트</a></li>
            <li><a href="#">알뜰쇼핑</a></li>
            <li><a href="#">특가/혜택</a></li>
          </ul>
        </nav>
        <div class="btn">
          <span>샛별.하루</span>
          <span>배송안내</span>
        </div>
      </div>  
    </div>
  <div class="main-box">
    <div class="img-box">
      <img src="./IMG/banner/main_banner.png" alt="베너">
    </div>
  </div>
  </header>
</body>
</html>
/* 2차 메뉴 */
.menu-2 {
  background-color: #fff;
  position: absolute;
  left: 0; top: 100%;
}
.menu-2>ul>li {
  border: 1px solid ;
  width: 233px;
}
.menu-2>ul>li>a {
  display: flex;  height: 41px;
  align-items: center; gap: 8px;
  padding-left: 12px; padding-right: 12px;
  font-size: 14px;  font-weight: 500;
  color: #333;
}
.menu-2 img {
  width: 24px;
}

[3차 메뉴]

              <li><a href="" hrdf="#"><img src="./IMG/market_category/1.png" alt="카테고리1"><span>그랜드 뷰컬페</span></a>
              <nav class="menu-3">
                <ul>
                  <li><a href="#">페스타딜</a></li>
                  <li><a href="#">컬리온리</a></li>
                  <li><a href="#">가성비 데일리</a></li>
                  <li><a href="#">럭셔리 뷰티</a></li>
                  <li><a href="#">후기 게시판</a></li>
                  <li><a href="#">무료배송</a></li>
                  <li><a href="#">카테고리 랭킹</a></li>
                  <li><a href="#">중복쿠폰</a></li>
                  <li><a href="#">MD PICK</a></li>
                </ul>
              </nav>
              </li>
/* 3차 메뉴 */
.menu-3 {
  background-color: #fff;
  position: absolute;
  left: 100%; top: 0;
}
.menu-3>ul>li {
  border: 1px solid ;
  width: 233px;
}
.menu-3>ul>li>a {
  display: flex;  height: 41px;
  align-items: center; gap: 8px;
  padding-left: 12px; padding-right: 12px;
  font-size: 14px;  font-weight: 500;
  color: #333;
}

[마지막 hover시 보이게 하는 건]

.menu-2 {
  display: none;
}
.category:hover .menu-2 {display: block;}

 

.menu-3 {
  display: none;
}
.menu-2>ul>li:hover .menu-3 {
  display: block;
}

 

'코딩 > 복습' 카테고리의 다른 글

코딩 복습  (1) 2025.11.19
251110~18 DOD 구현  (0) 2025.11.17
251028 picogram (top-bar)  (0) 2025.10.28
251027 picogram (top-bar)  (0) 2025.10.27
251017 SPC 모작  (0) 2025.10.17

'코딩/복습'의 다른글

  • 현재글251030 market kurly (3차 상단바까지)

관련글

티스토리툴바