Блог

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

Понравилась статья? Поделитесь

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

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

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

  • Мелкие "полезности" при работе с XSL

    Заметка для тех, кто начинает работать с языком XSL. Небольшие хитрости, которые моут быть полезны при написании сайтов.

    Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com...

  • HOSTCMS v.6. Полезные php коды

    Некоторые полезные php коды для вывода данных на странице сайта.

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

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

  • HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

    Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

  • Используем готовые шаблоны для сайтов

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

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна и создание интернет-сайта.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

ШАБЛОНЫ САЙТОВ

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Разработка логотипа. Редизайн сайта. Замена вашей CMS на HostCMS. Калькуляторы. Формы.