Currently, I've been diving into creating a navbar and wrestling with some jQuery code that was passed my way.
I'll be sharing my code below, along with a Codepen link (https://codepen.io/JustNayWillo/pen/aXpKbb) for a better understanding of the situation.
HTML:
<div id="navbar">
<li class="tab">
<a class="link active" href="#home">
<div class="text">Home</div>
</a></li>
<li class="tab">
<a class="link" href="#work">
<div class="text">Work</div>
</a></li>
<li class="tab">
<a class="link" href="#about">
<div class="text">About</div>
</a></li>
</div>
CSS:
#navbar {
position: absolute;
text-align: right;
top: 3.5em;
right: 3.5em;
z-index: 2;
list-style-type: none;
}
.tab {
background-color: white;
opacity: 0.3;
height: 3.5em;
width: 0.2em;
margin-bottom: 1em;
}
.active, .tab:hover {
opacity:1;
transition:0.7s ease;
}
.active, .link:hover {
opacity:1;
transition:0.7s ease;
}
.active, .text:hover {
opacity:1;
transition:0.7s ease;
}
JS / jQuery:
$(function() {
var links = $('.tab > .link');
links.on('click', function() {
links.closest('.tab').removeClass('active');
$(this).closest('.tab').addClass('active');
});
});
All is functioning properly, but there are a couple of hiccups. The navigation doesn't begin with an active class - I'd prefer 'Home' to be initially active. Additionally, the text only remains visible on hover, as opposed to staying at opacity: 1 when active.
Appreciate your help!