views:

17

answers:

0

Hey!

The website I'm currently developing has a three-level menu and each item in the menu must have a number before the title: 1. and 1.1. and 1.1.1. for example. Currently I am using CSS to generate the numbers:

#menu ol          { counter-reset: item; }
#menu li a        { counter-increment: item; }
#menu li a:before { content: counters(item, ".") ". "; }

But all this, of course, doesn't work in IE7, so I need an alternative to automatically generate the numbers. Can't use server-side scripting because it's an offline application so I thought this can be done with Javascript/jQuery, but I am lacking JS skills to do that.

The menu structure looks like this (all inside div#menu):

<ol>
    <li>
        <a>Level 1 title</a>
        <ol>
            <li>
                <a>Level 2 title</a>
                <ol>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                </ol>
            </li>
            <li>
                <a>Level 2 title</a>
                <ol>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        <a>Level 1 title</a>
        <ol>
            <li>
                <a>Level 2 title</a>
                <ol>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                </ol>
            </li>
            <li>
                <a>Level 2 title</a>
                <ol>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                    <li><a>Level 3 title</a></li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

I would really like to not change the structure. Can anyone show me how to automatically generate list numbers with Javascript?