Hello I want to create an adapting width to an element on click with following object on hover effect.
This is link to my codepen: https://codepen.io/mintez/pen/RwBayvN
var $blip = $('.blip');
$('#page-nav>a').on('click', function(){
$blip.css({
left: $(this).offset().left
- $(this).parent().offset().left
});
});
a {
display: inline-block;
position: relative;
top: -1px;
padding: 10px 20px;
text-align: center;
line-height: 41px !important;
color: #c3c3c3;
text-decoration: none;
text-shadow: 1px 1px 0px black;
text-transform: uppercase;
font-family: "Myriad Pro", "Calibri", sans-serif;
font-size: 16px;
letter-spacing: 1px;
text-align: center;
}
#page-nav {
height: 100px;
overflow-y: hidden;
position: relative;
}
.block {
display: inline-block;
}
.blip {
position: absolute;
background: rgba(100, 100, 255, 0.4);
width: 100%;
display: inline-block;
max-width: 100%;
height: 100%;
top: 0%;
transition: left 0.5s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<nav id="page-nav">
<a href="#">item #1
<span class="blip"></span></a>
<a href="#">item #2</a>
<a href="#">item njkkjhoihnikhihi #3</a>
<!-- etcetera -->
</nav>
2
Answers
To make the following object bigger or smaller you can use event.currentTarget.offsetWidth
To add to Flurig‘s answer, the span tag is inside the first anchor tag so it renders improperly when setting the width. See below: