Библиотеку jQuery можно скачать на сайте разработчика
По ссылке ниже, скачайте файлы меню
Размещаем в макете или шаблоне php код:
<nav>
<!-- Разделы каталога товаров→
<?php
// Проверяем, существует ли класс Интернет-магазина
if (class_exists ('shop')) {
$shop = & singleton ('shop');
$shop_id = 3;
$param = array ();
$param['items_on_page'] = 0;
$param['xml_show_group_type'] = 'all';
$param['xml_show_all_producers'] = true;
$param['xml_show_producers'] = true;
$param['xml_show_all_sellers'] = false;
$param['xml_show_tying_products'] = false;
$param['xml_show_modification'] = false;
$param['xml_show_group_property'] = true;
$param['xml_show_item_property'] = false;
$param['xml_show_tags'] = false;
$shop->ShowShop ($shop_id, 'МагазинГруппыТоваровНаГлавной', $param); }
?>
</nav> Некоторые старые браузеры не поймут тег nav:
<nav>……..</nav>поэтому его можно заменить на DIV
CSS стили для меню:
#menu {margin-left:20px; z-index: 10; position: absolute; }
#menu li {float:left;display:block; text-align:center; position:relative;
padding:10px 12px; margin-right:10px; margin-top:10px; border:none;}
#menu li:hover {border: 0px solid #fff;padding: 10px 12px; background: #E7F1FC;
-moz-border-radius: 5px 5px 0px 0px;-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; behavior:url (/js/PIE.htc);}
#menu li a {font-size:13px; font-weight: bold; color: #333; display:block;
outline:0; text-decoration:none; text-shadow: 1px 1px 1px #ffffff;}
#menu li a:hover {color:#000; text-shadow: 1px 1px 1px #ffffff; }
#menu li. drop {background:url (»/images/drop.png») no-repeat right 7px;
padding-right:21px;}
#menu li:hover. drop {background:url (»/images/drop.png») no-repeat right 7px;}
#menu .imgshadow {width: auto; border: 6px solid #66ccff; margin: 5px;
border-radius: 3px; -moz-box-shadow: 0px 2px 4px #999; /* FF3.5+ */
-webkit-box-shadow: 0px 2px 4px #999; /* Saf3.0+, Chrome */
box-shadow: 0px 2px 4px #999; /* Opera 10.5, IE 9.0 */
behavior: url (/js/PIE.htc); position: relative; float: right;} #menu. dropdown_2columns {margin:13px auto; float:left; position:absolute;
left:-999em; text-align:left; padding:10px 5px; border:1px solid #fff;
border-top:none; background:#E7F1FC; background:
-moz-linear-gradient (top, #E7F1FC, #88C1EC);
background:
-webkit-gradient (linear, 0% 0%, 0% 100%, from (#E7F1FC),to (#88C1EC));
-moz-border-radius:5px;-webkit-border-radius: 5px;
border-radius: 5px;
behavior:url (/js/PIE.htc);
-moz-box-shadow: 0px 4px 4px #999; /* FF3.5+ */
-webkit-box-shadow: 0px 4px 4px #999; /* Saf3.0+, Chrome */
box-shadow: 0px 4px 4px #999; /* Opera 10.5, IE 9.0 */ }
#menu. dropdown_2columns {width: 390px;}
#menu li:hover. dropdown_2columns {left:-20px; top:auto;}
#menu. col_1 { float: right; padding:10px 5px; position:relative;
letter-spacing: 0.05em;}
#menu. col_2 {display:inline; float: left; padding:10px 5px;
position:relative; letter-spacing: 0.05em;}
#menu li:hover div a {font-size:12px; color:#333; line-height: 22px;}
#menu li:hover div a:hover {color:#006699;}
#menu li ul {list-style:none; padding:0; margin:0 0 12px 0;}
#menu li ul li {font-size:12px; line-height:36px; position:relative;
text-shadow: 1px 1px 1px #ffffff; padding:5px; margin:0; float:none;
text-align:left; width:200px;}
#menu li ul li:hover {background:#ffcccc; padding:5px; margin:0; border:none;
-moz-border-radius:3px;-webkit-border-radius: 3px; border-radius: 3px!
behavior:url (/js/PIE.htc);} Создаем 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»>
<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»>
<ul id= «menu»>
<xsl:apply-templates select= «group»/>
</ul>
</xsl:template> <!-- Шаблон для групп товара — >
<xsl:template match= «group»> <a href=»{/shop/path}{fullpath}»>
<xsl:value-of disable-output-escaping= «yes» select= «name»/>
</a> <!-- Если есть подгруппы — >
<xsl:if test= «group»>
<ul>
<div class= «dropdown_2columns»>
<div class= «col_2»>
<xsl:apply-templates select= «group» />
</div>
<!-- Выводим картинку в меню-- >
<div class= «imgshadow» >
<a href=»{/shop/path}{fullpath}»>
<img src=»{small_image}» width= «120» alt=»{name}» title=»{name}» />
</a>
</div>
</div>
</ul>
</xsl:if></li></xsl:template>
</xsl:stylesheet> 
Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Другие статьи по теме:
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...
Развитие электронной коммерции произвело революцию в том, как компании, ИП и самозанятые продают свои товары и услуги. У вас есть неограниченный потенциал продавать онлайн что угодно и кому угодно из любой точки России. Это дает вам доступ к миллионам пользователей Интернета по всей нашей необъятной стране для увеличения продаж и развития вашего бизнеса.
В этой статье мы покажем, как легко анимировать фоновый градиент с помощью CSS.
Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...
Полное руководство, в котором описаны все возможные способы выбора элементов в CSS и их применения для стилизации.
