Ищу код на стилизацию мобильной навигации (offcanvas)

Dev_Wenvalbi · 25 Мар 2026

На ету навигацыю

...

KeoFox · 25 Мар 2026

Dev_Wenvalbi написал(а):
На ету навигацыю

OFFTOP

эту*
навигацию*

навигация тебе в жизни не понадобится, а вот грамотность бесценна

Joker_Mayorov · 26 Мар 2026

Код:

 .canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: @color;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: @color !important;
    }
}

.canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when not (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"] + .p-navEl-splitTrigger
    {
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }
}

.canvas-style(home; white; f015);
.canvas-style(forums; #ff8e00; f15b);
.canvas-style(whatsNew; #54ff9f; f466);
.canvas-style(members; #fff; f466; #fff; "https://media3.giphy.com/media/xThuWcaa4U4XZQDgvm/giphy.gif");
.canvas-style(НУЖЕН_ID; yellow; f51e; red); // Магазин форума
.canvas-style(НУЖЕН_ID; #f00; f071); // Правила форума

Настройка:

Административаня Панель - extra.less(туда вставлять код)
дальше в узлы - добавить узел - страница

значение ставь любое но мое например MAGAZFORUMA

И в заголовке пиши Магазин Форума/Правила Форума

и убрать галочку "показывать в узлах"

дальше в навигацию и там добавляй все

Joker_Mayorov · 26 Мар 2026

Решение если помог

Dev_Wenvalbi · 28 Мар 2026

Joker_Mayorov написал(а):
Решение если помог

Joker_Mayorov написал(а):

Код:

 .canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: @color;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: @color !important;
    }
}

.canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when not (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"] + .p-navEl-splitTrigger
    {
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }
}

.canvas-style(home; white; f015);
.canvas-style(forums; #ff8e00; f15b);
.canvas-style(whatsNew; #54ff9f; f466);
.canvas-style(members; #fff; f466; #fff; "https://media3.giphy.com/media/xThuWcaa4U4XZQDgvm/giphy.gif");
.canvas-style(НУЖЕН_ID; yellow; f51e; red); // Магазин форума
.canvas-style(НУЖЕН_ID; #f00; f071); // Правила форума

Настройка:

Административаня Панель - extra.less(туда вставлять код)
дальше в узлы - добавить узел - страница

значение ставь любое но мое например MAGAZFORUMA

И в заголовке пиши Магазин Форума/Правила Форума

и убрать галочку "показывать в узлах"

дальше в навигацию и там добавляй все

Неробит

Joker_Mayorov · 29 Мар 2026

Dev_Wenvalbi написал(а):
Неробит

Удалите строки

Код:

 .canvas-style(НУЖЕН_ID; yellow; f51e; red); // Магазин форума
.canvas-style(НУЖЕН_ID; #f00; f071); // Правила форума

и вставьте их отдельно

Dev_Wenvalbi · 31 Мар 2026

Joker_Mayorov написал(а):
Удалите строки

Код:

.canvas-style(НУЖЕН_ID; yellow; f51e; red); // Магазин форума .canvas-style(НУЖЕН_ID; #f00; f071); // Правила форума

и вставьте их отдельно

Так работает но магазин и правила неа

KeoFox · 31 Мар 2026

Dev_Wenvalbi написал(а):
Так работает но магазин и правила неа

ищи себе тех.администратора уже наконец, все у него не работает

Поиск

Welcome!

Ищу код на стилизацию мобильной навигации (offcanvas)

Dev_Wenvalbi

Вложения

Joker_Mayorov

KeoFox

Joker_Mayorov

Joker_Mayorov

Dev_Wenvalbi

Joker_Mayorov

Dev_Wenvalbi

KeoFox