Блог

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

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

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

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

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

  • HOSTCMS v.6. Поиск по сайту с показом карточки товара

    Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

  • Используем готовые шаблоны для сайтов

    Если вы сами не дизайнер и не можете пользоваться графическими программами или у вас нет средств на то, чтобы заказать разработку дизайна сайта профессиональному веб дизайнеру, или сайт нужен очень срочно, то в этом случае вам помогут готовые шаблоны сайтов. Или же уже готовые сайты...

  • HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

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

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

Веб дизайн

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

Поддержка сайта

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

Готовый дизайн

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

Контекстная реклама

Настройка и ведение рекламной кампании в Директ