split menu flexbox

by marusti

HTML

<nav>
  <span class="nav-wrapper">Name oder Logo</span>
  <ul class="nav">
    <li>Left 1</li>
    <li>Left 2</li>
    <li>Left 2</li>
    <li>Right 1</li>
    <li>Right 2</li>
    <li>Right 2</li>
  </ul>
</nav>

CSS

.nav {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}

.right {
  order: 1;
}

li {
  padding: 0 5px;
}

.nav-wrapper {
/*  display: flex;*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

JavaScript

$( ".nav li:nth-child(1)").addClass("left");
$( ".nav li:nth-child(2)").addClass("left");
$( ".nav li:nth-child(3)").addClass("left");
$( ".nav li:nth-child(4)").addClass("right");
$( ".nav li:nth-child(5)").addClass("right");
$( ".nav li:nth-child(6)").addClass("right");