You can use the Dynamic Menu widget to include navigation menus on the page, without making them fully visible initially. This allows pages that contain a lot of information to be less cluttered. Sub menus are displayed when the user selects a menuitem. If you use transitions to show and hide sub menus, you can make the display more appealing.
You can use the Dynamic Menu widget to include navigation menus on the page, without making them fully visible initially. This allows pages that contain a lot of information to be less cluttered. Sub menus are displayed when the user selects a menuitem. If you use transitions to show and hide sub menus, you can make the display more appealing.
This widget does not use any additional XDIME 2 markup. Rather you use the nl element that defines a navigation list. If the mcs-menu-style property is set to 'dynamic', then the nl is rendered as dynamic menu otherwise as normal unordered list.
Initially, the top-level of the menu, optionally with a marker which indicates that menus can be opened, is visible. The top-level menu may have either horizontal or vertical orientation. Each sub menu may have either horizontal or vertical orientation, independently of its parent menu.
When a sub menu is unfolded, it overlays over the existing page content. It does not cause the existing page content to move.
You can specify if menu and sub menu should unfold when the user moves the focus to a menu item which has a sub menu, or when she clicks on a menu item which has a sub menu.
Menu and sub menu can be folded when the user moves the focus from the menu item or one of its sub menus, or by clicking on the menu item in its unfolded state. In addition, a menu can be folded when the user clicks on a menu that performs some navigation action rather than containing a sub menu.
If you set the mcs-menu-style property on the nl element to 'dynamic' the menu will be rendered as dynamic menu rather than as a normal unordered list. This style is inherited. The mcs-toggle-event property describes the event that unfolds a sub menu, with values 'focus' or 'click'.
The mcs-menu-item-orientation property controls the orientation of the menu and sub menu with values of either 'vertical' or 'horizontal'.
The :mcs-unfolded pseudo-class, and the ::marker pseudo-element sets the style for unfolded sub menu labels and markers.
Setting the position property to 'fixed' locks dynamic menu in place and makes it visible even on pages longer than device screen.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:template="http://www.volantis.com/xmlns/marlin-template"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
<head>
<title>Dynamic Menu Widget</title>
<link rel="mcs:theme" href="/themes/main.mthm"/>
<link rel="mcs:layout" href="/layouts/main.mlyt"/>
<style type="text/css">
.main-menu {
mcs-effect-style: slide-top;
mcs-effect-duration: 1s;
mcs-menu-style: dynamic;
mcs-menu-orientation: horizontal;
mcs-toggle-event: click;
background-color: #fff;
text-decoration: none;
}
.main-menu:mcs-concealed {
mcs-effect-style: slide-top;
mcs-effect-duration: 1s;
}
label {
padding-left: 5px;
padding-right: 5px;
color: #000;
}
.menu a {
color: #000;
}
</style>
</head>
<body>
<template:apply href="templates/demo-main.xdtpl">
<template:binding name="title" value="Dynamic Menu Widget"/>
<template:binding name="content">
<template:complexValue>
<nl class="main-menu">
<label/>
<li>
<nl class="widget_menu">
<label>A - I</label>
<li><a href="http://www.ankara-bel.gov.tr">Ankara</a></li>
<li><a href="http://www.berlin.de">Berlin</a></li>
<li><a href="http://www.bratislava.sk">Bratislava</a></li>
<li><a href="http://www.budapest.hu">Budapest</a></li>
<li><a href="http://www.pmb.ro">Bucharest</a></li>
<li><a href="http://www.krakow.pl">Cracow</a></li>
<li><a href="http://www.ljubljana.si">Ljubljana</a></li>
</nl>
</li>
<li>
<nl class="widget_menu">
<label>J - R</label>
<li><a href="http://www.nicosia.org.cy">Nicosia</a></li>
<li><a href="http://www.prague-city.cz">Prague</a></li>
<li><a href="http://www.rcc.lv">Riga</a></li>
</nl>
</li>
<li>
<nl class="widget_menu">
<label>S - Z</label>
<li><a href="http://www.sofia.bg">Sofia</a></li>
<li><a href="http://www.tallinn.ee">Tallinn</a></li>
<li><a href="http://www.tirana.gov.al">Tirana</a></li>
<li><a href="http://www.cityofvalletta.org">Valletta</a></li>
<li><a href="http://www.wien.gv.at/">Vienna</a></li>
<li><a href="http://www.vilnius.lt">Vilnius</a></li>
<li><a href="http://www.zagreb.hr">Zagreb</a></li>
</nl>
</li>
</nl>
</template:complexValue>
</template:binding>
</template:apply>
</body>
</html>If a device does not support dynamic menus, then all menus, sub menu and their items will be shown vertically in main menu container.