다연이네

[days03] dropdown 본문

Web/CSS

[days03] dropdown

　다연　 2020. 12. 7. 22:30
반응형

 

특정 부분에 마우스를 올리면 창이 새로 뜨는 것

(ex. 실시간 검색어)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
 .dropdown{
 position: relative;/* 크게 달라지는 건 없으나 보통 부모를 relative 로 잡는다 */
 display: inline-block;
 }
 
 .dropdown-content{
 	background: #f9f9f9;
 	min-width: 160px;
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0, 0.2);
 	padding: 12px 16px;
 	
 	display:none;
 	
 	position: absolute; /* 만약 position을 absolute 안주면 박스가 뜰 때 다른 글자들이 밑으로 밀림 */
 	z-index: 1; 
 }
 
 .dropdown:hover .dropdown-content{
 	display: block;
 }
</style>
</head>
<body>
<!-- css dropdown -->

<div class="dropdown">
	<span>Mouse over me</span>
	<div class="dropdown-content">
		<p>Hello World</p>
	</div>
</div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Blanditiis natus sequi quibusdam reprehenderit?</p>
<p>Similique vero explicabo repudiandae nam.</p>
<p>Voluptatum voluptatem maxime corporis eveniet!</p>
<p>Illum incidunt voluptates inventore repellat.</p>
<p>Tenetur perspiciatis dolorum nemo nostrum?</p>
<p>Perspiciatis commodi culpa temporibus numquam.</p>
<p>Eaque vel iure et hic.</p>
<p>Voluptatem harum error repellat est.</p>
<p>Enim doloremque accusamus beatae repudiandae.</p>
</body>
</html>

 

 

사진에 마우스를 올리면 다른 사진이 뜨게도 할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	.dropdown{
		position: relative;
		display: inline-block;
	}
	.dropdown-content{
		display: none;
		position: absolute;
		z-index: 1;
		background: #f9f9f9;
		min-width: 160px;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	}
	
.dropdown:hover .dropdown-content{
	display: block;
}

.desc{
	padding: 15px;
	text-align: center;
}

</style>
</head>
<body>
	<h3>dropdown image</h3>
	
<!-- 	.dropdown>img+.dropdown-content+.desc -->
<div class="dropdown">
	<img src="../images/img_5terre.jpg" style="width: 100px; height: 50px;" />
	<div class="dropdown-content">
	<img src="../images/img_5terre.jpg" style="width: 300px; height: 200px;" />
	<div class="desc">이미지 desc</div>
	</div>
</div>
</body>
</html>

 

 

버튼을 만들어 리스트가 뜨도록 할 수 도 있다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
	.dropbtn{ /* left right 버튼들 */
		background: #4CAF50;
		color: white;
		padding: 16px;
		font-size: 16px;
		border: none;
		cursor: pointer;
	}
	
	.dropdown{
		position: relative;
		display: inline-block;
	}
	
	.dropdown-content{
		 display: none; 
		position: absolute;
		right: 0;
		background: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}
	
.dropdown-content a{
	text-decoration: none;
	color: black;
	padding: 12px 16px;
	display: block;		
}
.dropdown-content a:hover{
	background: #f1f1f1;
} 
.dropdown:hover .dropdown-content{
	display: block;
} 
.dropdown:hover .dropbtn{
	background: #3e8e41;
} 
</style>

</head>
<body>
<!-- .dropdown>button.dropbtn+.dropdown-content>a*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>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque autem accusamus iusto labore optio est inventore maxime itaque sequi eos dignissimos alias deleniti numquam sed asperiores velit fugiat id corporis.</p>
 <p>Sed ab sunt alias rem architecto laudantium obcaecati voluptatem doloribus ut a tempora veniam officia quibusdam quidem placeat velit facere minus maxime consequuntur culpa nobis! Omnis voluptatem maiores voluptas nostrum.</p>
 <p>Accusantium vitae explicabo assumenda suscipit doloribus commodi repellendus harum labore laudantium debitis sunt quia quod sint tempora eligendi perferendis non voluptates quaerat rerum quasi saepe dicta magni illo in quisquam.</p>
 <p>Qui illo consequatur magnam eius distinctio laborum expedita nostrum dolorem natus ut rem officia aperiam voluptatum eveniet libero quod fugiat maiores amet suscipit voluptas corrupti ipsam cum nihil veniam voluptatem?</p>
 <p>Ut pariatur ratione tempora illo eos nemo unde culpa totam. Laborum quod fugit reprehenderit eveniet soluta consectetur quidem similique blanditiis accusamus placeat quasi repellendus illo corrupti eligendi possimus quam magni.</p>
 <p>Consequuntur ea eos incidunt perferendis modi perspiciatis totam quisquam maxime rerum nam nihil quos harum commodi quaerat tenetur enim tempora natus fugiat. Dicta ut iste adipisci dignissimos odio nesciunt delectus.</p>
 <p>Accusamus tempore eos aliquam laudantium nihil hic minima facere ipsum provident labore cumque accusantium debitis porro ad esse quisquam sunt consequuntur beatae neque quia repellendus amet aliquid ipsa assumenda culpa!</p>
 <p>Possimus enim nisi repellat eos magnam labore distinctio voluptates doloribus voluptate necessitatibus dolore delectus optio quasi ea nostrum sit modi ab minima recusandae adipisci fugiat eveniet expedita accusamus officia tenetur.</p>
</body>
</html>

 

 

메뉴바로부터 리스트 내려오게 하기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>

ul{
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	background: #333;
}

ul li {
	float: left;
}

li a, .dropbtn{
	color: white;
	display: inline-block;
	padding: 14px 16px;
	text-decoration: none;
	text-align: center;
}


li a:hover, .dropdown:hover {
	background: red;
}


li .dropdown{
		display: inline-block;
		position: relative;
}
	
.dropdown-content{
		position: absolute;
		background: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		
		display: none; 

}
	
.dropdown-content a{
	display: block;
	text-decoration: none;
	color: black;
	padding: 12px 16px;
	text-align: left;
}


.dropdown-content a:hover {
	background: #f1f1f1;
} 

.dropdown:hover .dropdown-content {
	display: block;
}

</style>

</head>
<body>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" 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>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>


</body>
</html>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days04] 반응형 이미지 갤러리 - 수정필요  (0) 2020.12.08
[days03] 타임라인 - 분석해보기  (0) 2020.12.07
[days03] 메뉴바 여닫기  (0) 2020.12.07
[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터  (0) 2020.12.07
[days03] :의사 클래스 - 특수 상태를 정의하는 클래스  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments