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

MasterNik / 18 июня 2012 г. / 6097

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

Шаг 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>