Adapting the width to the element - menu hover effect with object that follows-CodePudding

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 ></span></a>
  <a href="#">item #2</a>
  <a href="#">item njkkjhoihnikhihi #3</a>
  <!-- etcetera -->
</nav>

CodePudding user response：

To make the following object bigger or smaller you can use event.currentTarget.offsetWidth

var $blip = $('.blip');

$('#page-nav>a').on('click', function(event){
  console.log(event.currentTarget.offsetWidth);
  $blip.css({
    left: $(this).offset().left 
    - $(this).parent().offset().left,
    width: `${event.currentTarget.offsetWidth}px`,
  });
});

CodePudding user response：

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:

var $blip = $('.blip');

$('#page-nav>a').on('click', function(){
  $blip.css({
    left: $(this).offset().left 
    - $(this).parent().offset().left, 
    width: `${event.currentTarget.offsetWidth}px`
  });
});

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: 0;
  display: inline-block;
  max-width: 100%;
  height: 4rem;
  top: 0%;
  transition: left 0.5s ease-in-out, width 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">
  <span ></span>
  <a href="#">item #1</a>
  <a href="#">item #2</a>
  <a href="#">item njkkjhoihnikhihi #3</a>
  <!-- etcetera -->
</nav>