====== Automatic menus ======

^ :!: Note ^
| You can **ONLY** use automatic menus in combination with [[usage:dynamic_pages|dynamic pages]]. |

{{ :usage:auto-menus.jpg?300|Examples of menu tags}} Instant Update has ability to create automatic navigation menu for you. This menu will always link to your [[dynamic_pages|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 [[usage:wysiwyg_editor|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 [[#menus_with_seo_sef_links|SEO/SEF links]] (yellow highlighting) and with [[#menus_with_regular_links|regular links]] (green highlighting).

Whole menu is organized as [[http://en.wikipedia.org/wiki/Ordered_list|unordered HTML list]] which can be styled with [[http://en.wikipedia.org/wiki/Cascading_Style_Sheets|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:

<code html>
<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' />
</code>

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

| name          ^ type  ^ description                ^
^ firstmenuitem | ID    | ID of first menu item link |
^ lastmenuitem  | ID    | ID of last menu item link  |
^ menuitem      | ID    | ID of menu item link       |
^ iu-menu-item  | class | class of menu list item    |
^ iu-menu       | both  | ID/class of menu list      |
^ iu-menu-div   | both  | ID/class of menu div       |

===== Menus with SEO/SEF links =====

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

<code html>
<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' />
</code>

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 [[seo_urls|rewrite]] all ***.iu** (or *.html) requests to your [[dynamic pages|dynamic page]] for these SEO links to work. |

===== Menus with regular links =====

If, for any reason((e.g. you don't have Apache web server with mod_rewrite module installed)) 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_pages|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:

<code html>
<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' />
</code>

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