Меню навигации
В редакторе
Меню навигации
Brain_Script
56
2024-08-19 17:08:57
<div class="nav-container">
<nav class="nav-bar">
<a href="#home" class="nav-item">Home</a>
<div class="dropdown">
<a href="#about" class="nav-item">About Us <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#company">Our Company</a>
<a href="#team">Our Team</a>
<a href="#mission">Our Mission</a>
</div>
</div>
<div class="dropdown">
<a href="#services" class="nav-item">Services <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#service1">Inner Section Number One</a>
<a href="#service2">Inner Section Number Two</a>
<a href="#service3">Inner Section Number Three</a>
</div>
</div>
<div class="dropdown">
<a href="#products" class="nav-item">Products <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#product1">Product Category 1</a>
<a href="#product2">Product Category 2</a>
<a href="#product3">Product Category 3</a>
</div>
</div>
<a href="#clients" class="nav-item">Clients</a>
<a href="#blog" class="nav-item">Blog</a>
<a href="#contact" class="nav-item">Contact</a>
</nav>
</div>
<br><br>
<div class="nav-container">
<nav class="nav-bar dark">
<a href="#home" class="nav-item">Home</a>
<div class="dropdown">
<a href="#about" class="nav-item">About Us <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#company">Our Company</a>
<a href="#team">Our Team</a>
<a href="#mission">Our Mission</a>
</div>
</div>
<div class="dropdown">
<a href="#services" class="nav-item">Services <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#service1">Inner Section Number One</a>
<a href="#service2">Inner Section Number Two</a>
<a href="#service3">Inner Section Number Three</a>
</div>
</div>
<div class="dropdown">
<a href="#products" class="nav-item">Products <span class="dropdown-arrow">▼</span></a>
<div class="dropdown-content">
<a href="#product1">Product Category 1</a>
<a href="#product2">Product Category 2</a>
<a href="#product3">Product Category 3</a>
</div>
</div>
<a href="#clients" class="nav-item">Clients</a>
<a href="#blog" class="nav-item">Blog</a>
<a href="#contact" class="nav-item">Contact</a>
</nav>
</div>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.nav-container {
max-width: 800px;
margin: 0 auto;
}
.nav-bar {
background: linear-gradient(to bottom, #ffffff, #e0e0e0);
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: visible;
position: relative;
}
.nav-bar.dark {
background: linear-gradient(to bottom, #333333, #1a1a1a);
}
.nav-item {
display: inline-block;
padding: 10px 20px;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease;
}
.nav-bar.dark .nav-item {
color: #fff;
}
.nav-item:hover {
background-color: rgba(0,0,0,0.1);
}
.nav-bar.dark .nav-item:hover {
background-color: rgba(255,255,255,0.1);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0 0 5px 5px;
top: 100%;
left: 0;
transition: all 0.3s ease-in-out;
transform: translateY(-10px);
pointer-events: none;
}
.nav-bar.dark .dropdown-content {
background-color: #2a2a2a;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-bar.dark .dropdown-content a {
color: #fff;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.nav-bar.dark .dropdown-content a:hover {
background-color: #3a3a3a;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.active-item {
background-color: rgba(0,0,0,0.1);
}
.nav-bar.dark .active-item {
background-color: rgba(255,255,255,0.1);
}
.dropdown-arrow {
display: inline-block;
margin-left: 5px;
transition: transform 0.3s ease;
font-size: 0.7em;
line-height: 1;
}
.dropdown:hover .dropdown-arrow {
transform: rotate(180deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function(e) {
if (this.parentNode.classList.contains('dropdown')) {
e.preventDefault();
}
navItems.forEach(i => i.classList.remove('active-item'));
this.classList.add('active-item');
});
});
});
</script>
Войдите для добавления комментария.