Всем привет.
Помогите сделать меню в виде круглишков. Само меню должно выводиться в позиции, позицию я уже прописал. Никак не могу понять как вывести меню. Решил его разместить в Дополнительном меню 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 и через создание переменной. С этим пока проблема.
Решаю дальше задачу, меню я вывел, сейчас нужно создать в меню списка <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 заменив всё содержимое
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child htmlbook.ru/css/nth-child
Если пункты меню не собираетесь часто переключать через админку, можно просто собрать html код меню и вставить в mod_menu1.tpl заменив всё содержимое
Сегодня в 05:46
#4
27 сентября 2019 в 14:22
Я с это начинал, с чистого HTML. Но вот дело в том, что при переходе по пункту меню ещё шаблон завязан, и происходит переключение на базовый шаблон, а мне это не нужно совсем.
Не помню как в InstantCMS1.9, но в последних версиях первой ветки для каждого пункта меню можно задать класс в настройках пункта меню.
Если этого нет в InstantCMS1.9 можно отталкиваться от общего класса меню и использовать nth-child htmlbook.ru/css/nth-child
Если пункты меню не собираетесь часто переключать через админку, можно просто собрать html код меню и вставить в mod_menu1.tpl заменив всё содержимое
Придумал так сделать.
{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}"
class="krug_menu{$item.id}"
#6
27 сентября 2019 в 18:40
Gordankem, извините, у меня нет ответа на ваш вопрос, но, если позволите, попрошу вас объяснить что собой представляет это чудо ("круговое меню") .
Заранее благодарен!
Заранее благодарен!
<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>
<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>
Насчёт расположения и разметки я на 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]
<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;
}
а почему просто не использовать id пункта меню?
class="krug_menu{$item.id}"
Спасибо за подсказку. Вроде что-то получилось. Сейчас буду CSS стилями расположение выстраивать.
#10
30 сентября 2019 в 11:25
а почему просто не использовать id пункта меню?
class="krug_menu{$item.id}"
Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.
Здравствуйте. А Вы не допускайте этого, id на пункт в принципе другое можно указать не затрагивая имеющиеся.удалиться и ID измениться
И скиньте где берете меню лучше, посомтрю что там есть.
Ну и самое простое, когда выведите меню, установите такие кнопки — <a href="ссылка на страницу">Кнопка 1</a> И все, никакой айди не нужен. Меню конечно интересное, но как на мобилке себя вести будет?
Здравствуйте. А Вы не допускайте этого, id на пункт в принципе другое можно указать не затрагивая имеющиеся.удалиться и ID измениться
И скиньте где берете меню лучше, посомтрю что там есть.
Ну и самое простое, когда выведите меню, установите такие кнопки — Кнопка 1 И все, никакой айди не нужен. Меню конечно интересное, но как на мобилке себя вести будет?
Это не подходит, так как у основного сайта свой шаблон и он главный, а это отдельный раздел со своим шаблоном, и если просто давать ссылку на статью, то она отображается с основным шаблоном. Поэтому и приходится выделять отдельный класс, и для него писать стили с координатами.
Для мобильной версии тоже можно сделать пропорциональное уменьшение через медиазапросы, в зависимости от ширины экрана, а потом может другое меню или исчезновение, потому как это уже будет не так важно.
#13
30 сентября 2019 в 22:14
при удалении одного пункта меню, ID остальных пунктов меню не меняются.Пока продумывал как реализовать стили, подсказали ещё одну помеху в будущем. ID меню идёт по порядку и назначены как-то, а если какой-то элемент удалиться и ID измениться? Тогда и стили класса CSS придётся менять, они же будут привязанны к номеру.
Кстати, если вы хотите меню на чистом html но вы хотите через пункты меню назначить для разделов отдельные шаблоны, вы можете создать пункты меню и назначить шаблоны, но не публиковать сам модуль с меню "не опубликовано", а опубликовать в этом месте модуль с html кодом или вообще вставить html код в шаблон
#14
30 сентября 2019 в 22:20
цифру, которую вы видите в админке около пункта меню, это не есть его iD, чтобы посмотреть id откройте пункт меню на редактирование и смотрите в адресной строке
#15
30 сентября 2019 в 22:29
Gordankem, вот было в закладках, может чем поможет:
/forum/thread11984-1.html#100344
/forum/thread11984-1.html#100344