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

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

 
Посетитель
small user social cms
Сообщений: 32
Всем привет.
Помогите сделать меню в виде круглишков. Само меню должно выводиться в позиции, позицию я уже прописал. Никак не могу понять как вывести меню. Решил его разместить в Дополнительном меню 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 в 06:43)
Ученик
Посетитель
small user social cms
Сообщений: 32
Ошибку я понял. Всё дело было в том, что файл mod_menu1.tpl был создан не в том шаблоне. Его нужно создавать в основном шаблоне, в папке template/_default_
Решаю дальше задачу, меню я вывел, сейчас нужно создать в меню списка <ul><li> класс, для каждого пункта свой.
Для этого нужно чтобы циклом насчиталось 5 значений и получить
<li class="test1">
<li class="test2">
<li class="test3">
Это делать нужно в файле шаблона mod_menu1.tpl, скорее всего через цикл for и через создание переменной. С этим пока проблема.
Ученик
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2606
Не помню как в InstantCMS1.9, но в последних версиях первой ветки для каждого пункта меню можно задать класс в настройках пункта меню.
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child http://htmlbook.ru/css/nth-child

Если пункты меню не собираетесь часто переключать через админку, можно просто собрать html код меню и вставить в mod_menu1.tpl заменив всё содержимое
Посетитель
small user social cms
Сообщений: 32
Нил™:

Не помню как в InstantCMS1.9, но в последних версиях первой ветки для каждого пункта меню можно задать класс в настройках пункта меню.
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child http://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}
Код неправильный, но идея такая, чтобы установить класс, и повысить для класса номер, и для каждого номера потом написать стиль с координатами.
Пока вот не получается, не могу никак сделать увеличение номера класса в зависимости от количества пунктов меню, начиная с нуля.
Ученик
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2606
а почему просто не использовать id пункта меню?

class="krug_menu{$item.id}"
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 3111
Gordankem, извините, у меня нет ответа на ваш вопрос, но, если позволите, попрошу вас объяснить что собой представляет это чудо ("круговое меню") .
Заранее благодарен!
Украинский для инстант
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 846
Спойлер
Как сделать круговое меню в модуле шаблона на сайте?
Редактировалось: 2 раз (Последний: 28 сентября 2019 в 08:50)
Посетитель
small user social cms
Сообщений: 32
Насчёт расположения и разметки я на HTML и CSS сделал, только не через список
<ul>
<li></li>
<li></li>
</ul>
А через блоки <div></div>
Но это на макете, на самом сайте нужно делать через список. А для этого нужно в шаблоне mod_menu.tpl выделить класс для этого.
Мой код круглого меню на макете HTML
Спойлер
[/quote]
Редактировалось: 6 раз (Последний: 30 сентября 2019 в 11:22)
Ученик
Посетитель
small user social cms
Сообщений: 32
Нил™:

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

class="krug_menu{$item.id}"

Спасибо за подсказку. Вроде что-то получилось. Сейчас буду CSS стилями расположение выстраивать.
Как сделать круговое меню в модуле шаблона на сайте?
Редактировалось: 2 раз (Последний: 30 сентября 2019 в 06:00)
Ученик
Посетитель
small user social cms
Сообщений: 32
Нил™:

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

class="krug_menu{$item.id}"

Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.
Ученик
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 861
Gordankem:
удалиться и ID измениться
Здравствуйте. А Вы не допускайте этого, id на пункт в принципе другое можно указать не затрагивая имеющиеся.
И скиньте где берете меню лучше, посомтрю что там есть.
Ну и самое простое, когда выведите меню, установите такие кнопки - <a href="ссылка на страницу">Кнопка 1</a> И все, никакой айди не нужен. Меню конечно интересное, но как на мобилке себя вести будет?
Редактировалось: 1 раз (Последний: 30 сентября 2019 в 11:52)
Посетитель
small user social cms
Сообщений: 32
Заралик:

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

Это не подходит, так как у основного сайта свой шаблон и он главный, а это отдельный раздел со своим шаблоном, и если просто давать ссылку на статью, то она отображается с основным шаблоном. Поэтому и приходится выделять отдельный класс, и для него писать стили с координатами.
Для мобильной версии тоже можно сделать пропорциональное уменьшение через медиазапросы, в зависимости от ширины экрана, а потом может другое меню или исчезновение, потому как это уже будет не так важно.
Редактировалось: 1 раз (Последний: 30 сентября 2019 в 12:18)
Ученик
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2606
Gordankem:
Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.
при удалении одного пункта меню, ID остальных пунктов меню не меняются.

Кстати, если вы хотите меню на чистом html но вы хотите через пункты меню назначить для разделов отдельные шаблоны, вы можете создать пункты меню и назначить шаблоны, но не публиковать сам модуль с меню "не опубликовано", а опубликовать в этом месте модуль с html кодом или вообще вставить html код в шаблон
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2606
цифру, которую вы видите в админке около пункта меню, это не есть его iD, чтобы посмотреть id откройте пункт меню на редактирование и смотрите в адресной строке
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1992
Gordankem, вот было в закладках, может чем поможет:
https://instantcms.ru/forum/thread11984-1.html#100344
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: