모바일 네비게이션을 만들기 위한 2가지 예제를 제공하겠습니다. 각 예제는 HTML 내에 CSS 코드로 구성되어 있습니다.
예제 1: 간단한 드롭다운 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 스타일 직접 정의 */
.mobile-nav {
background-color: #333;
color: #fff;
padding: 10px;
}
.menu-button {
background-color: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.menu-list {
list-style: none;
padding: 0;
display: none;
}
.menu-list li {
margin: 5px 0;
}
.menu-list a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
/* 모바일 화면에서 메뉴 버튼 클릭 시 메뉴 표시 */
@media screen and (max-width: 768px) {
.menu-button {
display: block;
}
.menu-list {
display: block;
}
}
</style>
<title>간단한 모바일 네비게이션</title>
</head>
<body>
<nav class="mobile-nav">
<button class="menu-button">메뉴</button>
<ul class="menu-list">
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">연락</a></li>
</ul>
</nav>
</body>
</html>
이 예제는 간단한 드롭다운 메뉴를 만드는 방법을 보여줍니다. 메뉴 버튼을 클릭하면 메뉴 항목이 나타납니다.
예제 2: 슬라이드 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 스타일 직접 정의 */
.mobile-nav {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-button {
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
}
.bar {
width: 30px;
height: 3px;
background-color: #fff;
margin: 3px 0;
}
.menu-list {
list-style: none;
padding: 0;
display: none;
}
.menu-list li {
margin: 5px 0;
}
.menu-list a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
/* 모바일 화면에서 메뉴 버튼 클릭 시 메뉴 표시 */
@media screen and (max-width: 768px) {
.menu-button {
display: block;
}
.menu-list {
display: block;
}
}
</style>
<title>슬라이드 모바일 네비게이션</title>
</head>
<body>
<div class="mobile-nav">
<div class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul class="menu-list">
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">연락</a></li>
</ul>
</div>
</body>
</html>
이 예제는 슬라이드 메뉴를 만드는 방법을 보여줍니다. 메뉴 버튼을 클릭하면 메뉴 항목이 슬라이드로 표시됩니다.
'CSS' 카테고리의 다른 글
| 스크롤바 커스터마이징: 스크롤바 스타일 커스터마이징. (0) | 2023.12.23 |
|---|---|
| 투명 버튼: 투명한 배경을 가진 버튼 디자인. (0) | 2023.12.23 |
| 다중 열 텍스트: 다중 열 텍스트 레이아웃 구현. (0) | 2023.12.23 |
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
