как сделать так, чтобы пункт меню сдвигался вправо и добавлял строку при нажатии?

Question

Попытка расположить строку справа от слова, когда оно не выделено, а новая строка с левой стороны выдвигается, выдвигая текст и удаляя правую строку.

Это - это то, что я пытаюсь скопировать

• если вы щелкните меню на этом сайте и выберите пункт меню, вы увидите левую строку

https://codepen.io/mattmcgilton/pen/bGEgWgQ

<nav class="col-12 primary__nav">
  <ul id="Primary" class="menu">
    <li id="menu-item-58" class="menu-item">
      <a href="#" aria-current="page">Home —</a></li> 
      <!--The right side line to slide away, and a new line on the left side to slide out when clicked-->
    <li id="menu-item-106" class="menu-item">
      <a href="#">Our Projects —</a>
    </li>
    <li id="menu-item-59" class="menu-item">
      <a href="#">— About Us</a> <!--slides out from the left and appears like this when clicked-->
    </li>
    <li id="menu-item-112" class="menu-item">
      <a href="#">News  —</a>
    </li>
    <li id="menu-item-157" class="menu-item">
      <a href="#">Contact —</a>
    </li>
  </ul>                
</nav>

Answer 1

Взгляните на этот код, если вы хотите, чтобы он нажимался, вам нужно добавить отдельный класс instad :hover в моем примере.

Я использую оболочку для ссылок вашего меню и до и после псевдоэлементов для строк, а также css переход для эффекта.

[EDIT]

Здесь скрипт с onclick

.menu li{
  list-style: none;
}

.menu a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}

.menu .menu-link-wrapper{
  position: relative;
  transition: all 5s;
}

.menu .menu-link-wrapper::before{
  width: 50px;
  height: 10px;
  border-bottom: solid thin black;
  content: "";
  display: inline-block;
  transition: all 0.5s;
  vertical-align: top;
}

.menu .menu-link-wrapper::after{
  width: 0;
  height: 10px;
  border-bottom: solid thin black;
  content: "";
  display: inline-block;
  transition: all 0.5s;
  vertical-align: top;
}

.menu .menu-link-wrapper:hover{
  padding-left: 0;
}

.menu .menu-link-wrapper:hover::before{
  width: 0;
}

.menu .menu-link-wrapper:hover::after{
  width: 60px;
}

<nav class="col-12 primary__nav">
  <ul id="Primary" class="menu">
    <li id="menu-item-58" class="menu-item">
      <div class="menu-link-wrapper">
        <a href="#" aria-current="page">Home</a> 
      </div>
      </li>
      <!--The right side line to slide away, and a new line on the left side to slide out when clicked-->
    <li id="menu-item-106" class="menu-item">
      <div class="menu-link-wrapper">
        <a href="#">Our Projects</a>
      </div>
    </li>
    <li id="menu-item-59" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">About Us</a> <!--slides out from the left and appears like this when clicked-->
      </div>
    </li>
    <li id="menu-item-112" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">News</a>
      </div>
    </li>
    <li id="menu-item-157" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">Contact</a>
      </div>
    </li>
  </ul>                
</nav>