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;}
Удачного вам использования данного меню.