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


Библиотеку jQuery можно скачать на сайте разработчика.
Шаг 1
Реализовать меню достаточно просто. По умолчанию считаем, что jQuery библиотека у нас подключена. Для начала в макете или шаблоне страницы выводим php код:
<div class="topmenu">
<?php
$Structure = & singleton('Structure');
$Structure->ShowStructure(6,'ЛевоеВыпадающееМеню');
?>
</div>
Шаг 2
Создаем 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="/document">
<ul>
<!-- Выбираем узлы структуры →
<xsl:apply-templates select= «structure[show=1]»/>
</ul> </xsl:template>
<xsl:template match="structure»>
<!-- Запишем в константу ID структуры, данные для которой будут выводиться
пользователю-- >
<xsl:variable name= «current_structure_id»
select=»/document/structure/current_structure_id»/>
<li>
<!-- Показывать ссылку, или нет →
<xsl:if test= «show_link=1»>
<!-- Определяем адрес ссылки →
<xsl:variable name= «link»>
<xsl:choose>
<!-- Если внешняя ссылка →
<xsl:when test= «is_external_link=1»>
<xsl:value-of disable-output-escaping= «yes» select= «external_link»/>
</xsl:when>
<!-- Иначе если внутренняя ссылка →
<xsl:otherwise>
<xsl:value-of disable-output-escaping= «yes» select= «link»/>
</xsl:otherwise> </xsl:choose> </xsl:variable>
<!-- Определяем стиль вывода ссылки → <xsl:variable name= «link_style»>
<xsl:choose>
<!-- Выделяем текущую страницу жирным (если это текущая страница,
либо у нее есть ребенок с ID, равным текущей)-- >
<xsl:when test= «current_structure_id=@id or count
(.//structure[@id=$current_structure_id])=1»>color: #fff</xsl:when>
<!-- Иначе обычный вывод с пустым стилем →
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:variable>
<a href=»{$link}»>
<xsl:value-of disable-output-escaping= «yes» select= «name»/>
</a>
</xsl:if>
<!-- Выводим подуровни меню →
<xsl:if test= «count (structure[show = 1]) > 0»>
<ul>
<xsl:apply-templates select= «structure[show=1]» mode= «pool»/>
</ul>
</xsl:if>
<!-- Если не показывать ссылку — выводим просто имя ссылки — >
<xsl:if test= «show_link=0»>
<xsl:value-of disable-output-escaping= «yes» select= «name»/>
</xsl:if>
</li>
</xsl:template>
<xsl:template match= «structure» mode= «pool»>
<li>
<!-- Показывать ссылку, или нет → <xsl:if test= «show_link=1»>
<!-- Определяем адрес ссылки-- >
<xsl:variable name= «link»>
<xsl:choose>
<!-- Если внешняя ссылка — >
<xsl:when test= «is_external_link=1»>
<xsl:value-of disable-output-escaping= «yes» select= «external_link»/>
</xsl:when> <!-- Иначе если внутренняя ссылка — >
<xsl:otherwise>
<xsl:value-of disable-output-escaping= «yes» select= «link»/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<a href=»{$link}»>
<xsl:value-of disable-output-escaping= «yes» select= «name»/>
</a>
</xsl:if>
<!-- Если не показывать ссылку — выводим просто имя ссылки — >
<xsl:if test= «show_link=0»>
<xsl:value-of disable-output-escaping= «yes» select= «name»/>
</xsl:if>
</li>
</xsl:template></xsl:stylesheet>
Шаг 3
Прописываем CSS стили (можете редактировать под дизайн вашего сайта):
a:focus {outline: none;}
. topmenu {float:left; border: 0px solid#999; margin-bottom: 30px;}
. topmenu ul,. topmenu li {list-style:none; margin: 0px; padding: 0px; }
. topmenu ul li {position:relative; width:200px; }
. topmenu ul li a {
text-align: left;
display:block;
padding:12px;
color: #000066;
text-decoration: none;
border-bottom: 1px solid #999;
margin:0px;
background: url (/images/SpryMenuBarRight.gif) 190px 50% no-repeat #dedede;
font-weight: bold;}
.topmenu ul li a:hover {
background: url (/images/SpryMenuBarRightHover.gif) 190px 50%
no-repeat #D21034; color: #fff;}
.topmenu ul li ul {display: none; position:absolute; top:0; left: 201px;
z-index: 9999;}
.topmenu ul li ul a { font-weight: normal; background: #dedede;}
.topmenu ul li ul a:hover {color: #ffffff; background: #000066;}
Шаг 4
В head прописываем вот этот скрипт:
<script type= «text/javascript»>
$ (document).ready (function (){
$ ('.topmenu ul li').hover (
function () {
$ (this).find ('ul:first').stop (true, true);
$ (this).find ('ul:first').slideDown ();
}, function () {
$ (this).find ('ul:first').slideUp ('fast');
}
) ;
});
</script>