Best practice menus

Martin Grønbekk Moen

Posted on 10/02/2013 12:57:19

What is the best practice when it comes to menus. I need two menus, one top menu and one main menu.

Today I have created the structure like this (first screenshot), but I have some questions regarding this.

What if I need one of the pages to be visible in both menus, how can this be done.

Like the front page, I have the front page in root, I also have it in the main menu, but I cant create two front pages, that would be bad practice.

Next question is regarding the url's (second screenshot), I do not want to show "top-menu" in the link, I just want it to be localhost/search.aspx not localhost/top-menu/search.aspx is this possible?

Replies

Morten Bengtson

Posted on 10/02/2013 17:24:21

The main menu will often be based on the site structure in general. If there are pages that you don't want to display in the main menu, you can go to page > properties and click on "Hide in menu".

For the "Top menu" page, you can do the following:

Go to Properties > Menu item on the "Top menu" page.
1. Choose Hide in menu (if you don't want it in the main menu).
2. Choose Do not include URL in subpage URLs - which will cause /Top-menu/Search.aspx to become /Search.aspx.
Go to Properties > Options > Navigation on the "Top menu" page.
1. Add a name for the Navigation tag, e.g. "topmenu" (for use in template).
Go to Properties > Advanced > Shortcut on subpages to the "Top menu" page.
1. If this menu item is represented as a separate page somewhere else on the site, then choose that page in Shortcut and make it Redirect to that page.

Here is a simple layout template with main navigation and topmenu navigation:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Navigation example</title>
</head>
<body>
<div id="wrapper">
	<div id="topmenu">
		<!-- Notice the use of parenttag, which matches the navigation tag you specified on the "Top menu" page -->
		<ul class="dwnavigation" id="topmenu" settings="parenttag:topmenu">
			<li><a href="#">A</a></li>
			<li><a href="#">B</a></li>
			<li><a href="#">C</a></li>
		</ul>
	</div>	
	<hr />
	<div id="mainmenu">
		<ul class="dwnavigation" id="mainmenu">
		<li><a href="#">A</a></li>
		<li><a href="#">B</a></li>
		<li><a href="#">C</a></li>
	</ul>
	</div>
	<hr />
	<div id="content" class="dwcontent" title="Main content">
	</div>
</div>
</body>
</html>

I have attached some screenshots of the settings mentioned.

BR.

Morten