Automatic menus

Note
You can ONLY use automatic menus in combination with dynamic pages.

Instant Update has ability to create automatic navigation menu for you. This menu will always link to your dynamic page, changing only the parameter used to determine which content should be displayed from link to link. Linking text will be extracted from content names. You can mark every content to be linked in menu while editing it in WYSIWYG editor. You can change order of links in menu from your dashboard. On the picture from your right side you can see examples of navigation menus with SEO/SEF links (yellow highlighting) and with regular links (green highlighting).

Whole menu is organized as unordered HTML list which can be styled with CSS to make menu actual horizontal or vertical navigation menu. With Instant Update you will get example CSS files (manage/iu-menu-horizontal.css and manage/iu-menu-vertical.css) which you can use if you want simple horizontal or vertical navigation in your web site.

Navigation menu is added from code editor using link “insert menu (via dynamic page)” or by placing special tag [menu]format[/menu] in your page, where format is format of your link. Note that every occurrence of string %content% will be replaced with content name of currently linking content. For example, if you have 3 (three) contents marked to be linked (about, contact and default) and you place tag [menu]%content%.iu[/menu] in your page, you will get something like this in your HTML source code:

<div class='iu-menu-div' id='iu-menu-div'>
	<ul class='iu-menu' id='iu-menu'>
		<li class='iu-menu-item'><a href='about.iu' id="firstmenuitem">about</a></li>
		<li class='iu-menu-item'><a href='contact.iu' id="menuitem">contact</a></li>
		<li class='iu-menu-item'><a href='default.iu' id="lastmenuitem">default</a></li>
	</ul>
</div>
<br style='clear: left' />

CSS properties overview. You can use these CSS IDs/classes to change appearance and/or behavior of your navigation menu and it's links.

This is default behavior of navigation menu - to link your contents via SEO ¹⁾ links. If you form your special menu tag like [menu]%content%.iu[/menu] you will get something like this in your HTML source code:

<div class='iu-menu-div' id='iu-menu-div'>
	<ul class='iu-menu' id='iu-menu'>
		<li class='iu-menu-item'><a href='about.iu' id="firstmenuitem">about</a></li>
		<li class='iu-menu-item'><a href='contact.iu' id="menuitem">contact</a></li>
		<li class='iu-menu-item'><a href='default.iu' id="lastmenuitem">default</a></li>
	</ul>
</div>
<br style='clear: left' />

You can, of course, place %content%.html as your menu format instead of %content%.iu to get links to .html pages, so ordinary web site visitors will think that your website is made of .html files.

Note
You will have to rewrite all *.iu (or *.html) requests to your dynamic page for these SEO links to work.

If, for any reason²⁾ you don't want to use SEO links (but we suggest you to use them), you can make menu format a little bit different, and to link directly to your dynamic page. For example, if you make your special tag look something like [menu]page.php?page=%content%[/menu], you will get following HTML code for your navigation menu:

<div class='iu-menu-div' id='iu-menu-div'>
	<ul class='iu-menu' id='iu-menu'>
		<li class='iu-menu-item'><a href='page.php?page=about' id="firstmenuitem">about</a></li>
		<li class='iu-menu-item'><a href='page.php?page=contact' id="menuitem">contact</a></li>
		<li class='iu-menu-item'><a href='page.php?page=default' id="lastmenuitem">default</a></li>
	</ul>
</div>
<br style='clear: left' />

These links work normally, you don't have to rewrite anything. Just make sure that your dynamic page file name is page.php (or whatever file name you have specified in your special menu tag format).