Hemos visto que muchos sitios web poseen dos tipos de menú independientes, uno principal con submenús de varios niveles y otro secundario sin submenú, esto hace que tengamos accesos directos a áreas del sitio importantes que no puedan acceder al menú original.

Trabajaremos con gantry, un marco de trabajo que nos posibilita personalizar cualquier aspecto fácilmente, sin afectar su diseño. Describiré en varios pasos la creación e implementación de un menú secundario horizontal con un aspecto a botones.

Estructura

1- Agregar un módulo adicional justo debajo del cierre de etiqueta

En index.php agregar estas líneas

<?php /** Begin Submenu **/ if ($gantry->countModules('submenu')) : ?>
   <div id="rt-submenu">
      <div class="rt-submenu-pattern">
         <div class="rt-container">
            <?php echo $gantry-
            >displayModules('submenu','standard','standard'); ?>
            <div class="clear"></div>
         </div>
      </div>
   </div>
<?php /** End Submenu **/ endif; ?>

2- Agregar posiciones en el módulo, en el archivo templateDetails.xml debajo de header ingresar los parametros

<position>submenu-a</position>
<position>submenu-b</position>
<position>submenu-c</position>
<position>submenu-d</position>
<position>submenu-e</position>
<position>submenu-f</position>

Agregar las capas (Layouts) correspondiente en la estructura de la plantilla, el archivo template-options.xml igual que la anterior debe colocarse debajo de header

<fields name="submenu" type="position" label="SUBMENU_POS" description="LAYOUT_POS_DESC">
   <field name="layout" type="positions" default="3,3,3,3" label="">
      <schemas>1,2,3,4,5,6</schemas>
      <words>2,3,4,5,6,7,8,9,10</words>
   </field>
   <field name="showall" type="toggle" default="0" label="FORCE_POS"/>
   <field name="showmax" type="showmax" default="6" label="POS_COUNT"/>
</fields>

Diseño

1- En el archivo less\menu.less encima de // Dropdown styling ingresar lo siguiente

// Submenu styling
.showcase {
   display: inline-block;
   ul {
          li {
              display: inline-block;
             }
       }
}

2- En el archivo less/style.less agregar antes de los sufijos del módulo:

/* Submenu Menu Style */
.showcase {}
.showcase ul.menu {padding: 0px; list-style: none; display: inline-block;}
.showcase ul.menu li {list-style: none; display:inline-block; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; font-family: tahoma;}
.showcase ul.menu li a, 
.showcase ul.menu li .item, 
.showcase ul.menu li .separator {display:inline-block; font-size:1em; padding: 5px 20px 5px 20px !important; position: relative; line-height: 1.6em; z-index: 0; transition: background-color 0.1s ease-out; color: #A0A0A0; text-shadow: -1px -1px #000000;}
.showcase ul.menu li a:hover {margin: 0px; color:#DBDBDB !important;}
.showcase ul.menu li .item:hover, 
.showcase ul.menu li .separator:hover, 
.showcase ul.menu li.active a, 
.showcase ul.menu li.active .item, 
.showcase ul.menu li.active .separator {margin: 0px; background-repeat: no-repeat; background-position: 4px 8px 0; color:#DBDBDB !important;}
.showcase ul.menu li a span, 
.showcase ul.menu li .item span, 
.showcase ul.menu li .separator span {padding: 0;display: inline-block;}
.showcase ul.menu li a:after, 
.showcase ul.menu li .item:after, 
.showcase ul.menu li .separator:after {position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1;}
.showcase .module-content .menu li {list-style: none;padding: 0;margin: 0;}

3- En el archivo less/Template.less en las variaciones de módulos ingresar:

.showcase rt-block {
                margin: 0 0 0 10px;
                padding: 0px;
                list-style: none;
                display: inline-block;
}

Como pueden ver en el resultado, el menú secundario justo debajo del principal. Opcionalmente se puede cambiar la posición del menú donde mejor quede visualmente, siempre respetara el diseño estilo botones y horizontal y no olviden que la clase CSS en el módulo es "showcase".