Learning Center

Working with Menus

TypeRoom Professional was built to support virtually all navigation schemes. Check out the examples below to how the {{rendermenu}} function works.

Basic Menu

Render a single level menu.

Code:

{{rendermenu depth="0"}}

Result:

[back to top]

Nested Menus

Render a nested menu, displaying the sub-pages of the current section.

Code:

{{rendermenu depth="0" nested="true"}}

Result:

If you'd like to show all sub-pages, regardless of the current section, use the showall attribute.

Code:

{{rendermenu depth="0" nested="true" showall="true"}}

Result:

[back to top]

Page Specific Menu

Render a fixed menu based on a page name.

Code:

{{rendermenu depth="services"}}

Result:

[back to top]

Putting it All Together

We'll build a dropdown menu using some CSS and the rendermenu tag.

Here's the final result:

Result:



To build this, we used the following code:

HTML:

<div class="top-nav">
{{rendermenu depth="0" nested="true" showall="true"}}
</div>

CSS:

.top_nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size:11px;
}

.top_nav li {
  float: left;
  position: relative;
  width: 10em;
  background-color:#EFEFEF;
  border-right:1px solid #AAA;
}

.top_nav li a {
  padding:3px;
  color:#333;
  text-decoration:none;
  display:block;
}

.top_nav li a:hover {
  background-color:#333;
  color:#fff;
  }

.top_nav li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  background-color:#EFEFEF;
  border-bottom:1px solid #AAA;
}

.top_nav li>ul {
  top: auto;
  left: auto;
}

.top_nav li:hover ul, .top_nav li.over ul {
  display: block;
}

[back to top]

Powered by Olark