Scribd
Upload
10 views3 pages

Navbar

Uploaded by

crazy bhl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views3 pages

Navbar

Uploaded by

crazy bhl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML

<!-- navigation bar -->


<div class="nav-wrapper">
<div class="logo">
<a href="accueil.html"><img src="./img/logo.png" alt=""></a>
</div>
<ul class="nav-ul">
<a href="accueil.html" class="nav-link"><li class="nav-item
active">Accueil</li></a>
<a href="activites.html" class="nav-link"><li class="nav-
item">Activites</li></a>
<a href="#"><li class="nav-item">Témoignages</li></a>
<a href="#"><li class="nav-item">Équipe</li></a>
<a href="#"><li class="nav-item">Contact</li></a>
<a href="#"><li class="nav-item">S'inscrire</li></a>
<div class="indicator"></div>
</ul>
<div class="account-img">
<img src="./img/acc.jpg" alt="">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const indicator = document.querySelector('.indicator');
const navItems = document.querySelectorAll('.nav-item');
const activeItem = document.querySelector('.nav-item.active');

function updateIndicatorPosition(item) {
const itemRect = item.getBoundingClientRect();
const ulRect = document.querySelector('.nav-
ul').getBoundingClientRect();

indicator.style.width = `${itemRect.width}px`;
indicator.style.left = `${itemRect.left - ulRect.left}px`;
}
updateIndicatorPosition(activeItem);
navItems.forEach(item => {
item.addEventListener('click', () => {
document.querySelector('.nav-
item.active').classList.remove('active');
item.classList.add('active');
updateIndicatorPosition(item);
});
});
window.addEventListener('resize', () => {
const currentActive = document.querySelector('.nav-item.active');
updateIndicatorPosition(currentActive);
});
});
</script>
<!-- end navigation bar -->

CSS
/* NAVBAR */
.nav-wrapper {
background-color: #7BC9FF;
width: 91vw;
height: 11vh;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vw;
color: aliceblue; /* Default color for text */
}

.nav-wrapper:hover {
scale: 102%;
}

.logo {
width: 8vw;
height: auto;
margin-top: 1.8vh;
cursor: pointer;
}

.logo img {
width: 100%;
height: auto;
margin-top: 1vh;
}

.nav-ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
position: relative;
}

.nav-ul li {
transition: transform 0.3s ease;
}

.nav-ul li:hover {
transform: translateY(-1vh);
}

.nav-item {
position: relative;
padding: 10px;
cursor: pointer;
}

/* Link styles */
.nav-ul a {
text-decoration: none; /* Remove underline */
color: inherit; /* Ensure link color inherits from nav-item */
}
.account-img {
width: 3.4vw;
height: 7vh;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.account-img img {
width: 100%;
height: auto;
}

.indicator {
position: absolute;
height: 5px;
background-color: #FF6F61;
border-radius: 10px;
bottom: 0;
transition: all 0.3s ease;
}
/* END NAVBAR */

You might also like