Navbar Menu
Wiki topics:
🌐 · Web Development
Navbar Menu
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Navbar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8fafc;
}
.navbar {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 70px;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
color: #1a202c;
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #48bb78, #38a169);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-weight: bold;
color: white;
font-size: 18px;
}
.logo-text {
font-size: 24px;
font-weight: 600;
color: #2d3748;
}
.nav-menu {
display: flex;
list-style: none;
align-items: center;
gap: 8px;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
padding: 8px 16px;
text-decoration: none;
color: #4a5568;
font-weight: 500;
font-size: 16px;
border-radius: 6px;
transition: all 0.2s ease;
cursor: pointer;
}
.nav-link:hover {
background-color: #f7fafc;
color: #2d3748;
}
.nav-link.active {
background-color: #ebf8ff;
color: #3182ce;
}
.dropdown-arrow {
margin-left: 4px;
transition: transform 0.2s ease;
font-size: 12px;
}
.nav-item:hover .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
padding: 16px;
min-width: 500px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
margin-top: 8px;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content {
display: flex;
gap: 40px;
}
.dropdown-section h3 {
font-size: 12px;
font-weight: 600;
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.dropdown-item {
display: flex;
align-items: flex-start;
padding: 12px;
border-radius: 8px;
text-decoration: none;
color: #2d3748;
transition: background-color 0.2s ease;
margin-bottom: 4px;
}
.dropdown-item:hover {
background-color: #f7fafc;
}
.dropdown-icon {
width: 20px;
height: 20px;
margin-right: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.dropdown-text h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
color: #2d3748;
}
.dropdown-text p {
font-size: 13px;
color: #718096;
line-height: 1.4;
}
.plans-link {
background-color: #3182ce;
color: white !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
}
.plans-link:hover {
background-color: #2c5aa0;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #4a5568;
}
@media (max-width: 768px) {
.nav-menu {
display: none;
}
.mobile-menu-btn {
display: block;
}
}
/* Product dropdown özel stili */
.product-dropdown {
min-width: 600px;
}
.product-dropdown .dropdown-content {
gap: 32px;
}
.product-section {
flex: 1;
}
.tools-section {
flex: 1;
}
.learn-more {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.learn-more-link {
display: inline-flex;
align-items: center;
color: #3182ce;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.learn-more-link:hover {
color: #2c5aa0;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">
<div class="logo-icon">S</div>
<span class="logo-text">LOGO</span>
</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">
Product
<span class="dropdown-arrow">▼</span>
</a>
<div class="dropdown product-dropdown">
<div class="dropdown-content">
<div class="dropdown-section product-section">
<h3>Product</h3>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<div class="dropdown-text">
<h4>Recognition</h4>
<p>Easy but meaningful employee recognition</p>
</div>
</a>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 9V5a3 3 0 0 0-6 0v4"></path>
<rect x="2" y="9" width="20" height="12" rx="2" ry="2"></rect>
</svg>
<div class="dropdown-text">
<h4>Rewards & Incentives</h4>
<p>Redeem points for awesome rewards</p>
</div>
</a>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
<div class="dropdown-text">
<h4>Performance</h4>
<p>Manager tools that enable performance</p>
</div>
</a>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<div class="dropdown-text">
<h4>Celebrations</h4>
<p>Automated employee milestones</p>
</div>
</a>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<div class="dropdown-text">
<h4>Nominations & Awards</h4>
<p>Awards to motivate teams</p>
</div>
</a>
<a href="#" class="dropdown-item">
<svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="9" cy="9" r="2"></circle>
<path d="M21 15.5c-.3-1.5-1.7-2.5-3.5-2.5s-3.2 1-3.5 2.5"></path>
</svg>
<div class="dropdown-text">
<h4>Announcements</h4>
<p>Employee communication that stands out</p>
</div>
</a>
</div>
<div class="dropdown-section tools-section">
<h3>Tools & Insights</h3>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Integrations</h4>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>People Analytics</h4>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Manager Analytics</h4>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Microsoft Teams</h4>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Slack</h4>
</div>
</a>
</div>
</div>
<div class="learn-more">
<a href="#" class="learn-more-link">
Why→
</a>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Solutions
<span class="dropdown-arrow">▼</span>
</a>
<div class="dropdown">
<div class="dropdown-content">
<div class="dropdown-section">
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Small Teams</h4>
<p>Perfect for growing companies</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Enterprise</h4>
<p>Advanced features for large organizations</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Remote Teams</h4>
<p>Build culture across distances</p>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Resources
<span class="dropdown-arrow">▼</span>
</a>
<div class="dropdown">
<div class="dropdown-content">
<div class="dropdown-section">
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Blog</h4>
<p>Latest insights and tips</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Help Center</h4>
<p>Get support when you need it</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Case Studies</h4>
<p>See how others succeed</p>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Company
<span class="dropdown-arrow">▼</span>
</a>
<div class="dropdown">
<div class="dropdown-content">
<div class="dropdown-section">
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>About Us</h4>
<p>Our mission and values</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Careers</h4>
<p>Join our team</p>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-text">
<h4>Contact</h4>
<p>Get in touch</p>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link plans-link">Plans</a>
</li>
</ul>
<button class="mobile-menu-btn">☰</button>
</div>
</nav>
<script>
// Dropdown etkileşimleri için JavaScript
document.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
const dropdown = item.querySelector('.dropdown');
let timeoutId;
if (dropdown) {
item.addEventListener('mouseenter', () => {
clearTimeout(timeoutId);
dropdown.style.opacity = '1';
dropdown.style.visibility = 'visible';
dropdown.style.transform = 'translateY(0)';
});
item.addEventListener('mouseleave', () => {
timeoutId = setTimeout(() => {
dropdown.style.opacity = '0';
dropdown.style.visibility = 'hidden';
dropdown.style.transform = 'translateY(-10px)';
}, 100);
});
}
});
});
</script>
</body>
</html>메타데이터
- post_id
- 1563d042b1ff
- slug
- navbar-menu-1563d042b1ff
- url
- https://medium.com/@suat/navbar-menu-1563d042b1ff
- canonical_url
- https://medium.com/@suat/navbar-menu-1563d042b1ff
- author_url
- https://medium.com/@suat
- status
- ok
- fetched_at
- 2026-07-18 13:02:20
