How to make a menu editable in Concrete5?

I've been looking around for some guide that could tell me how to make an existing menu editable when added in Concrete 5.

Here's the menu I'm using now, I'd like to be able to edit it in c5:

<div class="menu">
<ul>
<li><a href="default.php" class="active"><span>Hem</span></a></li>
<li><a href="about.php"><span>Om oss</span></a></li>
<li><a href="services.php"><span>Tjänster</span></a></li>
<li><a href="references.php"><span>Referenser</span></a></li>
<li><a href="contact.php"><span> Kontakt</span></a></li>
</ul>
</div>

The links doesn't work at all in c5, so if anyone could help me a little that would be greatly appreciated!

Thanks!

One of the nice benefits of using any CMS is that it will automatically create the nav menu for you -- so that when users add new pages they automatically show up in the menu.

In Concrete5 specifically, the way you do this is with the "AutoNav" block. As with any block, this can be added to areas on your page, but since you generally want the nav menu to appear on EVERY page in the same place, you can also add the block directly in your template code.

So, for your menu (which is a one-level menu without a dropdown), replace your nav menu html with this code:

<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'none';
$nav->render('templates/header_menu');
?>

Now you will need to make a change to your CSS, because that code will generate HTML that is slightly different than what you have -- it looks more like this:

<ul class="nav-header">
<li><a href="/" class="nav-selected">Hem</a></li>
<li><a href="/about">Om oss</a></li>
<li><a href="/services">Tjänster</a></li>
<li><a href="/references">Referenser</a></li>
<li><a href="/contact">Kontakt</a></li>
</ul>

The differences are that there's no surrounding div (although you could leave that if you wanted by surrounding the php code above in the opening and closing div tags), there's no span around the nav items, and the class for a selected item is "nav-selected" instead of "current".