HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

Библиотеку jQuery можно скачать на сайте разработчика

По ссылке ниже, скачайте файлы меню

СКАЧАТЬ ФАЙЛЫ


Шаг 1

Размещаем в макете или шаблоне 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

Шаг 2

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

Шаг 3

Создаем 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>

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

Другие статьи по теме:

HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка

Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...

Как начать продавать онлайн из дома и зарабатывать деньги
Как начать продавать онлайн из дома и зарабатывать деньги

Развитие электронной коммерции произвело революцию в том, как компании, ИП и самозанятые продают свои товары и услуги. У вас есть неограниченный потенциал продавать онлайн  что угодно и кому угодно из любой точки России. Это дает вам доступ к миллионам пользователей Интернета по всей нашей необъятной стране для увеличения продаж и развития вашего бизнеса.

Как анимировать текстовые градиенты и шаблоны в CSS
Как анимировать текстовые градиенты и шаблоны в CSS

В этой статье мы покажем, как легко анимировать фоновый градиент с помощью CSS.

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД
Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...
HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров
HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

CSS - Селекторы
CSS - Селекторы

Полное руководство, в котором описаны все возможные способы выбора элементов в CSS и их применения для стилизации.

Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам обеспечивать вас лучшим контентом. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Отключение cookie-файлов может привести к неполадкам в работе сайта. Продолжая пользоваться сайтом без изменения настроек, вы даете согласие на использование ваших cookie-файлов. Это совершенно безопасно!