Блог

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

Понравилась статья? Поделитесь

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

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

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

  • HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha

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

  • Разметка Open Graph для HostCMS v.6

    Для начала узнаем, что такое Open Graph? Open Graph - это протокол, который формирует вид внешней ссылки в социальных сетях. Первоначально этот протокол был разработан для Facebook, однако сейчас используется и в других соцсетях.

  • HOSTCMS v.6. Полезные SQL запросы

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

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

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

  • Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)

    После последнего обновления 6.1.4 появилась возможность показать пользователю в краткой корзине отложенные им товары. Удобная функция, особенно для тех интернет-магазинов, в которых пользователи обычно покупают сразу несколько товаров за раз...

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

WEB ДИЗАЙН

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

ПОДДЕРЖКА САЙТА

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

ШАБЛОНЫ САЙТОВ

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

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Разработка логотипа. Редизайн сайта. Замена вашей CMS на HostCMS. Калькуляторы. Формы.