Блог

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. Красивое горизонтальное выпадающее меню на CSS

Понравилась статья? Поделитесь

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

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

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

  • HOSTCMS v.6. Проверка вводимых данных при оформлении заказа

    В 6 версии разработчики убрали проверку вводимых данных в форму заказа на шаге заполнения адреса доставки. Предлагаю очень простое решение этой проблемы с использованием JavaScript. 

  • Эффект вращения с помощью CSS3

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

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

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

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

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

  • Вертикальное выпадающее меню на jQuery для HostCMS

    Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

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

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

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

WEB ДИЗАЙН

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

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

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

ШАБЛОНЫ САЙТОВ

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

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

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