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

Posodobljen mobilni meni
Deploy to Production on Develop Push / deploy (push) Successful in 1m7s
Details

Browse Source
This commit is contained in:
Mark Poljanšek committed 2025-09-04 20:43:28 +02:00
1 parent c1094898b7
commit 37b72526d8
51 files changed
+4294 -2776
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/layout/_header.css
+150 -98
View File
@@ -6,14 +6,14 @@
* Ta datoteka vsebuje stile za glavo (header) spletne strani.
*
* 1. Glavni kontejner za glavo
* 2. Vsebina glave (logotip, navigacija)
* 2. Vsebina glave (logotip, navigacija) - POSODOBLJENO
* 3. Gumbi in akcije v glavi (vključno z izbiro jezika)
* 4. Stili za namizni "dropdown" meni (PRENOVLJEN DIZAJN)
* 5. Stili za mobilno glavo in "accordion" meni (optimizirano)
* 4. Stili za namizni "dropdown" meni
* 5. Stili za mobilno glavo in "accordion" meni
* 6. Stili za modalno okno za izbiro jezika na mobilnih napravah
*/
/* 1. Glavni kontejner za glavo */
.dropdown-header-navigation {
position: absolute;
width: 100%;
@@ -26,27 +26,21 @@
z-index: 1000;
}
/* 2. Vsebina glave (logotip, navigacija) */
/* 2. Vsebina glave (logotip, navigacija) - POSODOBLJENO */
.logo-link .logo-img {
height: 32px;
width: auto;
display: block; /* Za zanesljivo obnašanje */
}
.header-content {
/* Nov ovoj za desno stran glave */
.header-right-wrapper {
display: flex;
align-items: center;
flex-grow: 1;
gap: 48px;
gap: 24px; /* Razmik med navigacijo in gumbi */
}
.header-content > nav {
flex-grow: 1;
display: flex;
height: 100%;
}
.logo-link .logo-img {
height: 32px;
width: auto;
}
/* Osnovna struktura navigacije (UL/LI) */
/* Osnovna struktura navigacije */
.navigation {
list-style: none;
margin: 0;
@@ -57,10 +51,6 @@
width: 100%;
}
.navigation.desktop-nav {
justify-content: flex-end;
}
.navigation .menu-item {
position: relative;
height: 100%;
@@ -68,17 +58,16 @@
align-items: center;
}
/* Povezave v glavnem meniju - z več razmika */
/* Povezave v glavnem meniju */
.navigation > .menu-item > a {
text-decoration: none;
color: #667085;
font-weight: 600;
font-size: 16px;
padding: 0 20px;
padding: 0 16px; /* Prilagojen padding */
height: 100%;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease-in-out;
white-space: nowrap;
}
@@ -87,6 +76,11 @@
color: #101828;
}
/* Poudarjanje aktivne strani na namizju */
.navigation .menu-item.active-page > a {
color: #2D738C;
}
/* Puščica za podmeni */
.navigation .menu-item-has-children > a::after {
content: '\f078';
@@ -94,10 +88,10 @@
font-weight: 900;
font-size: 12px;
transition: transform 0.3s ease-in-out;
margin-left: 8px;
}
/* 3. Gumbi in akcije v glavi */
.navigation-actions {
display: flex;
align-items: center;
@@ -109,6 +103,7 @@
position: relative;
cursor: pointer;
}
.current-lang {
display: flex;
align-items: center;
@@ -121,6 +116,7 @@
.current-lang:hover { background-color: #F9FAFB; }
.current-lang span { font-weight: 600; }
.current-lang .fa-chevron-down { transition: transform 0.3s ease-in-out; }
.lang-dropdown {
display: block;
position: absolute;
@@ -144,6 +140,7 @@
transform: translateY(0);
}
.language-selector.active .current-lang .fa-chevron-down { transform: rotate(180deg); }
.lang-dropdown a {
display: block;
padding: 10px 12px;
@@ -156,9 +153,7 @@
}
.lang-dropdown a:hover { background-color: #F9FAFB; }
/* 4. Stili za namizni "dropdown" meni - PRENOVLJEN DIZAJN */
/* 4. Stili za namizni "dropdown" meni */
.dropdown-menu {
position: absolute;
top: 100%;
@@ -178,7 +173,6 @@
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;
@@ -189,9 +183,7 @@
transform: rotate(180deg);
}
.dropdown-menu li {
padding: 0;
}
.dropdown-menu li { padding: 0; }
.dropdown-menu a {
display: block;
@@ -216,10 +208,9 @@
/* ==========================================================================
5. Stili za mobilno glavo in "accordion" meni - POPOLNA PRENOVA
5. Stili za mobilno glavo in "accordion" meni
========================================================================== */
@media (max-width: 1024px) {
@media (max-width: 1024px) {
.dropdown-header-navigation {
position: fixed;
@@ -232,12 +223,8 @@
z-index: 1002;
}
.header-content {
flex-grow: 0;
}
.navigation.desktop-nav,
.dropdown-header-navigation .container > .navigation-actions {
/* Skrij nov ovoj za desno stran na mobilni napravi */
.header-right-wrapper {
display: none;
}
@@ -280,8 +267,8 @@
align-items: stretch;
width: 100%;
gap: 0;
border-bottom: 1px solid #EAECF0;
padding-bottom: 24px;
border-bottom: none;
}
.mobile-nav .menu-item {
@@ -298,15 +285,20 @@
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px 0;
padding: 16px;
font-size: 20px;
color: #101828;
font-weight: 600;
height: auto;
box-sizing: border-box;
}
html.nav-open .mobile-nav .menu-item.open > a::after {
transform: rotate(180deg);
.mobile-nav .menu-item.active-page > a {
color: #2D738C;
font-weight: 700;
border-left: 3px solid #2D738C;
padding-left: 13px;
background-color: transparent;
}
.mobile-nav .dropdown-menu {
@@ -326,62 +318,33 @@
transition: max-height 0.3s ease-in-out;
}
.mobile-nav .menu-item.open > .dropdown-menu {
max-height: 500px;
}
.mobile-nav .dropdown-menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.mobile-nav .dropdown-menu li {
padding: 0;
}
.mobile-nav .menu-item.open > .dropdown-menu { max-height: 500px; }
.mobile-nav .dropdown-menu ul { padding: 0; margin: 0; list-style: none; }
.mobile-nav .dropdown-menu li { padding: 0; }
.mobile-nav .dropdown-menu a {
display: block;
padding: 12px 16px 12px 24px;
padding: 12px 16px 12px 45px;
color: #344054;
font-weight: 500;
font-size: 18px;
border-radius: 6px;
white-space: normal;
}
.mobile-nav .dropdown-menu a:hover {
background-color: #F9FAFB;
color: #101828;
}
.mobile-nav .dropdown-menu a:hover { background-color: #F9FAFB; }
/* === 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 .menu-item:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-nav .menu-item:hover > a::after { transform: none; }
html.nav-open .mobile-nav .menu-item.open > a::after { transform: rotate(180deg); }
.mobile-nav-panel .navigation-actions {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
margin-top: auto;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid #EAECF0;
}
.mobile-nav-panel .navigation-actions .btn {
@@ -389,17 +352,106 @@
max-width: 340px;
align-self: center;
}
.mobile-nav-panel .language-selector {
margin-top: 16px;
text-align: center;
.mobile-nav-panel .language-selector .current-lang {
justify-content: center;
width: 100%;
max-width: 340px;
margin: 0 auto;
background-color: #F9FAFB;
border: 1px solid #EAECF0;
box-sizing: border-box;
}
.mobile-nav-panel .lang-dropdown {
left: 50%;
transform: translateX(-50%);
right: auto;
bottom: calc(100% + 8px);
top: auto;
}
.mobile-nav-panel .lang-dropdown { display: none; }
}
/* ==========================================================================
6. Stili za modalno okno za izbiro jezika
========================================================================== */
#language-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(16, 24, 40, 0.6);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#language-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.language-modal-content {
background-color: #FFFFFF;
border-radius: 16px;
padding: 24px;
width: 90%;
max-width: 400px;
box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
transform: scale(0.95);
transition: transform 0.3s ease;
}
#language-modal-overlay.active .language-modal-content {
transform: scale(1);
}
.language-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.language-modal-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #101828;
}
#language-modal-close {
background: none;
border: none;
font-size: 24px;
color: #667085;
cursor: pointer;
padding: 4px;
line-height: 1;
}
.language-modal-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.language-modal-body a {
display: block;
padding: 12px 16px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-weight: 500;
color: #344054;
background-color: #F9FAFB;
border: 1px solid #EAECF0;
border-radius: 8px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.language-modal-body a:hover,
.language-modal-body a.active-lang {
background-color: #FFFFFF;
border-color: #2D738C;
color: #2D738C;
}