Блог

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;}

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

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

Блог

  • 29 марта 2018 г.
    Боковое выпадающее меню на CSS для каталога товаров. HostCMS v.6
    Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...
  • 07 марта 2018 г.
    Тенденции веб-дизайна в 2018 году
    В 2018 году, дизайнеры начинают разработку чистых и простых сайтов, способных соответствовать стандартам мобильных достижений. Центр внимания сосредотачивается на проекты с прямолинейным, но эффективным и оптимизированным дизайном.
  • 26 января 2018 г.
    Что такое лендинг пейдж?
    Дословно лендинг пейдж переводится с английского (landing page) как целевая страница. В Рунете можно встретить еще один перевод термина лендинг пейдж – посадочная страница...
  • 28 декабря 2017 г.
    Внедрение в макет кода формы с reCaptcha. HostCMS 6
    Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...
  • 24 ноября 2017 г.
    Выводим производителей с разбивкой по алфавиту. HostCMS v.6
    Если у вас в интернет-магазине много производителей (брендов), то приведенное нами решение поможет организовать показ всех производителей с разбивкой по алфавиту...
  • 07 сентября 2017 г.
    Четыре причины, почему Facebook необходим для маркетинговых кампаний
    Успех вашего онлайн-бизнеса зависит от того, как вы реализуете свою стратегию цифрового маркетинга во взаимодействии с вашей целевой аудиторией...
  • 17 июня 2017 г.
    Варианты создания логотипа сайта
    Фундаментом фирменного стиля является логотип. Непосредственно на логотип, в первую очередь, обращают внимание клиенты любой компании, к тому же, логотип должен быть обязательно размещён на такой имиджевой продукции, как ручки, чашки фирменные бланки и прочее.

Все статьи

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

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

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

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

ПРОДАЖА ГОТОВЫХ РЕШЕНИЙ

Готовые интернет-магазины и интеграционные решения для сайтов на HostCMS

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

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг

Подробный ПРАЙС-ЛИСТ