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

HostCMS v.6. Вертикальное меню на jQuery
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;}

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

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Внедряем coin-slider
HOSTCMS v.6. Внедряем coin-slider
Coin-slider один из популярных слайдеров, который используется на сайтах. Чаще всего слайдеры используют на Главной странице, для придания ей динамики, привлечения внимания к «горячей» информации. В этой статье рассказывается, как внедрить этот слайдер XSL-шаблон сайта, разработанного на HostCMS.

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

HOSTCMS v.6. Краткая корзина в модальном окне
HOSTCMS v.6. Краткая корзина в модальном окне

Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...


HOSTCMS v.6. Поиск по сайту с показом карточки товара
HOSTCMS v.6. Поиск по сайту с показом карточки товара
Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

HOSTCMS v.6. Полезные SQL запросы
HOSTCMS v.6. Полезные SQL запросы
Подборка SQL запросов к базе данных для сайтов на HostCMS v.6. Может быть очень полезной в некоторых случаях в пройцессе создания или обслуживания сайта...

HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha
HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha
Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.