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

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

СКАЧАТЬ ФАЙЛЫ МЕНЮ

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]) &gt; 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>