Блог

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. Красивое горизонтальное выпадающее меню на CSS

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

  • Кредитная кнопка (для сайтов на HostCMS v.6)

    Была такая задача в ТЗ клиента — внедрить «кредитную кнопку» Банка «Русский Стандарт» в корзину интернет-магазина. Возможно, кому-то это пригодится.

  • HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка

    Вам нужно вывести товары интернет-магазина по какому-то, заранее определенному, признаку? Для начала создаем дополнительное свойство товара, пройдя по цепочке «Интернет-магазин ⇒ Товар ⇒ Свойства товара».

  • HOSTCMS v.6. Внедряем coin-slider

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

  • HOSTCMS v.6. Ссылка на все товары производителя в карточке товара

    Если нужно дать возможность покупателю выбрать товары текущего производителя, когда он находится в карточке товара, то вам пригодится данная небольшая доработка...

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

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

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ