Блог

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

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

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

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

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

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

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

  • HostCMS v.6 - левое вертикальное меню на jQuery

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

  • Красивое горизонтальное выпадающее меню на CSS для HostCMS

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

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

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

  • Поиск по сайту с показом карточки товара для HostCMS v.6

    Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

Блог

  • 29 марта 2018 г.
    Боковое выпадающее меню на CSS для каталога товаров. HostCMS v.6
    Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...
  • 07 марта 2018 г.
    Тенденции веб-дизайна в 2018 году
    В 2018 году, дизайнеры начинают разработку чистых и простых сайтов, способных соответствовать стандартам мобильных достижений. Центр внимания сосредотачивается на проекты с прямолинейным, но эффективным и оптимизированным дизайном.
  • 26 января 2018 г.
    Что такое лендинг пейдж?
    Дословно лендинг пейдж переводится с английского (landing page) как целевая страница. В Рунете можно встретить еще один перевод термина лендинг пейдж – посадочная страница...
  • 28 декабря 2017 г.
    Внедрение в макет кода формы с reCaptcha. HostCMS 6
    Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...
  • 24 ноября 2017 г.
    Выводим производителей с разбивкой по алфавиту. HostCMS v.6
    Если у вас в интернет-магазине много производителей (брендов), то приведенное нами решение поможет организовать показ всех производителей с разбивкой по алфавиту...
  • 07 сентября 2017 г.
    Четыре причины, почему Facebook необходим для маркетинговых кампаний
    Успех вашего онлайн-бизнеса зависит от того, как вы реализуете свою стратегию цифрового маркетинга во взаимодействии с вашей целевой аудиторией...
  • 17 июня 2017 г.
    Варианты создания логотипа сайта
    Фундаментом фирменного стиля является логотип. Непосредственно на логотип, в первую очередь, обращают внимание клиенты любой компании, к тому же, логотип должен быть обязательно размещён на такой имиджевой продукции, как ручки, чашки фирменные бланки и прочее.

Все статьи

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

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

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

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

ПРОДАЖА ГОТОВЫХ РЕШЕНИЙ

Готовые интернет-магазины и интеграционные решения для сайтов на HostCMS

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

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг

Подробный ПРАЙС-ЛИСТ