== 탑메뉴 만들기 ==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top Menu Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.top-menu {
display: flex;
justify-content: flex-end;
background-color: #2c3e50;
padding: 10px 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu-group {
position: relative;
margin-left: 20px;
}
.menu-link {
color: #ecf0f1;
font-size: 16px;
text-decoration: none;
padding: 8px;
display: inline-block;
}
.menu-link:hover {
background-color: #34495e;
border-radius: 5px;
}
.dropdown {
display: none;
position: absolute;
right: 0;
top: 40px;
background-color: #fff;
border: 1px solid #ccc;
min-width: 150px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown a {
display: block;
padding: 10px;
color: #2c3e50;
text-decoration: none;
}
.dropdown a:hover {
background-color: #f1f1f1;
}
.menu-group:hover .dropdown {
display: block;
}
.main {
margin-top: 60px;
padding: 20px;
}
</style>
</head>
<body>
<div class="top-menu">
<div class="menu-group">
<a class="menu-link" href="#">User ▾</a>
<div class="dropdown">
<a href="/login.html">Login</a>
<a href="/register.html">Register</a>
<a href="/profile.html">Profile</a>
</div>
</div>
<div class="menu-group">
<a class="menu-link" href="#">Settings ▾</a>
<div class="dropdown">
<a href="/preferences.html">Preferences</a>
<a href="/notifications.html">Notifications</a>
<a href="/privacy.html">Privacy</a>
</div>
</div>
<div class="menu-group">
<a class="menu-link" href="#">Help ▾</a>
<div class="dropdown">
<a href="/docs.html">Documentation</a>
<a href="/support.html">Support</a>
</div>
</div>
</div>
<div class="main">
<h1>Welcome</h1>
<p>This is your main content area. The top menu stays fixed at the top.</p>
</div>
</body>
</html>
탑메뉴 + 접히는 사이드 바
<!DOCTYPE html>
<html>
<head>
<title>Top Menu (Sub-menu) & 접히는 메뉴 Sidebar</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
display: flex;
}
/* Top Menu 스타일 */
.top-menu {
background-color: #333;
color: white;
padding: 15px;
display: flex;
justify-content: space-around; /* 3개 메뉴 균등 배치 */
align-items: center;
width: 100%;
position: fixed;
top: 0;
z-index: 100;
}
.top-menu-item {
position: relative;
}
.top-menu-link {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.top-menu-link:hover {
background-color: #555;
}
.sub-menu {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
position: absolute;
top: 100%;
left: 0;
width: 150px;
border: 1px solid #555;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
display: none; /* 초기 숨김 */
z-index: 101;
}
.top-menu-item:hover .sub-menu {
display: block; /* 호버 시 표시 */
}
.sub-menu li a {
color: white;
padding: 10px 15px;
text-decoration: none;
display: block;
}
.sub-menu li a:hover {
background-color: #666;
}
.toggle-button {
background: none;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
padding: 5px 10px;
position: absolute;
left: 10px; /* 왼쪽 상단에 위치 */
top: 15px;
}
.top-menu-title {
font-size: 1.5em;
margin: 0 auto; /* 가운데 정렬 */
}
/* Sidebar 스타일 */
.sidebar {
background-color: #f4f4f4;
width: 250px;
height: 100vh;
position: fixed;
top: 60px; /* Top menu 높이만큼 아래로 */
left: 0;
overflow-x: hidden;
padding-top: 20px;
transition: 0.3s;
}
.sidebar.collapsed {
width: 0;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu-item {
border-bottom: 1px solid #ddd;
}
.sidebar-menu-item:last-child {
border-bottom: none;
}
.sidebar-menu-link {
display: block;
padding: 15px 25px;
text-decoration: none;
color: #333;
transition: 0.3s;
}
.sidebar-menu-link:hover {
background-color: #ddd;
}
/* Content 스타일 */
.content {
flex-grow: 1;
padding: 20px;
margin-top: 60px; /* Top menu 높이만큼 아래로 */
margin-left: 250px; /* Sidebar 기본 너비만큼 오른쪽으로 */
transition: margin-left 0.3s;
}
.content.collapsed {
margin-left: 0;
}
</style>
</head>
<body>
<div class="top-menu">
<button class="toggle-button" onclick="toggleSidebar()">☰</button>
<h1 class="top-menu-title">나의 웹사이트</h1>
<div class="top-menu-item">
<a href="#" class="top-menu-link">메뉴 1</a>
<ul class="sub-menu">
<li><a href="#">서브 메뉴 1-1</a></li>
<li><a href="#">서브 메뉴 1-2</a></li>
</ul>
</div>
<div class="top-menu-item">
<a href="#" class="top-menu-link">메뉴 2</a>
<ul class="sub-menu">
<li><a href="#">서브 메뉴 2-1</a></li>
<li><a href="#">서브 메뉴 2-2</a></li>
<li><a href="#">서브 메뉴 2-3</a></li>
</ul>
</div>
<div class="top-menu-item">
<a href="#" class="top-menu-link">메뉴 3</a>
<ul class="sub-menu">
<li><a href="#">서브 메뉴 3-1</a></li>
</ul>
</div>
</div>
<div class="sidebar" id="sidebar">
<ul class="sidebar-menu">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-link">메뉴 A</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-link">메뉴 B</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-link">메뉴 C</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-link">메뉴 D</a>
</li>
</ul>
</div>
<div class="content" id="content">
<h2>본문 내용</h2>
<p>이곳은 실제 웹사이트의 내용이 표시될 영역입니다. 왼쪽 사이드바를 접거나 펼쳐서 레이아웃 변화를 확인할 수 있습니다.</p>
<p>추가적인 내용...</p>
</div>
<script>
function toggleSidebar() {
const sidebar = document.getElementById("sidebar");
const content = document.getElementById("content");
sidebar.classList.toggle("collapsed");
content.classList.toggle("collapsed");
}
</script>
</body>
</html>
