Вертикальное выпадающее меню на 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. Боковое выпадающее меню на CSS для каталога товаров
HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров
Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

Как открыть интернет-магазин за 6 простых шагов
Как открыть интернет-магазин за 6 простых шагов

Создание интернет-магазина - это не только блестящая идея, вам также нужно правильно ее реализовать, чтобы увеличить охват. Сделаете это правильно, и вы увидите, как продажи начнут расти. Сделаете это неправильно, и у вас просто будет очень трудоемкое хобби.


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

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


HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...

Как начать продавать онлайн из дома и зарабатывать деньги
Как начать продавать онлайн из дома и зарабатывать деньги
Развитие электронной коммерции произвело революцию в том, как компании, ИП и самозанятые продают свои товары и услуги. У вас есть неограниченный потенциал продавать онлайн  что угодно и кому угодно из любой точки России. Это дает вам доступ к миллионам пользователей Интернета по всей нашей необъятной стране для увеличения продаж и развития вашего бизнеса.

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

QRcode

2010-2023 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

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