Get WordPress Menü Anzahl der Elemente

Question

Ich frage mich, ist es möglich, die Anzahl der Elemente in einer WordPress-Navigation zu bekommen? Ich brauche nur die Anzahl der Top Level Items. Ich versuche herauszufinden, wie viel Prozent jeder Artikel in der Navigationsleiste aufnehmen sollte. Wenn ich also die Anzahl der Artikel ermitteln kann, kann ich den Prozentsatz ermitteln. Ich wollte ursprünglich den Customizer verwenden, damit der Benutzer die Anzahl der Elemente eingeben kann, aber es wäre noch besser, wenn ich diese Nummer automatisch abrufen könnte.

Answer 1

Sie können das mit jQuery oder plain css mit flex tun.

Hier ist ein Beispiel mit den beiden:

var $items = $('nav.jquery > ul > li'), 
 
    $itemsWidth = 100/$items.length; 
 

 
$items.css({ 
 
    'width': $itemsWidth + '%' 
 
});

nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav.jquery > ul > li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: gray; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
nav > ul > li > ul { 
 
    position: absolute; 
 
    top: 40px; 
 
    display: none; 
 
} 
 

 
nav.flex{ 
 
    clear: both; 
 
} 
 

 
nav.flex > ul{ 
 
    display: flex; 
 
} 
 

 
nav.flex > ul > li{ 
 
    flex: 1; 
 
    position: relative; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: green; 
 
    text-align: center; 
 
    color: white; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="jquery"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2 
 
     <ul> 
 
     <li>Item 2/1</li> 
 
     <li>Item 2/2</li> 
 
     <li>Item 231</li> 
 
     </ul> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    </ul> 
 
</nav> 
 

 
<nav class="flex"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2 
 
     <ul> 
 
     <li>Item 2/1</li> 
 
     <li>Item 2/2</li> 
 
     <li>Item 231</li> 
 
     </ul> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    </ul> 
 
</nav>