HostCMS v.6. Вертикальное меню на jQuery

Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка

Для начала делаем 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=»/»>
 <xsl:apply-templates select=»/shop»/>
 </xsl:template>
 
 <!-- Шаблон для магазина →
 <xsl:template match=»/shop»>
 <h3><a href=»{url}» title=  «Интернет-магазин»>Все разделы сайта</a></h3>
 <ul class=  «shop_list»>
 <xsl:apply-templates select=  «shop_group»/>
 </ul>
 </xsl:template>
 
 <!-- Шаблон для групп товаров →
 <xsl:template match=  «shop_group»>
 <li>
 <a href=»{url}» hostcms:id=»{@id}» hostcms:field=  «name» hostcms:entity=  «shop_group»>
 <xsl:value-of disable-output-escaping=  «yes» select=  «name»/>
 </a>
 
 <!-- Если есть подгруппы →
 <xsl:if test=  «count  (shop_group) > 0 and 1 > count  (ancestor::shop_group)»>
 <ul class=  «left_menu gray_link gray» id=»{@id}» style=  «display: none;»>
 <xsl:apply-templates select=  «shop_group»/>
 </ul>
 </xsl:if>
 </li>
 </xsl:template>
</xsl:stylesheet>

Этот код php вывода нашего меню вставляем в макет сайта в нужном месте

 <div class=  «left_menu»> 
 <?php
 // Разделы магазина
 if  (Core::moduleIsActive  ('shop'))
 {
 $Shop_Controller_Show = new Shop_Controller_Show  (
 Core_Entity::factory  ('Shop', 4)
) ;
 $Shop_Controller_Show
 ->xsl  (
 Core_Entity::factory  ('Xsl')->getByName  ('МагазинГруппыТоваровНаГлавной')
) 
 ->groupsMode  ('all')
 //->itemsForbiddenTags  (array  ('text'))
 ->group  (FALSE)
 ->limit  (0)
 ->show  ();
 }
? > 
</div>

В HEAD сайта вставляем скрипт:

 <script type=  «text/javascript»>
$  (document).ready  (function  (){
 $  ('.left_menu ul li').hover  (
 function  () { 
 $  (this).find  ('ul:first').stop  (true, true);
 $  (this).find  ('ul:first').slideDown  ();
 },
 function  () { 
 $  (this).find  ('ul:first').slideUp  ('fast'); 
 }
) ; 
 });
 </script>

Ну и стили CSS для примера (редактируйте под свой дизайн):

. left_menu {margin-bottom: 10px; position:relative;}
.left_menu ul,. left_menu li {list-style:none; margin: 0px; padding: 0px; position:relative;}
.left_menu ul li {position:relative; width:210px;}
.left_menu ul li a {font-size: 0.9em; text-align: left; display:block; padding:12px 10px; font-weight: normal; text-decoration: none; 
 /* background: url  (/images/SpryMenuBarRightHover.gif) 190px 50% no-repeat;*/ border-bottom: 1px dotted #ccc;}
.left_menu ul li a:hover {background: url  (/images/SpryMenuBarRight.gif) 190px 50% no-repeat #eeedeb; border-bottom: 1px dotted #999; }
.left_menu ul li ul {display: none; position:absolute; top:0; left: 210px; z-index: 9999; height:100%; background: #eeedeb; }
.left_menu ul li ul a { background: #eeedeb; -moz-box-shadow: 0px 2px 8px #999; /* FF3.5+ */
 -webkit-box-shadow: 0px 2px 8px #999; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 8px #999; /* Opera 10.5, IE 9.0 */; behavior:url  (/js/PIE.htc);}
.left_menu ul li ul a:hover { background: #d4e4f1;} 

Удачного вам использования данного меню.