한달이 넘도록 업데이트가 없던 (사실은 외면하고 있었던) 구글 클론코딩을 수정했다.
모바일에서 옹졸해진 툴팁박스의 width를 조절하고 늘어난 만큼 툴팁박스 위치를 조금 수정해주었다.
a 태그에 span을 두개나 넣은 이상한 마크업을 수정했다. 처음부터 div로 할 걸🥲
<div class="header-apps tooltip">
<span class="material-icons">apps</span>
<div class="dropdown">
<div class="dropdown-content">
<span class="material-icons">
account_circle
</span>
<span class="text">Google 계정</span>
</div>
<div class="dropdown-content">
<span class="material-icons">
search
</span>
<span class="text">검색</span>
</div>
(이하생략)
</div>
지금 생각 해보니까 dropdown 클래스와 dropdown-content의 관계를 div>div 보다는 ul>li 했으면 더 의미있는 마크업이었을 것 같다.
/* dropdown */
.dropdown {
position: absolute;
top: calc(100% + 8px);
right: -95px;
display: flex;
justify-content: space-between;
text-align: center;
flex-wrap: wrap;
padding: 16px;
width: 280px;
max-height: 400px;
border-radius: 12px;
background-color: #fff;
box-shadow: 1px 1px 5px #969696;
overflow: scroll;
visibility: hidden;
z-index: 2;
}
.dropdown.show {
visibility: visible;
}
.dropdown-content {
width: 80px;
height: 85px;
border-radius: 15px;
display: flex;
justify-content: center;
flex-direction: column;
cursor: pointer;
}
.dropdown-content:hover {
background-color: rgba(218, 230, 249, 0.728);
}
.dropdown-content .material-icons {
font-size: 40px;
margin-bottom: 5px;
color: #1a73e8;
}
.dropdown-content .text {
font-size: 14px;
}
.dropdown-blank {
width: 80px;
height: 85px;
border-radius: 15px;
}
.another-contents {
display: inline-block;
margin: 0 auto;
margin-top: 20px;
width: 180px;
height: 36px;
border: 1px solid #cacaca;
border-radius: 6px;
background-color: #fff;
color: #1a73e8;
}
.another-contents:hover {
border-color: #639fee0f;
background-color: #639fee0f;
}
내가 아는 CSS 속성은 다 집어 넣은 것 같다👀
.dropdown이 main의 로고와 인풋 뒤로 가지 않게 z-index 속성을 주어 앞으로 오게 만들었다.
.dropdown을 visibility: hidden;
으로 설정하고 JS를 이용하여
.show 라는 클래스가 추가 되었을 떄 visibility: visible;
로 설정이 바뀌도록 했다.
const apps = document.querySelector(".header-apps");
const dropdown = document.querySelector(".dropdown");
apps.addEventListener('click', () => {
dropdown.classList.toggle('show');
});
apps.addEventListener('mouseleave', () => {
dropdown.classList.remove('show');
});
원래 의도는 두번째 addEventListener의 이벤트를 blur로 하려고 했는데 이것저것 해봐도 작동이 안되서 결국 mouseleave로 하게 되었다.
이렇게 오늘의 목표였던 드롭다운 메뉴 구현하기는 성공했다. 문제는..
모바일이나 태블릿 화면과 컴퓨터의 크롬 브라우저에서는 드롭다운 이벤트가 정상으로 작동했지만 사파리에서는...
어휴...
아무래도 이벤트에 blur가 아닌 mouseleave를 사용해서 그런 것 같다. blur가 왜 안되는지는 아직도 모르겠지만 그 이유를 다시 찾아봐야겠다.. DOM 공부를 더 해야겠다..