mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Popravljen mobilni meni
Deploy to Production on Develop Push / deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
Mark Poljanšek committed 2025-09-04 16:14:35 +02:00
1 parent 6ed8073b76
commit c1094898b7
19 files changed
+130 -96
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/layout/_header.css
+58 -34
View File
@@ -35,7 +35,6 @@
gap: 48px;
}
/* KLJUČNA SPREMEMBA: Navigacijskemu ovoju damo možnost rasti, da zapolni prostor */
.header-content > nav {
flex-grow: 1;
display: flex;
@@ -55,10 +54,9 @@
display: flex;
align-items: center;
height: 100%;
width: 100%; /* Dovolimo, da seznam zasede celotno širino <nav> elementa */
width: 100%;
}
/* KLJUČNA SPREMEMBA: Poravnamo elemente na desno znotraj razpoložljivega prostora */
.navigation.desktop-nav {
justify-content: flex-end;
}
@@ -82,7 +80,7 @@
align-items: center;
gap: 8px;
transition: color 0.2s ease-in-out;
white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelom besedila */
white-space: nowrap;
}
.navigation > .menu-item > a:hover {
@@ -104,10 +102,9 @@
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0; /* Preprečimo, da bi se gumbi stisnili */
flex-shrink: 0;
}
/* Stili za izbiro jezika (ostanejo enaki) */
.language-selector {
position: relative;
cursor: pointer;
@@ -169,19 +166,19 @@
background-color: #FFFFFF;
border: 1px solid #EAECF0;
list-style: none;
margin: 8px 0 0 0; /* Povečan odmik za zračnost */
margin: 8px 0 0 0;
padding: 8px;
min-width: 260px;
border-radius: 12px;
box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
/* To pravilo povzroča težave na mobilnih napravah in ga bomo spodaj povozili */
.navigation .menu-item:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
@@ -219,7 +216,7 @@
/* ==========================================================================
5. Stili za mobilno glavo in "accordion" meni - OPTIMIZIRANO
5. Stili za mobilno glavo in "accordion" meni - POPOLNA PRENOVA
========================================================================== */
@media (max-width: 1024px) {
@@ -235,14 +232,9 @@
z-index: 1002;
}
/* === GLAVNI POPRAVEK ZA DELOVANJE MOBILNEGA MENIJA === */
/* Preprečimo, da bi .header-content zavzel ves prostor na mobilni napravi,
kar je sicer pravilno za namizje, a na mobilni napravi potisne ikono menija
izven vidnega polja ali prepreči klik nanjo. */
.header-content {
flex-grow: 0;
}
/* ======================================================= */
.navigation.desktop-nav,
.dropdown-header-navigation .container > .navigation-actions {
@@ -254,11 +246,12 @@
font-size: 24px;
color: #101828;
cursor: pointer;
z-index: 1002;
z-index: 1003;
}
.mobile-menu-icon .fa-times { display: none; }
body.nav-open .mobile-menu-icon .fa-bars { display: none; }
body.nav-open .mobile-menu-icon .fa-times { display: block; }
html.nav-open .mobile-menu-icon .fa-bars { display: none; }
html.nav-open .mobile-menu-icon .fa-times { display: block; }
.mobile-nav-panel {
display: flex;
@@ -277,7 +270,7 @@
overflow-y: auto;
}
body.nav-open .mobile-nav-panel {
html.nav-open .mobile-nav-panel {
transform: translateX(0);
}
@@ -287,14 +280,17 @@
align-items: stretch;
width: 100%;
gap: 0;
border-bottom: 1px solid #EAECF0;
padding-bottom: 24px;
}
.mobile-nav .menu-item {
display: block;
height: auto;
border-bottom: 1px solid #EAECF0;
}
.mobile-nav .menu-item:last-of-type {
border-bottom: none;
.mobile-nav .menu-item:first-of-type {
border-top: 1px solid #EAECF0;
}
.mobile-nav .menu-item > a {
@@ -309,29 +305,29 @@
height: auto;
}
.mobile-nav .menu-item.open > a::after {
html.nav-open .mobile-nav .menu-item.open > a::after {
transform: rotate(180deg);
}
.mobile-nav .dropdown-menu {
position: static;
background-color: #F9FAFB;
box-shadow: none;
border-radius: 0;
padding: 0 0 0 16px;
min-width: auto;
width: 100%;
max-height: 0;
overflow: hidden;
transform: none;
opacity: 1;
visibility: visible;
transform: none;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
box-shadow: none;
border: none;
background-color: transparent;
width: 100%;
min-width: auto;
margin: 0;
padding: 0 0 8px 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.mobile-nav .menu-item.open > .dropdown-menu {
max-height: 500px;
padding: 16px 0 16px 16px;
}
.mobile-nav .dropdown-menu ul {
@@ -339,18 +335,46 @@
margin: 0;
list-style: none;
}
.mobile-nav .dropdown-menu li {
padding: 0;
}
.mobile-nav .dropdown-menu a {
display: block;
padding: 12px 16px 12px 24px;
color: #344054;
font-weight: 500;
font-size: 18px;
padding: 10px 0;
border-radius: 6px;
white-space: normal;
}
.mobile-nav .dropdown-menu a:hover {
background-color: transparent;
background-color: #F9FAFB;
color: #101828;
}
/* === KLJUČNI POPRAVEK: Onemogočimo namizne :hover efekte na mobilnih napravah === */
.mobile-nav .menu-item:hover > .dropdown-menu {
/* Preprečimo, da bi namizno pravilo :hover vplivalo na mobilni meni.
Na mobilni napravi je stanje odprtosti nadzorovano izključno z razredom .open. */
opacity: 1;
visibility: visible;
transform: none;
}
.mobile-nav .menu-item:hover > a::after {
/* Preprečimo obračanje puščice ob :hover dogodku.
Puščica se bo obrnila le, ko je dodan razred .open. */
transform: none;
}
html.nav-open .mobile-nav .menu-item.open > a::after {
/* Zagotovimo, da se puščica obrne, ko je meni odprt */
transform: rotate(180deg);
}
/* ================================================================================ */
.mobile-nav-panel .navigation-actions {
display: flex;
flex-direction: column;