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

Вертикальное выпадающее меню на jQuery для HostCMS
Вертикальное выпадающее меню на 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>

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

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

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

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

Анти-спам или как на странице сайта скрыть код формы от ботов?
Анти-спам или как на странице сайта скрыть код формы от ботов?
Не ошибусь, если скажу, что практически все владельцы сайтов сталкиваются с такой проблемой, как СПАМ. Это просто кошмар, когда ваш почтовый ящик ежедневно наполняется сотнями, а то и тысячами СПАМ-писем.

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

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

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


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

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.