Jam's story
[CSS] DropDown 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https:/ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
.dropdown{
position:relative;
display: inline-block;
left: 200px;
}
.dropdown-content{
display: none;
position: absolute;
background-color: bisque;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>Mouseoverme</span>
<div class="dropdown-content">
<p>helloword</p>
</div>
</div>
</body>
</html>
Mouseoverme
helloword
포인트
.dropdown:hover .dropdown-content{
display:block;
}
/* positon :absolute; 들의 좌표 기준이 되게 만들기 위해 */전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 5. 25 - 오전 10:50:32</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https:/ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.dropdown{
position: relative; /* 기준 부모 */
display: inline-block;
}
.dropdown-content{
display:none;
position: absolute;;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 9px 8px 16px 0px rgba(0,0,0, 0.2);
z-index: 1;
}
.dropdown-content a{
color:black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover{
background-color: #f1f1f1;
}
.dropbtn{
background-color: #4caf50;
color:white;
padding: 16px;
font-size: 16px;
border:none;
cursor:pointer;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<!-- 11:02 수업 시작 -->
<h3>ex02_02.html Dropdown Menu</h3>
<!-- .dropdown>button.dropbtn+.dropdown-content>a[href="#"]*3>{Link $} -->
<div class="dropdown" style="float: left">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown" style="float:right">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
이미지에 마우스를 대면, 더 큰 이미지를 보여주는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.dropdown{
position:relative;
/* positon :absolute; 들의 좌표 기준이 되게 만들기 위해 */
display: inline-block;
}
.dropdown:hover .dropdown-content{
display:block;
}
.dropdown-content{
display:none;
position: absolute;
right:0;
background-color: #f9f9f9;
min-width:160px;
box-shadow: 0px 8px 16px 0px rbba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color: #f1f1f1;
}
.dropbtn{
background-color: #4caf50;
color:white;
padding:16px;
font-size: 16px;
border:none;
cursor:pointer;}
</style>
</head>
<body>
<div class="dropdown"style="float: left">
<button class="dropbtn">left</button>
<div class="dropdown-content"style="left:0">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</div>
<div class="dropdown"style="float: right;">
<img alt="" src="../images/img_5terre.jpg"style="width: 100px;height: 50px;">
<div class="dropdown-content">
<img alt="" src="../images/img_5terre.jpg"style="width: 300px;height: 150px;">
<div class="desc">이미지설명 </div>
</div>
</div>
</body>
</html>
ex02_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background: #333;
}
li {
float: left;
}
li a, .dropbtn{
color:white;
display: inline-block;
padding:14px 16px;
text-decoration: none;
text-align:center;
}
li a:hover, .dropbtn:hover{
background-color: red';
}
</style>
<style>
li.dropdown{
display: inline-block;
}
/* .dropdown{
li의 float:left때문에 의미 없어져서 주석처리
position: relative;
display: inline-block;
left: 200px;
} */
.dropdown-content{
display:none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
/* 박스의 그림자 효과 */
box-shadow: 0px 8px 16px 0px rgba(0,0,0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown-content a{
display: block;
text-decoration: none;
color:black;
padding: 12px 16px;
text-align: left;
}
.dropdown-content a:hover{
background: #f1f1f1;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown"><a href="#"class="dropbtn">dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div></li>
</ul>
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium voluptatem minus mollitia accusantium incidunt quos obcaecati minima saepe dicta itaque amet soluta eum cupiditate consequatur culpa odio vel debitis nemo.</p>
</body>
</html>
position: absolute 주는 이유
left top을 안주고 저 밑에 주기 위해
'WEB > CSS' 카테고리의 다른 글
| [CSS] 반응형 웹+ 이미지 갤러리 (0) | 2022.05.25 |
|---|---|
| [CSS] 타임라인 (0) | 2022.05.25 |
| [css] nav 열고 닫기 + transition+ js+jquery (0) | 2022.05.25 |
| [CSS] 의사요소 (0) | 2022.05.24 |
| [CSS] 의사클래스 종류 (0) | 2022.05.24 |
'WEB/CSS' Related Articles
more
Comments