Как создать меню с прогрессом?

Question

[Faith555]

Приветствую вас дорогие друзья. Хотелось бы у вас узнать, есть ли фреймворки или где можно найти исходник такой штуки, как меню с прогрессом. Постараюсь объяснить. Меню как бы имеет опыт и человек, читает например статью, как только ее дочитал, полоса опыта заполнилась. Чтобы лучше понять, о чем я говорю, предоставляю примеры: (надеюсь за ссылки не побьют)
1) Pokerstrategy.ru
2) Tradimo.com
3) Lingualeo
Вот то есть, получается, пользователь регистрируется и получает возможность "проходить сайт". Спасибо большое за ответы и наводки, может даже за похожие исходники. Если не понятно, постараюсь ответить в комментариях. Благодарю, всех с Наступившим.
PS Идеальный пример на сайтах 1 и 2.

Answer 1

[Дмитрий]

Два тега div, один вложен в другой. Для внешнего установлена длина и высота. Для второго просто высота. Далее для вложенного ставим стиль width столько процентов, насколько пройден сайт. Все.

Comments

[Faith555]

Простите за глупый вопрос, а можете продемонстрировать

[Дмитрий]

<div style="width:200px; height:20px;"><div style="height:20px; background:blue; width:27%;"></div></div>

[Дмитрий]

Faith555: примерно так, выше написал

Answer 2

[Pavel Zhukau]

Не знаю конечно, но наверное стоит использовать прогресс бар и задавать ему значение в зависимости от значения пройденного этапа.