(스타벅스)헤더_ LOGO + Submenu

포인트

HTML

**display:block 을 사용하여 인라인요소 (img) 하단에 baseline 공백을 제거

**CSS JS를 이용하여 input box를 클릭하면 돋보기아이콘이 사라지고, 검색창이 확장되며 '통합검색'이 나타난다.

** position: relative / absolute를 사용하여 자식요소가 부모요소 중간에 위치

 

CSS

** 가상클래스선택자를 사용하여 sub menu 사이에 세로줄 표현 (:: before)

** display:flex를 사용하여 가로정렬

** box-sizing:border-box를 사용하여 요소의 크기를 유지하면서 내부여백과 테두리선이 추가될수 있게 해줌.

** outline:none을 사용하여 input box를 클릭했을때 나타나는 border 삭제.

** transition: .4s 사용하여 에니메이션 효과 부드럽게.

**text-decoration:none 으로 a태그 밑줄 없애기

 

JS

**<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />  사용하여 브라우저 스타일 초기화

** document.querySelector('')을 사용하여 요소 찾기

** addEventLister('click', function(){})로 클릭하면 실행

 

 

 

결과 

돋보기 아이콘이 들어있는 input 박스를 클릭하면 검색창이 활성화

HTML

<header>
    <div class="inner">

      <a href="/">
        <img src="/StarbucksErin/images/starbucks_logo.png" alt="STARBUCKS">
      </a>

      <div class="submenu">
        <ul class="submenu-content">
  
          <li>
            <a href="/signin">Sign In</a>
          </li>
          <li>
            <a href="javascript:void(0)">My Starbucks</a>
          </li>
          <li>
            <a href="javascript:void(0)">Customer Service & Ideas</a>
          </li>
          <li>
            <a href="javascript:void(0)">Find a Store</a>
          </li>
      
        </ul>

        <div class="search">
          <input type="textbox">
          <span class="material-symbols-outlined">
            search
            </span>

        </div>
      </div>
    </div>

  </header>

CSS

/* common */

body {
  color: #333;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;

}

img {
  display: block
}

a {
  text-decoration: none;
}

/* HEADER */

header {
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
}

header .inner {
  position: relative;
  height: 100px;
  width:1100px;
  margin: 0 auto;
}

header img {
  height:75px;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0px;
  margin: auto;
}

header .submenu {
 
  display: flex;
  position: absolute;
  top:10px;
  right:10px
 
}

header .submenu ul.submenu-content {
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
}

header .sub-menu ul.submenu-content li {
  position: relative;
}
header .submenu ul.submenu-content li a{
  color: #656565;
  display: block;
  padding: 11px 16px;
  font-size: 12px;
}

header .submenu ul.submenu-content li a:hover {
  color: black;
}

header .submenu ul.submenu-content li ::before {
  content: '';
  background-color: #e5e5e5;
  width: 1px;
  height: 12px;
  position: absolute;
  top: 0;
  bottom: 0px;
  margin: auto -20px;

}

header .submenu ul.submenu-content li:first-child ::before {
  display: none;
}

header .search{
height:34px;
position: relative;
}

header .submenu .search input{
height:32px;
width: 34px;
padding:4px 10px;
border-radius: 5px;
outline:none;
border: 1.2px solid rgb(193, 181, 181);
box-sizing: border-box;
transition:all .4s;
background-color: #fff;
font-size: 12px;
}

header .search input:focus{
width: 190px;
border:1px solid #669955;
}

header .search .material-symbols-outlined{
  position: absolute;
  top: 0;
  bottom: 0px;
  margin: auto;
  height:24px;
  right:5px;
  transition:.4s;

}

header .search.focused .material-symbols-outlined{
opacity:0

}

JS

const searchEl = document.querySelector('.search')
const searchInputEl = searchEl.querySelector('input')

searchEl.addEventListener('click' , function() {
  searchInputEl.focus();
})

searchInputEl.addEventListener('focus',function(){
  searchInputEl.setAttribute('placeholder', '통합검색');
  searchEl.classList.add ('focused')
})

searchInputEl.addEventListener('blur',function(){
  searchInputEl.setAttribute('placeholder', '');
  searchEl.classList.remove ('focused')
  
})