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

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>

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

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

Эффект вращения с помощью CSS3
Эффект вращения с помощью CSS3
CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

Градиентная обводка блока на CSS
Градиентная обводка блока на CSS

Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.


HOSTCMS v.6. Поиск по сайту с показом карточки товара
HOSTCMS v.6. Поиск по сайту с показом карточки товара
Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

Как открыть интернет-магазин за 6 простых шагов
Как открыть интернет-магазин за 6 простых шагов

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


Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.