Как сделать круговое меню в модуле шаблона на сайте?

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

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

#1 27 сентября 2019 в 06:36
Всем привет.
Помогите сделать меню в виде круглишков. Само меню должно выводиться в позиции, позицию я уже прописал. Никак не могу понять как вывести меню. Решил его разместить в Дополнительном меню 5. До этого получилось использовать Дополнительное меню 4.
Прописал в шаблоне позицию где будет выводиться меню. Использую движок InstantCMS1.9

Вот на картинке как должно выглядеть и где находиться меню.
Сейчас выводится ошибка Warning: Smarty error: unable to read resource: "mod_menu1.tpl" in Z:\home\trmka.local\www\includes\smarty\libs\Smarty.class.php on line 1092
Я скопировал и переименовал фаил mod_menu1.tpl для меню этот шаблон я прописал, но почему-то ошибка, и в чём дело я не знаю.
#2 27 сентября 2019 в 12:24
Ошибку я понял. Всё дело было в том, что файл mod_menu1.tpl был создан не в том шаблоне. Его нужно создавать в основном шаблоне, в папке template/_default_
Решаю дальше задачу, меню я вывел, сейчас нужно создать в меню списка <ul><li> класс, для каждого пункта свой.
Для этого нужно чтобы циклом насчиталось 5 значений и получить
<li class="test1">
<li class="test2">
<li class="test3">
Это делать нужно в файле шаблона mod_menu1.tpl, скорее всего через цикл for и через создание переменной. С этим пока проблема.
#3 27 сентября 2019 в 13:56
Не помню как в InstantCMS1.9, но в последних версиях первой ветки для каждого пункта меню можно задать класс в настройках пункта меню.
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child htmlbook.ru/css/nth-child

Если пункты меню не собираетесь часто переключать через админку, можно просто собрать html код меню и вставить в mod_menu1.tpl заменив всё содержимое
#4 27 сентября 2019 в 14:22


Не помню как в InstantCMS1.9, но в последних версиях первой ветки для каждого пункта меню можно задать класс в настройках пункта меню.
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child htmlbook.ru/css/nth-child

Если пункты меню не собираетесь часто переключать через админку, можно просто собрать html код меню и вставить в mod_menu1.tpl заменив всё содержимое

Нил™
Я с это начинал, с чистого HTML. Но вот дело в том, что при переходе по пункту меню ещё шаблон завязан, и происходит переключение на базовый шаблон, а мне это не нужно совсем.
Придумал так сделать.
{section name=mnt_zn start=0 loop=$item.NSLevel step=1}
<li {if ($menuid==$item.id || ($currentmenu.NSLeft> $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected"{/if} class="krug_menu{$smarty.section.mnt_zn.index}">
{/section}
{/if}
Код неправильный, но идея такая, чтобы установить класс, и повысить для класса номер, и для каждого номера потом написать стиль с координатами.
Пока вот не получается, не могу никак сделать увеличение номера класса в зависимости от количества пунктов меню, начиная с нуля.
#5 27 сентября 2019 в 15:14
а почему просто не использовать id пункта меню?

class="krug_menu{$item.id}"
#6 27 сентября 2019 в 18:40
Gordankem, извините, у меня нет ответа на ваш вопрос, но, если позволите, попрошу вас объяснить что собой представляет это чудо ("круговое меню") .
Заранее благодарен!
#7 28 сентября 2019 в 08:45
<nav class="deoprevies">
<input type="checkbox" href="#" class="expanddeoprevies" name="expanddeoprevies" id="expanddeoprevies" />
<label class="labecaxu-pgecadin" for="expanddeoprevies">
<span class="asedkad asegted-sandkad"></span>
<span class="asedkad kidgted-ntedob"></span>
<span class="asedkad kiged-lavedu"></span>
</label>

<a href="#" class="basede-bsitaybes persun"> <i class="fas fa-home"></i> </a>
<a href="#" class="basede-bsitaybes vtiposab"> <i class="fas fa fa-coffee"></i> </a>
<a href="#" class="basede-bsitaybes adsaxam"> <i class="fas fa fa-car"></i> </a>
<a href="#" class="basede-bsitaybes setnides"> <i class="fas fa fa-folder-open"></i> </a>
<a href="#" class="basede-bsitaybes lasetub"> <i class="fa fa-bell"></i> </a>
<a href=""> <i class="fa fa-camera-retro"></i> </a>
</nav>

<style>
.expanddeoprevies {
display: none;
}

.basede-bsitaybes,
.labecaxu-pgecadin {
background: #EEEEEE;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: #FFFFFF;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.asedkad {
width: 25px;
height: 3px;
background: #596778;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}

.asegted-sandkad {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}

.kidgted-ntedob {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.kiged-lavedu {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}

.expanddeoprevies:checked + .labecaxu-pgecadin .asegted-sandkad {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}

.expanddeoprevies:checked + .labecaxu-pgecadin .kidgted-ntedob {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.expanddeoprevies:checked + .labecaxu-pgecadin .kiged-lavedu {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}

.deoprevies {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
font-size: 26px;
}

.basede-bsitaybes:hover {
background: #EEEEEE;
color: #3290B1;
}

.basede-bsitaybes:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.basede-bsitaybes:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}

.labecaxu-pgecadin {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.labecaxu-pgecadin:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.expanddeoprevies:checked + .labecaxu-pgecadin {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(3) {
transition-duration: 180ms;
-webkit-transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(4) {
transition-duration: 280ms;
-webkit-transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(5) {
transition-duration: 380ms;
-webkit-transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(6) {
transition-duration: 480ms;
-webkit-transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(7) {
transition-duration: 580ms;
-webkit-transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(8) {
transition-duration: 680ms;
-webkit-transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}

.expanddeoprevies:checked ~ .basede-bsitaybes:nth-child(9) {
transition-duration: 780ms;
-webkit-transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}

.persun {
background-color: #24BCFC;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.persun:hover {
color: #24BCFC;
text-shadow: none;
}

.vtiposab {
background-color: #FF3A3D;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.vtiposab:hover {
color: #FF3A3D;
text-shadow: none;
}

.adsaxam {
background-color: #FFC431;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.adsaxam:hover {
color: #FFC431;
text-shadow: none;
}

.setnides {
background-color: #FF670C;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.setnides:hover {
color: #FF670C;
text-shadow: none;
}

.lasetub {
background-color: #35FFD6;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lasetub:hover {
color: #35FFD6;
text-shadow: none;
}

.dekipaveg {
background-color: #0340D0;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.dekipaveg:hover {
color: #0340D0;
text-shadow: none;
}

@media screen and (max-width: 700px) {
body {
padding: 170px 0 0 0;
width: 100%
}
}

</style>
#8 30 сентября 2019 в 05:51
Насчёт расположения и разметки я на HTML и CSS сделал, только не через список
<ul>
<li></li>
<li></li>
</ul>
А через блоки <div></div>
Но это на макете, на самом сайте нужно делать через список. А для этого нужно в шаблоне mod_menu.tpl выделить класс для этого.
Мой код круглого меню на макете HTML

<div class="krug_gr">
<a class="logo" href="#"><img src="logo_montaj.jpg" alt="Центр Лого" title="Главная"/></a>
<a class="krug_menu1" href="#"><img src="montaj_otoplenie_doma.png" alt="Отопление" title="Отопление" /><span class="podpisRazd">Отопление</span></a>
<a class="krug_menu2" href="#"><img src="montaj_tepliy_pol.png" alt="Тёплый пол" title="Тёплый пол"/><span class="podpisRazd">Тёплый пол</span></a>
<a class="krug_menu3" href="#"><img src="montaj_vodosnabjen.png" alt="Водоснабжение" title="Водоснабжение"/><span class="podpisRazd">Водоснабжение</span></a>
<a class="krug_menu4" href="#"><img src="montaj_kanalizacia.png" alt="Канализация" title="Канализация" /><span class="podpisRazd">Канализация</span></a>
<a class="krug_menu5" href="#"><img src="montaj_santexn.png" alt="Сантехника" title="Сантехника" /><span class="podpisRazd">Сантехника</span></a>
</div>
----CSS----
.krug_gr {
position: relative;
width: 24em;
height: 24em;
padding: 0.8em;
border-radius: 50%;
margin: 39px 0 0 65%;
z-index: 2;
}
.krug_gr a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin: -2em;
}
.krug_gr a .podpisRazd {
color: #fff;
position: absolute;
background: #0094fe;
padding:2px;
top: -46px;
left: -50px;
}
.podpisRazd:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.krug_gr img {
width: 8em;
height: 8em;
top: -50%;
left: -50%;
position: relative;
border-radius: 50%;
}
.logo_montaj{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin: -100px 0 0 -100px;
background: url(logo.jpg)no-repeat;
}
.logo_montaj img {
width: 120px;
height: 120px;
top: -105%;
left: -105%;
position: relative;
border-radius: 50%;
}
.krug_menu1 {
transform: rotate(230deg) translate(10em) rotate(-230deg);
}
.krug_menu1 img a:hover{
border-color: transparent;
}
.krug_menu1 img {
width: 80px;
height: 80px;
border-radius:50%;
position:relative;
border: 4px solid #f6e121;

}
.krug_menu1 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu2{
transform: translate(-10em);
}
.krug_menu2 img {
border: 4px solid #f6e121;
border-radius: 50%;
width: 80px;
height: 80px;
}
.krug_menu2 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu3{
transform: rotate(125deg) translate(10em) rotate(-125deg);
}
.krug_menu3 img {
width: 80px;
height: 80px;
background: #846040 no-repeat;
border: 4px solid #f6e121;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu3 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu4{
transform: rotate(75deg) translate(10em) rotate(-75deg);
}
.krug_menu4 img {
border: 4px solid #f6e121;
width: 80px;
height: 80px;
background: #886010 no-repeat;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu4 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu5 {
transform: rotate(384deg) translate(10em) rotate(-384deg);
}
.krug_menu5 img {
border: 4px solid #f6e121;
width: 80px;
height: 80px;
background: #0f036d no-repeat;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu5 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
[/quote]
#9 30 сентября 2019 в 05:58


а почему просто не использовать id пункта меню?

class="krug_menu{$item.id}"

Нил™

Спасибо за подсказку. Вроде что-то получилось. Сейчас буду CSS стилями расположение выстраивать.
#10 30 сентября 2019 в 11:25


а почему просто не использовать id пункта меню?

class="krug_menu{$item.id}"

Нил™

Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.
#11 30 сентября 2019 в 11:51

удалиться и ID измениться

Gordankem
Здравствуйте. А Вы не допускайте этого, id на пункт в принципе другое можно указать не затрагивая имеющиеся.
И скиньте где берете меню лучше, посомтрю что там есть.
Ну и самое простое, когда выведите меню, установите такие кнопки — <a href="ссылка на страницу">Кнопка 1</a> И все, никакой айди не нужен. Меню конечно интересное, но как на мобилке себя вести будет?
#12 30 сентября 2019 в 12:17


удалиться и ID измениться

Gordankem
Здравствуйте. А Вы не допускайте этого, id на пункт в принципе другое можно указать не затрагивая имеющиеся.
И скиньте где берете меню лучше, посомтрю что там есть.
Ну и самое простое, когда выведите меню, установите такие кнопки — Кнопка 1 И все, никакой айди не нужен. Меню конечно интересное, но как на мобилке себя вести будет?

Заралик

Это не подходит, так как у основного сайта свой шаблон и он главный, а это отдельный раздел со своим шаблоном, и если просто давать ссылку на статью, то она отображается с основным шаблоном. Поэтому и приходится выделять отдельный класс, и для него писать стили с координатами.
Для мобильной версии тоже можно сделать пропорциональное уменьшение через медиазапросы, в зависимости от ширины экрана, а потом может другое меню или исчезновение, потому как это уже будет не так важно.
#13 30 сентября 2019 в 22:14

Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.

Gordankem
при удалении одного пункта меню, ID остальных пунктов меню не меняются.

Кстати, если вы хотите меню на чистом html но вы хотите через пункты меню назначить для разделов отдельные шаблоны, вы можете создать пункты меню и назначить шаблоны, но не публиковать сам модуль с меню "не опубликовано", а опубликовать в этом месте модуль с html кодом или вообще вставить html код в шаблон
#14 30 сентября 2019 в 22:20
цифру, которую вы видите в админке около пункта меню, это не есть его iD, чтобы посмотреть id откройте пункт меню на редактирование и смотрите в адресной строке
#15 30 сентября 2019 в 22:29
Gordankem, вот было в закладках, может чем поможет:
/forum/thread11984-1.html#100344
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.