How to add sequential numbering for wordpress menu

Question

Currently working on a site and trying to use sequential numbering just before the page titles on a wordpress menu but not exactly sure how to fit the < span> in without removing the page title and also how to get each page numbered sequentially. Current structure of what I am trying to achieve is below -

<ul role='navigation' id='navigation'>
<li class='page_item '><span class="number">1 </span><a href=''>About </a> </li>
<li class='page_item '><span class="number">2 </span><a href=''>Work </a> </li>
<li class='page_item '><span class="number">3 </span><a href=''>Contact </a> </li>
    <li class='page_item '><span class="number">4 </span><a href=''>etc. </a> </li>
</ul>

I started my PHP by using

<li><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?></li>

My CSS looks like this -

header ul li {
    display:block; 
    float:left; 
    white-space:nowrap; 
    overflow: hidden; 
}

header .number { 
    padding-left: 4px;
    text-align: center; 
    font-size: 14px; 
    vertical-align: middle; 
    line-height: 1px; 
    margin-right: 6px;
}

Fiddle here I came across the Walker nav menu but I can't seem to comprehend it on my own. Any help would be appreciated.

Answer 1

You could try sticking the page number and title in an array, then looping through

$pages = array(
    1 => array(
        'title' => 'About',
        'url' => 'about.php'
    ),
    2 => array(
        'title' => 'Work',
        'url' => 'work.php'
    ),
    3 => array(
        'title' => 'Contact',
        'url' => 'contact.php'
    ),
    4 => array(
        'title' => 'etc',
        'url' => 'someFilename.php'
    )
);
foreach($whats as $name => $page) {
    printf("<a href='%s'>%s</a> ", $page['url'], $page['title']);

Then again, you could just use Jeff's idea and use <ol></ol> instead of <ul></ul> - which would make more sense and be a hell of a lot easier! xD

Answer 2

Since you can't change the element type of to then you can change the format of the output using css.

#navigation ul {
  counter-reset: section;
  list-style-type: none;
}

#navigation li:before {
  counter-increment: section; 
  content: counters(section, ".") ": "; 
  color: red;
  font-weight: bold;
}

See jsFiddle for details.