Przykład menu kurtynowego na masce standard v3 - IDOSELL

Jak zrobić menu kurtynowe? IDOSELL (IAI) maska STANDARD V3

W odpowiedzi na ogromne zapotrzebowanie modyfikacji szablonu sklepu na IDOSELL przedstawiamy gotową modyfikację CSS która wyświetla menu kurtynowe zamiast klasycznego w szablonie standard.

Jak dodać style CSS w masce standard?

W celu modyfikacji styli CSS należy przejść do Moderacja → Zarządzanie szablonami dla strony

Menu zarządzanie szablonami dla strony

Następnie wybieramy odpowiednią wersję językową, jeśli takową posiadamy. Dalej należy kliknąć przycisk Dostosuj (ikonka z ołówkiem).

Kolejnym krokiem jest wybranie kafelka z nagłówkiem Edytuj arkusz styli CSS, a dokładniej należy kliknąć na link prowadzący do edycji styli CSS sygnowany ołówkiem oraz tekstem Edytuj CSS

Gotowe style CSS które odmienią Twoje menu! Menu kurtynowe

Jeśli już wykonałeś poprzednie kroki następnie należy wkleić w prawym oknie kod CSS który zmieni menu sklepu w menu kurtynowe.

@media (min-width: 979px) {

header .nav-item {
    position: static!important;
}

header .navbar-subsubnav {
    border: none;
}

header .navbar-subnav > .nav-item > .nav-link:not(:only-child)::after {
    display: none;
}

.navbar-nav>li>.navbar-subnav>li {
    padding: 0 20px;
    break-inside: avoid-column;
    display: table;
}

.navbar-nav li .navbar-subnav {
    width: 100%;
    padding: 30px 20px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.navbar-subsubnav {
    position: static!important;
    display: block!important;
}

.navbar-subnav > .nav-item > .nav-link {
    color: #0090f6;
    font-size: 120%;
}
}

Klikamy Zobacz zmiany w trybie podglądu w celu sprawdzenia działania modyfikacji, a następnie po weryfikacji Zapisz zmiany.

Poniższy kod jest odpowiedzialny za nagłówek pod kategorii w menu.

.navbar-subnav > .nav-item > .nav-link {
    color: #0090f6;
    font-size: 120%;
}

właściwość color wpływa na kolor nagłówka, który otrzymał wartość #0090f6; czyli kolor niebieski

font-size z wartością 120%; wpływa na rozmiar tekstu, w tym przypadku nagłówek jest większy o 20% od elementu nadrzędnego.

Pierwszy wpis programisty

#include <code.fbs>

asdasdasddasdasdsdasdss

dasdasdasdasdas

dasdasdasdasdas

Nagłowek 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nagłowek 1

#1337

Nagłowek 2

asdasdasdasdasddasdas