Language - [Front]/HTML & CSS

[HTML, CSS] - 드롭다운

구구르밍 2023. 11. 24. 17:31

 

 

 

 

드롭다운(dropdown) 효과

해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과

 

display 속성을 이용하여 드롭다운 효과를 구현

<style>
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #F9F9F9;
        min-width: 160px;
        padding: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown:hover .dropdown-content { display: block; }
</style>

사용자가 마우스를 올리면 나타날 <div>요소의 display 속성값을 none으로 설정

처음에는 보이지 않지만 특정 요소에 마우스를 올리면 해당 <div>요소의 display 속성값이 블록-으로 변경 되어 보이게 됌

 

 

드롭다운(Dropdown) 메뉴

메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴

해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Dropdowns</title>
    <style>
        .dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
        .dropdown { position: relative; display: inline-block; }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #FFDAB9;
            min-width: 70px;
            padding: 8px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
        .dropdown-content a:hover { background-color: #CD853F; }
        .dropdown:hover .dropdown-content { display: block; }
        .dropdown:hover .dropdown-button { background-color: #CD853F; }
    </style>
</head>

<body>
	<h1>드롭다운 메뉴</h1>
	<div class="dropdown">
		<button class="dropdown-button">Dropdown</button>
		<div class="dropdown-content">
			<a href="#">HTML</a>
			<a href="#">CSS</a>
			<a href="#">JAVA</a>
			<a href="#">C++</a>
		</div>
	</div>
</body>

</html>

 

 

 

드롭다운 네비게이션 제작

https://dev-scratch.tistory.com/103

 

[CSS - Hover, Display] 드롭다운 네비게이션

이번에는 여러 사이트에서 사용하고 있는 드롭다운 네비게이션 디자인을 만들어보겠습니다. 1. HTML 작성 Real Estate Type All One Room 1.5 Rooms Two Room Three Room Officetel Apartment 기본적인 계층 구조는 다음

dev-scratch.tistory.com

 

 

 

https://www.tcpschool.com/css/css_advanced_dropdown