Выпадающее горизонтальное/вертикальное меню на CSS

18 марта 2013 г.

Шаблон предназначен для показа многоуровневого меню на сайте, с учётом вывода групп интернет-магазина и информационных систем. Шаблон адаптирован под сервис CSS Menu Maker.

Для показа меню на сайте нужно в разделе http://cssmenumaker.com/css-menus/ выбрать образец меню.
В разделе Customize скопировать CSS-код меню и добавить его к CSS-коду вашего макета. (Внимание! Некоторые образцы меню опубликованные на сайте являются демонстрационными и не содержат раздела Customize.)

Создать XSL-шаблон с приведённым ниже кодом.
Код XSL-шаблона:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:hostcms="http://www.hostcms.ru/"
  exclude-result-prefixes="hostcms">
  <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

  <xsl:template match="/site">
    <div id="cssmenu">
      <ul>
        
        <xsl:apply-templates select="*[@id][show=1][active=1]" />
      </ul>
    </div>
  </xsl:template>

  
  <xsl:variable name="current_structure_id" select="/site/current_structure_id"/>

  <xsl:template match="*">
    
    <xsl:variable name="sub" select="*[@id][show=1][active=1]" />

    <li>
      <xsl:attribute name="class">
        <xsl:if test="$current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">active </xsl:if>
        <xsl:if test="position() = last()">last </xsl:if>
        <xsl:if test="$sub">has-sub</xsl:if>
      </xsl:attribute>

      
      <xsl:variable name="link">
        <xsl:choose>
          
          <xsl:when test="link != ''">
            <xsl:value-of disable-output-escaping="yes" select="link"/>
          </xsl:when>
          
          <xsl:otherwise>
            <xsl:value-of disable-output-escaping="yes" select="url"/>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>

      
      <a href="{$link}">
        <span><xsl:value-of disable-output-escaping="yes" select="name"/></span>
      </a>

      <xsl:if test="$sub">
        <ul>
          <xsl:apply-templates select="$sub" />
        </ul>
      </xsl:if>
    </li>
  </xsl:template>
</xsl:stylesheet>

Добавить в макет код показа меню по указанному образцу.
Код показа меню в макете:

<?php
  $Structure_Controller_Show = new Structure_Controller_Show(
    Core_Entity::factory('Site', CURRENT_SITE));

  $Structure_Controller_Show->xsl(Core_Entity::factory('Xsl')
    ->getByName('CssMenuMaker')) // XSL-шаблон
    ->showInformationsystemGroups(TRUE) // показываем группы инфосистемы (TRUE/FALSE)
    ->showShopGroups(TRUE) // показываем группы магазина (TRUE/FALSE)
    ->menu(1) // идентификатор меню
    ->show();
?>

UPD: Репозиторий шаблона на GitHub https://github.com/lozoffoy/CssMenuMaker-HostCMS-v.6.x

23 марта 2013 г.