TechScribe Notes
4. 드롭다운 메뉴 만들기 본문
<HTML>
| <div class="dropdown">
<input type ="text" class ="textBox" placeholder="Dropdown Menu" readonly>
<div class="option">
<div onclick="show('Html')"><ion-icon name="logo-html5"></ion-icon>Html</div>
<div onclick="show('CSS')"><ion-icon name="logo-css3"></ion-icon>CSS</div>
<div onclick="show('Javascript')"><ion-icon name="logo-javascript"></ion-icon>Javascript</div>
<div onclick="show('Figma')"><ion-icon name="logo-figma"></ion-icon>Figma</div>
<div onclick="show('ReactJS')"><ion-icon name="logo-react"></ion-icon>ReactJS</div>
</div>
</div>
|
<CSS>
| *{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
min-height: 100vh;
background: white;
}
.dropdown{
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before{
content: '';
position: absolute;
width:8px;
height: 8px;
border:2px solid #333;
right:20px;
top:15px;
z-index: 10000;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before{
top:22px;
transform:rotate(-225deg);
}
.dropdown input{
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
cursor: pointer;
background: fff;
border:none;
outline: none;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
padding:12px 20px;
border-radius: 10px;
}
.dropdown .option {
position:absolute;
top:70px;
width: 100%;
background: fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
border-radius: 10px;
overflow:hidden;
display:none;
}
.dropdown.active .option{
display: block;
}
.dropdown .option div{
padding:12px 20px;
cursor: pointer;
}
.dropdown .option div:hover{
background: #62baea;
color:#fff;
}
.dropdown .option div ion-icon{
position: relative;
top:4px;
font-size: 1.2em;
}
|
<js>
| <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> //아이콘 사용을 위한 소스
<script>
function show(anything){
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function(){
dropdown.classList.toggle('active');
}
</script>
|
| Box-sizing -box-sizing: border-box; => 테두리,패딩 까지 포함해서 너비값 지정함/ 테두리와 패딩 값 상관없이 지정된 너비와 높이를 유지하고 싶다면 사용. -box-sizing : content-box; => 콘텐츠 영역에 대한 너비값만 지정. 기본값 overflow: 요소의 크기 이상으로 내용이 넘쳤을때 (부모요소의 영역을 넘을 때) 보여짐을 제어하는 단축속성 -visible: 넘친 내용을 그대로 보여줌 -hidden: 넘친 내용을 잘라냄 -scroll: x축, y축 모두 스크롤바 생성( 내용이 넘치지 않는 경우에도 설정 가능) -auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 -overflow-x: x축으로 넘치는 부분을 제어함 -overflow-y: y축으로 넘치는 부분을 제어함 |
'프론트엔드 > Online Tutorial' 카테고리의 다른 글
| 6. 메뉴토글 버튼 만들기(+애니메이션 효과)/ClassList (0) | 2021.12.19 |
|---|---|
| 5. 커스텀 체크박스 / 속성선택자/가상클래스/가상요소 (0) | 2021.12.19 |
| 3. 이미지에 레터링 커버 효과/ background (0) | 2021.12.19 |
| 2.hover 효과로 자동 스크롤 내리기/transition/transform (0) | 2021.12.19 |
| 1.애니메이션 효과 / 가상 구조 클래스/transform (0) | 2021.12.19 |
'프론트엔드/Online Tutorial' Related Articles
more
