Мобильное меню - История изменений

Whoa в 14:48, 7 мая 2018

2018-05-07T14:48:32Z

Whoa в 14:29, 7 мая 2018

2018-05-07T14:29:11Z

Whoa в 14:28, 7 мая 2018

2018-05-07T14:28:30Z

Whoa в 14:28, 7 мая 2018

2018-05-07T14:28:16Z

Whoa в 14:25, 7 мая 2018

2018-05-07T14:25:56Z

Whoa в 14:24, 7 мая 2018

2018-05-07T14:24:48Z

Whoa в 14:22, 7 мая 2018

2018-05-07T14:22:32Z

Whoa в 14:20, 7 мая 2018

2018-05-07T14:20:16Z

Whoa в 14:17, 7 мая 2018

2018-05-07T14:17:58Z

Zloydemon: Новая страница: «Мы будем делать мобильное меню на основе menu draw.
Для этого нам понадобится следующее – не…»

2018-05-07T11:12:06Z

Новая страница: «Мы будем делать мобильное меню на основе menu draw. Для этого нам понадобится следующее – не…»

Новая страница

Мы будем делать мобильное меню на основе menu draw. 
Для этого нам понадобится следующее – небольшой файл с кодом вызова меню, стиль меню. 
'''Важно!''' Меню будет вызываться из отдельного файла по причине возможности существования 2х и более шаблонов для страниц сайта. 
Порядок работы. 
Создадим меню в модуле Меню (для примера идентификатор меню выбран как verxm) 
Напишем отдельный xsl файл для обработки меню. Назовем его mobmenu.xsl (файл создается в папке \templates\имя шаблона\xslt\layouts) 
Содержимое файла будет следующим 
<source lang="php">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://i18n/constants.dtd:file">

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="mmenu1">
<nav>
<input type="checkbox" id="btn-menu" />
<label for="btn-menu"> Меню</label>
<ul class="list-menu">
<xsl:apply-templates select="document('udata://menu/draw/verxm')/udata" mode="info-pages-head" />
</ul>
</nav>
</xsl:template>
</xsl:stylesheet>
</source>
Далее в файле стилей нашего сайта пропишем стиль меню
<source lang="css">
/* mobile menu */
.list-menu{
display: flex;
list-style: none;
}
.list-menu > li > a{
color: #000;
display: block;
padding: 5px 15px;
}
.list-menu > li > a:hover{
background: #fff;
}

#btn-menu{
display: none;
}
#btn-menu + label{
display: none;
position: relative;
color: #000;
height: 20px;
z-index: 1;
cursor: pointer;
}
#btn-menu + label:before{
content: '\f0c9';
display: inline-block;
font-family:'FontAwesome';
font-size: 22px;
}
#btn-menu:checked + label:before{
content: '\f00d';
color: #f00;
}

@media screen and (max-width: 800px) {
input.button.search {left: 5px;
position: absolute;
margin-top: -27px;}
#btn-menu + label{
display: inline-block;
font-weight: 600;
font-size: 21px;

}
#btn-menu + label + .list-menu{
display: none;
}
#btn-menu:checked + label + .list-menu{
display: block;
margin-top: 20px;

}
nav{
background: #fcd62d;
padding: 15px;
display:block!important;
position: relative;
top: 0;
width: 100%;
z-index: 99;
}
ul.list-menu li a {
padding: 10 20;
color: black;
text-decoration: none;
font-weight: 600;
width: 100%;
display: block;
text-transform: uppercase;
}

ul.list-menu li a:hover {color: white}
ul.list-menu li:hover {background: #0f55aa;}
}
nav {display:none}
</source>
 
После чего мы можем воспользоваться вызовом нашего меню в том месте шаблона где нам требуется 
<source lang="php">
<xsl:call-template name="mmenu1" />
</source> 
''Заметка. Вызов меню можно заключить в div для использования дополнительных действий, к примеру абсолютного или фиксированного позиционирования.'' 
'''Важно!''' Не забываем подключить созданный файл в наш шаблон
<source lang="php">
<xsl:include href="layouts/mobmenu.xsl" />
</source> 
'''ВАЖНО!''' Данная сборка делалась на основе demodizzy (стандартного демо шаблона), если у вас отсутствует этот шаблон, было проведено обновление системы с версии Lite или у вас собственный шаблон то убедитесь, что содержимое файла \templates\ваш шаблон\xslt\modules\menu\common.xsl соответствует указанному 
<source lang="php">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://mobile/i18n/constants.dtd:file">

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:umi="http://www.umi-cms.ru/TR/umi">


<xsl:template match="udata[@module = 'menu']" mode="info-pages-head">
<ul>
<xsl:apply-templates select="item" mode="info-pages-head" />

</ul>
</xsl:template>

<xsl:template match="udata[@module = 'menu']/item" mode="info-pages-head">
<li>
<a href="{@link}">
<xsl:value-of select="node()" />
</a>
</li>
</xsl:template>

</xsl:stylesheet>
</source> 
И что данный файл подключен в основном шаблоне 
<source lang="php">
<xsl:include href="modules/menu/common.xsl" />
</source> 
[[category:Верстка в XSLT]]

@@ Строка 1: / Строка 1: @@
 '''Статья предоставлена партнером UMI.CMS [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/ Дмитрием Путилиным]'''
-Актуально для версии 2.18.
+Актуально для версии 18.
 Мы будем делать мобильное меню на основе menu draw.<br>

← Предыдущая		Версия 14:29, 7 мая 2018
Строка 1:		Строка 1:
−	'''Статья предоставлена партнером UMI.CMS ~~Дмитрием Путилиным~~ [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/]'''	+	'''Статья предоставлена партнером UMI.CMS [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/ Дмитрием Путилиным]'''

	Актуально для версии 2.18.		Актуально для версии 2.18.

← Предыдущая		Версия 14:28, 7 мая 2018
Строка 1:		Строка 1:
−	'''Статья предоставлена партнером UMI.CMS [Дмитрием Путилиным [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/]]'''	+	'''Статья предоставлена партнером UMI.CMS Дмитрием Путилиным [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/]'''

	Актуально для версии 2.18.		Актуально для версии 2.18.

← Предыдущая		Версия 14:28, 7 мая 2018
Строка 1:		Строка 1:
−	'''Статья предоставлена партнером UMI.CMS [Дмитрием Путилиным]'''	+	'''Статья предоставлена партнером UMI.CMS [Дмитрием Путилиным [https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/]]'''

	Актуально для версии 2.18.		Актуально для версии 2.18.

← Предыдущая		Версия 14:25, 7 мая 2018
Строка 1:		Строка 1:
−	'''Статья предоставлена партнером UMI.CMS Дмитрием Путилиным~~: https://www.umi-cms.ru/find_webdevs/putilin_dmitrij_mihajlovich/~~'''	+	'''Статья предоставлена партнером UMI.CMS [Дмитрием Путилиным]'''

	Актуально для версии 2.18.		Актуально для версии 2.18.

@@ Строка 1: / Строка 1: @@
 Актуально для версии 2.18.
@@ Строка 147: / Строка 149: @@
 </source> <br>
 [[category:Верстка в XSLT]]

@@ Строка 22: / Строка 22: @@
 </xsl:stylesheet>
 </source>
-Далее в файле стилей нашего сайта пропишем стиль меню
+Далее в файле стилей нашего сайта пропишем стиль меню:
 <source lang="css">
 /* mobile menu */
@@ Строка 103: / Строка 103: @@
 </source>
 <br>
-После чего мы можем воспользоваться вызовом нашего меню в том месте шаблона где нам требуется<br>
+После чего мы можем воспользоваться вызовом нашего меню в том месте шаблона, где нам требуется:<br>
 <source lang="php">
 <xsl:call-template name="mmenu1" />
 </source><br>
-''Заметка. Вызов меню можно заключить в div для использования дополнительных действий, к примеру абсолютного или фиксированного позиционирования.''<br>
+''Заметка. Вызов меню можно заключить в div для использования дополнительных действий, к примеру, абсолютного или фиксированного позиционирования.''<br>
-'''Важно!''' Не забываем подключить созданный файл в наш шаблон
+'''Важно!''' Не забываем подключить созданный файл в наш шаблон:
 <source lang="php">
 <xsl:include href="layouts/mobmenu.xsl" />
 </source><br>
-'''ВАЖНО!''' Данная сборка делалась на основе demodizzy (стандартного демо шаблона), если у вас отсутствует этот шаблон, было проведено обновление системы с версии Lite или у вас собственный шаблон то убедитесь, что содержимое файла \templates\ваш шаблон\xslt\modules\menu\common.xsl соответствует указанному<br>
+'''ВАЖНО!''' Данная сборка делалась на основе demodizzy (стандартного демо-шаблона), если у вас отсутствует этот шаблон, было проведено обновление системы с версии Lite или у вас собственный шаблон то убедитесь, что содержимое файла \templates\ваш шаблон\xslt\modules\menu\common.xsl соответствует указанному:<br>
 <source lang="php">
 <?xml version="1.0" encoding="utf-8"?>
@@ Строка 140: / Строка 140: @@
 </xsl:stylesheet>
 </source><br>
-И что данный файл подключен в основном шаблоне<br>
+И что данный файл подключен в основном шаблоне:<br>
 <source lang="php">
 <xsl:include href="modules/menu/common.xsl" />
 </source> <br>
 [[category:Верстка в XSLT]]

@@ Строка 3: / Строка 3: @@
 '''Важно!''' Меню будет вызываться из отдельного файла по причине возможности существования 2х и более шаблонов для страниц сайта.<br>
 Порядок работы.<br>
-Создадим меню в модуле Меню (для примера идентификатор меню выбран как verxm)<br>
+Создадим меню в модуле Меню (для примера идентификатор меню выбран как verxm).<br>
-Напишем отдельный xsl файл для обработки меню. Назовем его mobmenu.xsl (файл создается в папке \templates\имя шаблона\xslt\layouts) <br>
+Напишем отдельный xsl файл для обработки меню. Назовем его mobmenu.xsl (файл создается в папке \templates\имя шаблона\xslt\layouts). <br>
-Содержимое файла будет следующим<br>
+Содержимое файла будет следующим:<br>
 <source lang="php">
 <?xml version="1.0" encoding="utf-8"?>

Мобильное меню - История изменений

Whoa в 14:48, 7 мая 2018

Whoa в 14:29, 7 мая 2018

Whoa в 14:28, 7 мая 2018

Whoa в 14:28, 7 мая 2018

Whoa в 14:25, 7 мая 2018

Whoa в 14:24, 7 мая 2018

Whoa в 14:22, 7 мая 2018

Whoa в 14:20, 7 мая 2018

Whoa в 14:17, 7 мая 2018

Zloydemon: Новая страница: «Мы будем делать мобильное меню на основе menu draw. Для этого нам понадобится следующее – не…»

Zloydemon: Новая страница: «Мы будем делать мобильное меню на основе menu draw.
Для этого нам понадобится следующее – не…»