Многоуровневое вертикальное меню

<div class="vertmenu">
    <ul>
		<li>
			<a class="active" href="#">Пункт меню 1</a>
			<input type="checkbox" class="subCat" id="1" checked="checked" />
			<label class="chka" for="1"></label>
			<ul style="display:none">
				<li>
					<a class="active" href="#">Пункт меню 1.1</a>
					<input type="checkbox" class="subCat" id="1.1" checked="checked"/>
					<label class="chka" for="1.1"></label>
					<ul style="display:none">
						<li>
							<a href="#">Пункт меню 1.1.1</a>
						</li>
						<li>
							<a href="#">Пункт меню 1.1.2</a>
						</li>
						<li>
							<a href="#">Пункт меню 1.1.3</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Пункт меню 1.2</a>
				</li>
				<li>
					<a href="#">Пункт меню 1.3</a>
				</li>
			</ul>
		</li>	
		<li>
			<a href="#">Пункт меню 2</a>
			<input type="checkbox" class="subCat" id="2" />
			<label class="chka" for="2"></label>
			<ul style="display:none">
				<li>
					<a href="#">Пункт меню 2.1</a>
				</li>
				<li>
					<a href="#">Пункт меню 2.2</a>
				</li>
				<li>
					<a href="#">Пункт меню 2.3</a>
				</li>
				<li>
					<a href="#">Пункт меню 2.4</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Пункт меню 3</a>
			<input type="checkbox" class="subCat" id="3" />
			<label class="chka" for="3"></label>
			<ul style="display:none">
				<li>
					<a href="#">Пункт меню 3.1</a>
				</li>
				<li>
					<a href="#">Пункт меню 3.2</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Пункт меню 4</a>
			<input type="checkbox" class="subCat" id="4" />
			<label class="chka" for="4"></label>
			<ul style="display:none">
				<li>
					<a href="#">Пункт меню 4.1</a>
				</li>
				<li>
					<a href="#">Пункт меню 4.2</a>
				</li>
				<li>
					<a href="#">Пункт меню 4.3</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

<ul>

<li>

<a class="active" href="#">Пункт меню 1</a>

<li>

<a class="active" href="#">Пункт меню 1.1</a>

<li>

<a href="#">Пункт меню 1.1.1</a>

</li>

<li>

<a href="#">Пункт меню 1.1.2</a>

</li>

<li>

<a href="#">Пункт меню 1.1.3</a>

</li>

</ul>

</li>

<li>

<a href="#">Пункт меню 1.2</a>

</li>

<li>

<a href="#">Пункт меню 1.3</a>

</li>

</ul>

</li>

<li>

<a href="#">Пункт меню 2</a>

<li>

<a href="#">Пункт меню 2.1</a>

</li>

<li>

<a href="#">Пункт меню 2.2</a>

</li>

<li>

<a href="#">Пункт меню 2.3</a>

</li>

<li>

<a href="#">Пункт меню 2.4</a>

</li>

</ul>

</li>

<li>

<a href="#">Пункт меню 3</a>

<li>

<a href="#">Пункт меню 3.1</a>

</li>

<li>

<a href="#">Пункт меню 3.2</a>

</li>

</ul>

</li>

<li>

<a href="#">Пункт меню 4</a>

<li>

<a href="#">Пункт меню 4.1</a>

</li>

<li>

<a href="#">Пункт меню 4.2</a>

</li>

<li>

<a href="#">Пункт меню 4.3</a>

</li>

</ul>

</li>

</ul>

</div>

.vertmenu {
margin: 0 20px;
font-family: 'Open Sans', sans-serif;	
}
.vertmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.vertmenu ul li {
position: relative;
margin: 0;
line-height: 30px;
text-transform: uppercase;	
}
.vertmenu ul li li {
padding-left:20px;
}
.vertmenu .subCat, .chka {
top: 0;
right: 0px;
position: absolute;
cursor: pointer;
}
.vertmenu .subCat.plus, 
.chka:before, 
.vertmenu .subCat.minus, 
.subCat:checked + .chka:before {
content: '+';
font-size: 26px;
color: #1266B1;
font-weight: bold;	
font-family: Courier;	
}
.vertmenu .subCat.minus, .subCat:checked + .chka:before {
content: '-';
}
.vertmenu a {
color: #477AB9;
font-size: 16px;
font-weight:bold;
text-decoration:none;
}
.vertmenu ul li li a {
color: #666;
font-size: 15px;
font-weight:normal;
text-decoration:none;
}
.vertmenu a.active {
color: #00B1EC;
}
.vertmenu a:hover {
text-decoration: none;
color: #000 !important;
}
.vertmenu > ul > li ul {
display: none;
}
.vertmenu > ul > li a.active + span + ul {
display: block !important;
}
.vertmenu > ul > li .subCat:checked ~ ul {
display: block !important;
}
.vertmenu input[type=checkbox].subCat {
display:none;
}
.vertmenu ul li li a:before {
content: '\203A';
font-size: 20px;
padding-right: 6px;
color: #666;
font-weight: bold;
}
.vertmenu > ul li li a:hover:before {
color: #1266B1;
}

.vertmenu {

margin: 0 20px;

font-family: 'Open Sans', sans-serif;

}

.vertmenu ul {

list-style: none;

margin: 0;

padding: 0;

}

.vertmenu ul li {

position: relative;

margin: 0;

line-height: 30px;

text-transform: uppercase;

}

.vertmenu ul li li {

padding-left:20px;

}

.vertmenu .subCat, .chka {

top: 0;

right: 0px;

position: absolute;

cursor: pointer;

}

.vertmenu .subCat.plus,

.chka:before,

.vertmenu .subCat.minus,

.subCat:checked + .chka:before {

content: '+';

font-size: 26px;

color: #1266B1;

font-weight: bold;

font-family: Courier;

}

.vertmenu .subCat.minus, .subCat:checked + .chka:before {

content: '-';

}

.vertmenu a {

color: #477AB9;

font-size: 16px;

font-weight:bold;

text-decoration:none;

}

.vertmenu ul li li a {

color: #666;

font-size: 15px;

font-weight:normal;

text-decoration:none;

}

.vertmenu a.active {

color: #00B1EC;

}

.vertmenu a:hover {

text-decoration: none;

color: #000 !important;

}

.vertmenu > ul > li ul {

display: none;

}

.vertmenu > ul > li a.active + span + ul {

display: block !important;

}

.vertmenu > ul > li .subCat:checked ~ ul {

display: block !important;

}

.vertmenu input[type=checkbox].subCat {

display:none;

}

.vertmenu ul li li a:before {

content: '\203A';

font-size: 20px;

padding-right: 6px;

color: #666;

font-weight: bold;

}

.vertmenu > ul li li a:hover:before {

color: #1266B1;

}

Активный раздел подсвечивается классом ссылки: active

<a class="active" href="#">Пункт меню 1</a>

1	<a class="active" href="#">Пункт меню 1</a>

А чтобы активное меню оставалось открытым, checkbox должен быть checked

<input type="checkbox" class="subCat" id="1" checked="checked" />

1	<input type="checkbox" class="subCat" id="1" checked="checked" />

HostCMS 6:

Чтобы использовать это меню для разделов интернет магазина в системе HostCMS, нужно создать XSL-шаблон и добавить его в макет сайта. А также добавить стили CSS.

XSL-шаблон
PHP

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:hostcms="http://www.hostcms.ru/"
exclude-result-prefixes="hostcms">
	<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="/">
		<div class="sidebar-content">
			<div class="section-title">
				<h3>Каталог продукции</h3>
			</div>
			
			<xsl:apply-templates select="/shop"/>
		</div>
		
	</xsl:template>
	<!-- Шаблон для магазина -->
	<xsl:template match="/shop">
		<div class="vertmenu">
			<ul>
				<xsl:apply-templates select="shop_group"/>
			</ul>
		</div>
	</xsl:template>
	<!-- Шаблон для групп товара -->
	<xsl:template match="shop_group">
		<xsl:variable name="current_group_id" select="/shop/ТекущаяГруппа"/>
		
		<xsl:choose>
			<xsl:when test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id]) = 1">
				<li>
					<a href="{url}" class="active"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
					
					<xsl:if test="shop_group">
						<input type="checkbox" class="subCat" id="{@id}" checked="checked" />	<label class="chka" for="{@id}"></label>
						<ul style="display:none">
							<xsl:apply-templates select="shop_group"/>
						</ul>
					</xsl:if>
				</li>
			</xsl:when>
			<xsl:otherwise>
				<li>
					<a href="{url}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
					<xsl:if test="shop_group">
						<input type="checkbox" class="subCat" id="{@id}" />	<label class="chka" for="{@id}"></label>
						<ul style="display:none">
							<xsl:apply-templates select="shop_group"/>
						</ul>
					</xsl:if>
				</li>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE xsl:stylesheet>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:hostcms="http://www.hostcms.ru/"

exclude-result-prefixes="hostcms">

<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="/">

<h3>Каталог продукции</h3>

</div>

<xsl:apply-templates select="/shop"/>

</div>

</xsl:template>

<xsl:template match="/shop">

<ul>

<xsl:apply-templates select="shop_group"/>

</ul>

</div>

</xsl:template>

<xsl:template match="shop_group">

<xsl:variable name="current_group_id" select="/shop/ТекущаяГруппа"/>

<xsl:choose>

<xsl:when test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id]) = 1">

<li>

<xsl:if test="shop_group">

<xsl:apply-templates select="shop_group"/>

</ul>

</xsl:if>

</li>

</xsl:when>

<xsl:otherwise>

<li>

<xsl:if test="shop_group">

<xsl:apply-templates select="shop_group"/>

</ul>

</xsl:if>

</li>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

</xsl:stylesheet>

<?php
	// Разделы магазина
	$Shop_Controller_Show = new Shop_Controller_Show(
	Core_Entity::factory('Shop', 1)
	);
	
	// ТекущаяГруппа
	if (is_object(Core_Page::instance()->object)
	&& get_class(Core_Page::instance()->object) == 'Shop_Controller_Show') {
		$Shop_Controller_Show->addEntity(
		Core::factory('Core_Xml_Entity')
		->name('ТекущаяГруппа')->value(intval(Core_Page::instance()->object->group))
		);
	}
	
	$Shop_Controller_Show
	->xsl(
	Core_Entity::factory('Xsl')->getByName('ВертикальноеМеню') // Название XSL-шаблона
	)
	->groupsMode('all')
	//->itemsForbiddenTags(array('text'))
	->group(0)
	->limit(0);
	if (is_object(Core_Page::instance()->object)
	&& get_class(Core_Page::instance()->object) == 'Shop_Controller_Show')
	{
		$Shop_Controller_Show->addEntity(
		Core::factory('Core_Xml_Entity')
		->name('current_group_id')
		->value(intval(Core_Page::instance()->object->group))
		);
	}
	$Shop_Controller_Show->show();
?>

<?php

// Разделы магазина

$Shop_Controller_Show = new Shop_Controller_Show(

Core_Entity::factory('Shop', 1)

);

// ТекущаяГруппа

if (is_object(Core_Page::instance()->object)

&& get_class(Core_Page::instance()->object) == 'Shop_Controller_Show') {

$Shop_Controller_Show->addEntity(

Core::factory('Core_Xml_Entity')

->name('ТекущаяГруппа')->value(intval(Core_Page::instance()->object->group))

);

}

$Shop_Controller_Show

->xsl(

Core_Entity::factory('Xsl')->getByName('ВертикальноеМеню') // Название XSL-шаблона

)

->groupsMode('all')

//->itemsForbiddenTags(array('text'))

->group(0)

->limit(0);

if (is_object(Core_Page::instance()->object)

&& get_class(Core_Page::instance()->object) == 'Shop_Controller_Show')

{

$Shop_Controller_Show->addEntity(

Core::factory('Core_Xml_Entity')

->name('current_group_id')

->value(intval(Core_Page::instance()->object->group))

);

}

$Shop_Controller_Show->show();

Рабочий пример можно поглядеть тут

Сергей: 28.03.2023 в 23:51

как сделать чтобы при открытии одного пункта другой чтобы закрывался. Смена чекбокса на радио не помогает.

Ответить
Сергей: 16.03.2023 в 23:59

Все работает, но есть проблема - все пункты меню открыты. Как исправить?

Ответить
- Alexander: 20.03.2023 в 09:49
  
  Проверьте checked="checked", они делают пункты открытыми.
  
  Ответить
  - Сергей: 20.03.2023 в 15:37
    
    Спасибо, разобрался. Еще вопрос - как сделать чтобы при открытии одного пункта другой чтобы закрывался. Смена чекбокса на радио не помогает.
    
    Ответить
Рушан: 07.09.2022 в 02:58

Начал настраивать, если меняешь анкор ссылки в пункте 1.1 (который по умолчанию), то пропадают все замутки с плюсами 🙁

Ответить
- Рушан: 07.09.2022 в 02:59
  
  Ставишь свой анкор, либо просто в одной букве меняешь, то все плюсики слетают.
  
  Ответить
  - Рушан: 07.09.2022 в 13:52
    
    Не понятно, вставляешь все на страницу, сохраняешь все работает, потом второй раз без редактирования сохраняешь страницу и все, плюсики пропадают
    
    Ответить
    - Alexander: 07.09.2022 в 19:36
      
      Если на вскидку предположить, то это редактор вставляет лишние теги, например <p></p> или <span></span> или еще как то "правит" код.
      Из-за этого меняется хтмл и не работает что-то.
      
      Ответить
      - Рушан: 07.09.2022 в 19:55
        
        Да, вот понял только, вот эти строчки <input type="checkbox" class="subCat" id="1" checked="checked" />
        <label class="chka" for="1"></label> редактор по другому расставляет.
        
        Ответить
Анатолий: 28.05.2020 в 00:53

здравствуйте. Это очень классное меню. то что я искал. Но нужна версия на обычном php. не могли бы подсказать где найти?
я никак полноценно не могу его применить в своем проекте.

Ответить
- Alexander: 28.05.2020 в 02:22
  
  php для какого движка?
  Просто на этом языке ничего не оформляется, а только реализуется.
  А в этой теме только оформление и реализация на движок HostCMS
  
  Ответить
Alex: 11.10.2017 в 08:37

А как сделать, чтобы без правых плюсов минусов, а просто по клику на сами пункты меню?

Ответить
- Alexander: 11.10.2017 в 09:33
  
  Тут как раз вся замутка с плюсиками, менюх которые открываются по клику на название уйма всяких.
  Но частенько бывает нужно, чтобы название открывало ссылку, а не раскрывало подменю.
  Для этого как раз эта менюха.
  Если нужно чтобы открывало по названию, проще с нуля сделать новое или найти готовое другое, чем из этого переделывать 🙂
  
  Ответить

HostCMS 6:

Смотрите также:

Добавить комментарий:

Комментарии: