Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 드롭다운 메뉴

오늘날 드롭다운 메뉴는 대부분의 최신 웹사이트에서 흔히 볼 수 있는 기능입니다. 이 메뉴를 사용하면 사용자가 웹사이트에서 원하는 콘텐츠를 쉽게 찾을 수 있도록 보다 맞춤화된 탐색 기능을 만들 수 있습니다.

HTML 외에 CSS를 사용하여 사용자가 드롭다운의 메뉴 레이블 위로 마우스를 가져갈 때만 콘텐츠를 표시하는 드롭다운 메뉴를 만들 수 있습니다.

이 자습서에서는 CSS에서 드롭다운 메뉴를 만드는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽고 나면 자신만의 드롭다운 메뉴를 만드는 데 필요한 도구와 코드를 갖게 될 것입니다.

CSS 드롭다운 메뉴

HTML에는 드롭다운 메뉴를 만들기 위한 특정 태그가 없습니다.

그러나 CSS를 사용하면 사용자가 메뉴 위로 마우스를 가져갈 때 텍스트나 링크 목록을 표시하는 메뉴를 만들 수 있습니다. 따라서 이 자습서에서는 HTML과 CSS를 모두 활용하여 드롭다운 메뉴를 만들 것입니다.

지역 배드민턴 클럽에서 온라인으로 클럽 정보를 공유할 수 있는 웹사이트를 만들 것을 요청했습니다. 이 웹사이트에는 클럽, 연혁 및 가입 방법에 대한 여러 페이지가 포함되어 있습니다.

클럽에서 사용자가 메뉴 위로 마우스를 가져갈 때 실행되는 드롭다운 메뉴를 만들 수 있는지 문의했습니다. 이 메뉴에는 장비, 시작하기 및 회원 정보의 세 페이지 목록이 표시되어야 합니다. 이 메뉴의 레이블은 "신규 회원"이어야 합니다.

드롭다운 메뉴 예시

CSS에서 이 드롭다운 메뉴를 만드는 방법을 살펴보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

드롭다운 메뉴를 만들기 위해 먼저 HTML로 기본 메뉴를 만듭니다. 다음 코드를 사용하여 수행할 수 있습니다.

<div class="menu">
	<button class="dropdown_button">New Members</button>
	<div class="content">
		<a href="equipment.html">Equipment</a>
		<a href="gettingstarted.html">Getting Started</a>
		<a href="membership.html">Membership Information</a>
	</div>
</div>

우리 코드에는 다음이 있습니다.

코드는 다음을 반환합니다.

CSS 드롭다운 메뉴

지금까지 드롭다운 메뉴에 스타일을 추가하지 않았으므로 일반 HTML로 표시됩니다. 다음은 배드민턴 클럽 웹사이트의 드롭다운 메뉴 스타일을 지정하는 데 사용할 코드입니다.

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

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

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

코드는 다음을 반환합니다.

[Code result here]

코드가 어떻게 작동하는지 분석해 보겠습니다.

dropdown_button class 드롭다운 버튼의 스타일을 지정하는 데 사용됩니다. 코드에서 버튼의 배경색을 연한 녹색으로 설정하고, 버튼의 텍스트 색상을 흰색으로 변경하고, 버튼 주위에 10px 패딩을 추가하고, 버튼의 글꼴 크기를 15px로 설정하고, 주변의 테두리를 제거합니다. 버튼.

콘텐츠 클래스는 드롭다운 메뉴의 콘텐츠 스타일을 저장합니다. 이 클래스는 기본적으로 숨겨져 있으며(디스플레이:없음 사용) 밝은 회색 배경을 가지고 있습니다. 또한 콘텐츠 클래스를 사용하는 요소의 최소 너비는 150px이며 요소는 절대 위치에 있습니다. 콘텐츠 클래스의 x-색인도 1이므로 웹 페이지의 다른 모든 요소 위에 표시됩니다.

menu 클래스는 전체 메뉴의 스타일을 저장합니다. 코드에서 <div class=”menu”>의 내용을 배치합니다. 웹 페이지의 다른 요소에 상대적인 태그입니다. 또한 요소를 인라인 블록 컨테이너로 표시하는 인라인 블록 스타일을 사용하여 메뉴를 표시합니다.

.content 스타일은 드롭다운 메뉴에서 링크의 스타일을 지정하는 데 사용됩니다. 이 스타일은 링크에서 모든 밑줄을 제거하고(text-decoration:none; 사용), 각 링크를 블록 스타일로 표시하고, 각 링크의 색상을 검정색으로 설정하고, 각 링크 주변의 패딩을 16px로 설정합니다.

코드 끝에서 .content a:hover 규칙을 사용하여 사용자가 커서를 사용하여 드롭다운 메뉴의 링크 위로 마우스를 가져갈 때 어떤 일이 발생해야 하는지 정의합니다. 이 경우 사용자가 메뉴의 링크 위로 마우스를 가져가면 링크의 배경색이 밝은 회색(#f7f7f7)으로 변경됩니다.

또한 사용자가 메뉴 위로 마우스를 가져갈 때 메뉴의 내용을 블록으로 표시하는 규칙 .menu:hover .content를 지정했습니다.

CSS :hover 선택기의 작동 방식에 대해 더 자세히 알고 싶다면 CSS :hover 선택기 가이드를 읽어보세요.

오른쪽 드롭다운 메뉴

위의 예에서는 화면 왼쪽에 표시되는 HTML 및 CSS를 사용하여 드롭다운 메뉴를 만들었습니다. 그러나 드롭다운 메뉴가 화면 오른쪽에 나타나도록 결정할 수 있습니다.

이렇게 하려면 위의 코드에 다음 CSS 규칙을 적용하면 됩니다.

.content {
	right: 0;
}

이 규칙은 드롭다운과 그 내용을 화면 오른쪽으로 이동합니다.

결론

HTML은 드롭다운 메뉴의 기본 구조를 만드는 데 사용할 수 있습니다. 그런 다음 CSS를 사용하여 스타일을 적용하여 완벽하고 미적으로 만족스러운 드롭다운 메뉴를 만들 수 있습니다.

이 자습서에서는 예제를 참조하여 HTML 및 CSS를 사용하여 드롭다운 메뉴를 만드는 방법에 대해 설명했습니다. 이 기사에서 논의한 코드를 사용하여 HTML 및 CSS로 자신만의 드롭다운 메뉴를 만들 수 있습니다.