다른 명령
새 문서: == 탑다운 메뉴 샘플 == <source lang=html> <!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: rela... |
편집 요약 없음 |
||
| 111번째 줄: | 111번째 줄: | ||
</html> | </html> | ||
</source> | </source> | ||
[[category:html 탑다운 메뉴]] | |||
2025년 5월 20일 (화) 06:59 기준 최신판
탑다운 메뉴 샘플
<!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>